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 Jagadeesan
– Mani Jagadeesan, Commented Oct 25, 2016 at 3:26
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 Jagadeesan
– Mani Jagadeesan, Commented Oct 25, 2016 at 11:07

Mani Jagadeesan · Accepted Answer · 2016-10-25 03:23:54Z

1

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

answered Oct 25, 2016 at 3:23

Mani Jagadeesan

24.3k6 gold badges70 silver badges54 bronze badges

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

4 Comments

maxwellgover Over a year ago

I'm importing Vue-router in a script tag in my html.

Mani Jagadeesan Over a year ago

What about Vue.use(VueRouter)? That still needs to be done inside the main.js file. To do the above, you need to import again in main.js file, so that the dependency is resolved.

Mani Jagadeesan Over a year ago

The installation page says "You don't need to do this when using global script tags." - which is for Vue standalone build. I believe you are using runtime-only build using webpack template or equivalent, right?

maxwellgover Over a year ago

Adding Vue.use(VueRouter) seems to have solved it. Thanks!

Sujithrao · Accepted Answer · 2016-10-25 12:55:04Z

0

First install vue router by using "npm install vue-route" and follow the bellow in main.js

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

Vue.use(Router)
var router = new Router({
  hashbang: false,
  history: true,
  linkActiveClass: 'active',
  mode: 'html5'
})

router.map({
   '/': {
    name: 'app',
    component: App
  },
  '/info': {
    name: 'resourceInfo',
    component: ResourceInfo
  }
})
// If no route is matched redirect home
router.redirect({
  '*': '/'
});

// Start up our app
router.start(App, '#app')

This might be solve your problem

answered Oct 25, 2016 at 12:55

Sujithrao

7853 gold badges12 silver badges27 bronze badges

1 Comment

Jan Over a year ago

Just wanted to note that this looks right, but is relevant for vue-router 0.x only. There's a different API in v2.

Bach Duong · Accepted Answer · 2020-02-10 09:58:03Z

0

You forgot to import vue-router and initialize VueRouter in main.js

import VueRouter from "vue-router"

Vue.use(VueRouter)

answered Feb 10, 2020 at 9:58

Bach Duong

3012 silver badges4 bronze badges

Collectives™ on Stack Overflow

Vue Router router-view error

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related