Vue.js "npm run build" but Vue.js not bound to DOM / working Vue.js "npm run build" but Vue.js not bound to DOM / working vue.js vue.js

Vue.js "npm run build" but Vue.js not bound to DOM / working


npm run build usually also creates the index.html file, or in your case 'webpack-simple' its already present, in which it includes the app.js or build.js just before closing the body tag. If you are including build.js in your own html, try placing it after <div id="app"></div> and before closing the </body>.

Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.

Also if you:

const vm = new Vue({    el: '#app',    render: h => h(App)});

you cannot access 'vm' in the console. Any variable created inside main.js won't be globally available. If you need it for debugging purposes you can do it in the following way:

window.vm = new Vue({  el: '#app',  render: h => h(App)});

And then you can access 'vm' in the console.


As you can see in the index.html file of the webpack-simple template, you should include the scriptafter the <div id="app"> element:

https://github.com/vuejs-templates/webpack-simple/blob/master/template/index.html#L8-L9

The fact that there's no global Vueobject is to be expected since your bundles app doesn'T expose it (and shouldn't)