Vue Router router-view error

Question

I'm getting the following error when trying to implement vue-router.

Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Where do I need to provide the name option?

A lot of the tutorials I'm looking at seem to be an older version of vue-router. I follow the set-up process but can't get it to work.

Might there be something special I have to do when using the webpack cli template?

I'm also using the vue-router cdn.

Here's my main.js

import Vue from 'vue'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();

const routes = [
  { path: '/', component: App },
  { path: '/info', component: ResourceInfo }
]

const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
var vm = new Vue({
  el: '#app',
  components: { App },
  created: function() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            // Get info for currently signed in user. 
            console.log(user);
            vm.currentUser = user;
             console.log(vm.currentUser);
        } else {
            // No user is signed in.
        }
    })
    // Import firebase data 
    var quizzesRef = db.ref('quizzes');
    quizzesRef.on('value', function(snapshot) {
      vm.quizzes = snapshot.val();
      console.log(vm.quizzes);
    })

    var resourcesRef = db.ref('resources');
    resourcesRef.on('value', function(snapshot) {
      vm.resources.push(snapshot.val());
      console.log(vm.resources);
    })

    var usersRef = db.ref('users');
    usersRef.on('value', function(snapshot) {
      vm.users = snapshot.val();
      console.log(vm.users);
    })
  },
  firebase: {
    quizzes: {
        source: db.ref('quizzes'),
        asObject: true
    },
    users: {
        source: db.ref('users'),
        asObject: true
    }, 
    resources: db.ref('resources')
  },
  data: function() {
    return {
        users: {},
        currentUser: {},
        quizzes: {},
        resources: []
    }
  },
  router,
  render: h => h(App)
})

And my App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info :current-user="currentUser"></resource-info>
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

export default {
  name: 'app',
  props: ['current-user'],
  components: {
    Navbar,
    ResourceInfo
  }
}
</script>

<style>
</style>

Before you start typing your question, you may write  which formats the code inside. It looks nice and improves readability. I have provided my answer below, which has syntax highlighted code. For more info, check out meta.stackoverflow.com/editing-help#syntax-highlighting — Mani
I edited your question, with that syntax definition line at the top. No other changes anywhere, and now your code is formatted inside. It is a useful trick I also learnt recently. — Mani

Mani Mani · Accepted Answer · 2016-10-25T03:23:54

In your main.js file, you need to import VueRouter as follows:

import Vue from "vue"               // you are doing this already
import VueRouter from "vue-router"  // this needs to be done

And below that, you need to initialize the router module as follows:

// Initialize router module
Vue.use(VueRouter)

Other than the above, I cannot find anything else missing in your code, it seems fine to me.

Please refer to the installation page in docs, under NPM section: http://router.vuejs.org/en/installation.html

Vue Router router-view error

3 Answers