I am trying to build a demo app with Vue.js. What I am getting is an odd error that Vue is not defined.
I found two main problems with that implementation. First, when you import the vue.js
script you use type="JavaScript"
as content-type
which is wrong. You should remove this type
parameter because by default script
tags have text/javascript
as default content-type
. Or, just replace the type
parameter with the correct content-type
which is type="text/javascript"
.
The second problem is that your script is embedded in the same HTML file means that it may be triggered first and probably the vue.js
file was not loaded yet. You can fix this using a jQuery snippet $(function(){ /* ... */ });
or adding a javascript function as shown in this example:
// Verifies if the document is ready
function ready(f) {
/in/.test(document.readyState) ? setTimeout('ready(' + f + ')', 9) : f();
}
ready(function() {
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
});
{{message}}