Boilerplate Vue Project Fails on router-link and router-view

Question

I used vue create to create a new view project with Babel, TypeScript, Router and Unit Testing. I then installed axios using npm.

Having done no other changes, I served the application by navigating to the src directory and running vue serve.

The resulting boilerplate application fails to load with the following error:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at App.vue

My own research shows that this error usually happens when you fail to call Vue.Use(). However, my router.ts file does so:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({   routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },   ], });

Does anyone know what is wrong here? Given I haven't changed anything, could it be a config issue?

Avi Chapman Avi Chapman · Accepted Answer · 2019-01-02T07:47:59

I got it!

The issue was that I was running the server the wrong way. I was using:

vue serve src/App.vue

when I should have used:

npm run serve

After that change, it started to work.

Boilerplate Vue Project Fails on router-link and router-view

2 Answers