Level 41
Can you post the entire file, not just that snippet?
Sep 9, 2015
9
Level 7
Error: "Vue is not defined"
I can use vue if I include the compiled javascript at the end of the body, but if I attempt to use it the @JeffreyWay way I get this error: "Uncaught ReferenceError: Vue is not defined"
I installed vue via: npm install vue --save I included it via: var Vue = require('vue'); using browserify in elixir: mix.browserify('app.js'); I included it in the body using:
Here is my test code for it:
var registration = new Vue({
data: {
email: ''
}
}).$mount('#registration-form');
Any help is appreciated, thanks!
Level 13
Make sure JS page is loaded when you create the Vue object.
Level 13
Also $mount will get called for you. Its no bigee Vue will throw a warning if it has already compiled your DOM. I have an initialize function which called from my Layout blade. That function is in the included JS file for the App.
function setupEvents() {
console.log("Coverage: " + this);
app = app = new Vue({
el: '#app-container',
data: {
shortName: "",
longName: "",
//selectOptions: [new Option("1", 1), new Option("2", 2)],
selectOptions: [],
selected: -1,
},
...
If you wanted to build a Vue object as in the demo. The app variable is just a Global (Oh My!!!) to the whole script.
Level 7
@jimmck: the app.js file is loaded before I create the new Vue instance.
This is puzzling me.
It goes:
<script src="app.js"></script>
<script>
new Vue({ ... });
</script>
Here is end of the app.js file from chrome dev tools:
module.exports = Watcher
}).call(this,require('_process'))
},{"./batcher":8,"./config":14,"./observer/dep":48,"./parsers/expression":52,"./util":63,"_process":1}],68:[function(require,module,exports){
'use strict';
var Vue = require('vue');
},{"vue":66}]},{},[68]);
Level 13
Yes. Same issue as with me. Hence the console.log message at the top of my example snippet cuz my Vue object was null. Your doing Node coding??? My issue was Browser. But same deal. You want to make sure the Vue object gets initialized in correct scope.
1 like
Level 41
@calebporzio You are trying to access Vue as if it were available globally. When you are using browserify, each module needs to declare its own dependencies.
I suggest watching this introduction to browserify: https://laracasts.com/lessons/clean-javascript-with-browserify
1 like
Level 7
Thanks @thomaskim and @jimmck.
I added:
window.Vue = Vue;
to my browserified javascript file to make it accessible globally. Worked like a charm.
3 likes
Level 19
If you don't mind, I hijack this thread a bit...
I try to do just as you've done above (window.Vue = Vue that is), but I get Vue is not defined. I'm using webpack, but that shouldn't matter, right?
If it's defined in the window-object it should be reachable from other files further down the rabbit hole, right?
1 like
Level 14
Attach jquery, it resolves the problem.
1 like
Please or to participate in this conversation.