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

Question

Not a duplicate: already check this question and this one; didn't get any clue. Some of similar ones are related to Laravel.

Can't figure out what was changed in my project, making [Vue warn]: Cannot find element: #app appear.

The structure:

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

[HEADER]

<div id="app" v-cloak></div>

[FOOTER]

main.js:

import Vue from 'vue';
import Users from './Users.vue';
import App from './App.vue';             // (1)
import Home from './Home.vue';           // (2)
import VueRouter from '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 the last block to:

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

it didn't help 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 I get to the index page, the Vue warn gets displayed. One of attached questions I checked suggested that the DOM element is not ready when scripts are running. Already tried to switch order of imports in main.js (App, Home and VueRouter, as marked in comments), but with no success.

Any idea where to look for solution?

Your `script` tag with your spa should be right under #app div tag. Are you sure that it works well with your template engine? — Andrey Kudriavtsev, Jul 28 '17 at 08:52
You can also use the `defer` attribute in the script tag or the `window.addEventListener("load", );` method — Bellian, Jul 28 '17 at 08:56
@Bellian: Used jQuery ready function for this (see edited part), but with no success. — AbreQueVoy, Jul 28 '17 at 09:06
@Bellian: It is processed by webpack, link is at the end of tag. — AbreQueVoy, Jul 28 '17 at 09:16

score 2 · Accepted Answer · answered Jul 28 '17 at 10:24

Okay, found the bug:

index.html:

(...)
      </footer>
   <script src="../dist/build.js"></script>
</body>

The script over there is located in a build directory. However, webpack generates its own script file on the fly and runs the application from it. The script mentioned above in the code was simply overwriting values correctly loaded before. Deleting the ../dist/ directory and commenting the script line out brought everything back to normal.

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

1 Answers1