5

The question may sound basic, but I am unable to figure out how to do it in VueJS

I have the following in html 

<script>
 var config = {'cols':4,'color':'red'}
</script>

<div id="app">
   <mycomponent :config="config"></mycomponent>
</div>

var app = new Vue({
   el: '#app',
   data: {
      // config: config // I do not want to pass this
   }
})

Following is the use case:

  • I know this isn't working because config variable in the component is looking for app.config
  • I do not want to pass it as data{ config:config } in the Vue Object.
  • I can pass it as <mycomponent :config="{'cols':4,'color':'red'}"></mycomponent> but the config is going to be very long and this would be my last option.
  • And yes, this config does not change once the page loads, so I do not need to bind values.

Is there a way to do this?

Masade
  • 715
  • 1
  • 11
  • 29
  • ++, I did this defining some global `my_componentname_config()` function which gets then invoked within the "created" hook. But its not a neat solution ... – Nicolas Heimann May 30 '17 at 16:20
  • Passing as a object string to component would be better, also the constraint is that i use this component in multiple places in my app, all I do is change the config. The config gets generated in backend and is passed along with HTML. – Masade May 30 '17 at 16:23
  • Make a plugin as described here: https://stackoverflow.com/a/43193455/7636961 at the bottom. – Egor Stambakio May 30 '17 at 16:52

1 Answers1

5

You can add a global member to Vue itself. Update: As Osuwariboy noted in the comments, for some reason Vue is not aware of itself by name in the un-minified version of Vue. It requires creating a Vue data item, which I have done below.

var app = new Vue({
   el: '#app',
   data: {
      Vue
   },
   components: {
      myComponent: {
        template: '<div>{{config}}</div>',
        props: ['config']
      }
   }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<script>
 Vue.$config = {'cols':4,'color':'red'}
</script>

<div id="app">
   <my-component :config="Vue.$config"></my-component>
</div>
Roy J
  • 42,522
  • 10
  • 78
  • 102
  • This works well for me! Can you please help me understand why javascript objects defined outside are not accessible inside app? – Masade May 30 '17 at 17:36
  • If it were a global variable, it would be accessible, but declared with `var`, it's not global. Rather than wide-open global, I recommend attaching it to the `Vue` global. – Roy J May 30 '17 at 18:05
  • @RoyJ I can't get your solution to work no matter how hard I try. Could you take a look at my fiddle [here](https://jsfiddle.net/8xt8ye4g/4/) and tell me what I'm doing wrong? – Osuwariboy Jul 07 '17 at 17:51
  • @Osuwariboy It works if you use the cloudflare cdn of Vue. You can use the 2.3.4 version on cloudflare and it works; the unpkg.com cdn is supposedly 2.3.4, too, but it doesn't work. I cannot explain that. – Roy J Jul 07 '17 at 18:06
  • @Osuwariboy You can add a `data` for Vue, defining it using the global Vue, and yours works. https://jsfiddle.net/8xt8ye4g/5/ – Roy J Jul 07 '17 at 18:09
  • @RoyJ you mean instead of `props:['config']` I'd do `data:['config]`? Also, I discovered your solution only works if you include vue.min.js, if you include vue.js, you get my error. – Osuwariboy Jul 07 '17 at 18:12
  • @RoyJ Nevermind about my question, I missed the link in your comment. However, my comment about using the minified version VS the clear version still stands, whether you use 2.3.3 or 2.3.4 – Osuwariboy Jul 07 '17 at 18:16