0

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'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App.vue'
import Posts from './components/Posts.vue'
import Routes from './routes/routes'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(VueResource)

const router = new VueRouter({
  routes: Routes
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

App.vue

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

</template>

<script>
  import Posts from './components/Posts.vue'

  export default {
    name: 'app',
    components: {
      Posts
    }
  }
</script>

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

Posts.vue

<script>
    import Vue from 'vue'

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

Those scripts are included at the end of the page. Important to mention that the div with id value of 'app' is empty. I am also new to webpack, so I would assume, that there's a problem with my imports and exports, but unfortunately I could not to resolve it myself. Index page simply contains this:

<div id="app"></div>

UPD (router.js)

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

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

export default routes
Improve this question
5
  • you have import statements and you also have a webpack tag, I am not quite sure why you would need window.addEventListener('load', ...) Commented Mar 27, 2017 at 19:18
  • @amresh-venugopal, you are absolutely right about addEventListener() function. I shouldn't include it in the question. I used it earlier for a test. But could you tell me what's wrong with the import statements? What you said just confuses me. Commented Mar 27, 2017 at 20:08
  • I am sorry, I was just drawing inferences from the import statements that you are using webpack so you shouldn't be needing to use the addEventListener part. Nothing wrong with the import statements. Commented Mar 27, 2017 at 20:10
  • Also, I think the posts template got added to app.vue. Could you also share the router.js file? I can't be sure of what the default route is serving. Commented Mar 27, 2017 at 20:13
  • @amresh-venugopal, sure. You can find it in original post now. Commented Mar 28, 2017 at 6:24

1 Answer 1

Reset to default
0

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.

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

2 Comments

Just before I read your response, I recognised the inconsistency you pointed out. Thanks for the code walkthrough anyways. It helped me.
Glad it helps :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.