javascript - [Vue warn]: Cannot find element: #app - Vue.js 2 -

not duplicate: check this question , this one; didn't clue. of similar ones related laravel.

can't figure out changed in project, making [vue warn]: cannot find element: #app appear.

the structure:

index.html: hosts <div id="app">:

[header]  <div id="app" v-cloak></div>  [footer] 

main.js:

import vue 'vue'; import users './users.vue'; import app './app.vue';             // (1) import home './home.vue';           // (2) import vuerouter 'vue-router';      // (3)  vue.use(vuerouter);  const routes = [   {path: '/users', component: users},   {path: '/', component: home} ];  const router = new vuerouter({   routes });  new vue({   el: '#app',   router,   render: h => h(app) }) 

edit: when changed last block to:

$(document).ready(function () {   new vue({     el: '#app',     router,     render: h => h(app)   }) }) 

it didn't either.

app.vue:

<template>   <router-view> </router-view> </template>  <script> export default {   data () {     return {       message: "test message"     }   } } </script> 

home.vue:

<template>     [contents]     [router-links] </template>  <script>     [data]     [methods] </script> 

whenever index page, vue warn gets displayed. 1 of attached questions checked suggested dom element not ready when scripts running. tried switch order of imports in main.js (app, home , vuerouter, marked in comments), no success.

any idea solution?

it seems 'main.js' has been placed in header. go check htmlwebpackplugin setting.