[vue Warn]: Cannot Find Element — Empty Container Is Rendered

I am trying to learn Vue 2 framework and I am stuck with this error. I have the following scripts responsible for the functionality of my application: main.js import Vue from 'vue'

Solution 1:

In App.vue

<template><divid="app"><router-view></router-view></div></template>

The <router-view> component will show the components as per the current route.

importPostsfrom'../components/Posts.vue'const routes = [
 { path: '/', component: Posts }
]

exportdefault routes 

Here it is clear that <router-view> would show the Posts component.

Posts.vue

<template><divid='root'><h1>Test</h1><inputtype="text"v-model="message"></div></template><script>importVuefrom'vue'window.addEventListener('load', function () {
    newVue({
        el: '#root',
        data: {
            message: 'Hello World!'
        }
    })
})
</script>

Flashback to the router, there is a line which says:

importPostsfrom'../components/Posts.vue'

this is the import default syntax but what has been exported by Posts.vue ? Hence, there is nothing imported to the router. Hence, nothing rendered inside the #app.

Also, posts doesn't have to be a new Vue(...) instance.

<template><divid='root'><h1>Test</h1><inputtype="text"v-model="message"></div></template><script>importVuefrom'vue'exportdefault {
  data: {
    message: 'Hello World!'
  }
}
</script>

Will do just fine. With that, there is a default export in place for the router to use.