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
  • you have import statements and you also have a `webpack` tag, I am not quite sure why you would need `window.addEventListener('load', ...)` – Amresh Venugopal Mar 27 '17 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. –  Mar 27 '17 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. – Amresh Venugopal Mar 27 '17 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. – Amresh Venugopal Mar 27 '17 at 20:13
  • @amresh-venugopal, sure. You can find it in original post now. –  Mar 28 '17 at 06:24

1 Answers1

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.

Amresh Venugopal
  • 9,299
  • 5
  • 38
  • 52