[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? — Andrii Kudriavtsev
– Andrii Kudriavtsev, Commented Jul 28, 2017 at 8:52
You can also use the defer attribute in the script tag or the window.addEventListener("load", <your function>); method — Bellian
– Bellian, Commented Jul 28, 2017 at 8:56
@Bellian: Used jQuery ready function for this (see edited part), but with no success. — AbreQueVoy
– AbreQueVoy, Commented Jul 28, 2017 at 9:06
@Bellian: It is processed by webpack, link is at the end of <body> tag. — AbreQueVoy
– AbreQueVoy, Commented Jul 28, 2017 at 9:16

AbreQueVoy · Accepted Answer · 2017-07-28 10:24:20Z

2

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.

answered Jul 28, 2017 at 10:24

AbreQueVoy

2,3688 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related