Not a duplicate: already checked this question and this one; didn't find any clue. Some similar ones are related to Laravel.
Having trouble identifying the changes in my project that have caused the appearance of
[Vue warn]: Cannot find element: #appThe setup:
index.html: contains 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: changing the last block to:
$(document).ready(function () {
new Vue({
el: '#app',
router,
render: h => h(App)
})
})
did not resolve the issue.
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 navigate to the index page, the Vue warning is displayed. One suggestion from a related question was that the DOM element might not be ready when the scripts are running. I tried changing the order of imports in main.js (App, Home and VueRouter), as indicated in comments, but it did not work.
Any suggestions on where to look for a solution?