[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>
  <div id="app">
   <router-view></router-view>
  </div>
</template>

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

import Posts from '../components/Posts.vue'

const routes = [
 { path: '/', component: Posts }
]

export default routes 

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

Posts.vue

<template>
  <div id='root'>
    <h1>Test</h1>   
    <input type="text" v-model="message">
  </div>
</template>

<script>
import Vue from 'vue'

window.addEventListener('load', function () {
    new Vue({
        el: '#root',
        data: {
            message: 'Hello World!'
        }
    })
})
</script>

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

import Posts from '../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>
  <div id='root'>
    <h1>Test</h1>   
    <input type="text" v-model="message">
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data: {
    message: 'Hello World!'
  }
}
</script>

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