How to pass settings from JS to a component correctly?


#1

I need to pass settings from JS to a component.
It works with the minified VUE version: https://jsfiddle.net/7ebzvj2a/
but I have an error with regular vue: https://jsfiddle.net/d1mavq3r/
What is the correct way?


#2

The problem is that you put your script tag inside VueJS element template. It will cause sideeffects - as the Vue warning says, script tags will not be parsed.

Put your script tag before or after:

<div id="app"></div>

#3

https://jsfiddle.net/pwxb85L7/
the problem still exists


#4

Did you even tried changing the code? I see the same fiddle where your tag is inside the

tag.

#5

The problem is same if I move script tags outside div id=app
https://jsfiddle.net/exr6f104/
The problem is with “TypeError: Cannot read property ‘foo’ of undefined”. It does not appear with the minified vue.


#6

You clearly don’t understand how components and VueJS work.

The template scope is only the Vue instance itself. Global functions and variables need to be proxied to access them.

const settings = {...};

new Vue ({
  data() {
    return {
      settings
    };
  }
});

You cannot insert child component HTML from parent template, you either use slots or have a template HTML separate for the component.