Installing Vue Router

Vue Router is an NPM package and can be installed on the command line:

$  npm i --save-dev vue-router

Let's put our router configuration into a new file, router.js:

$ touch resources/assets/js/router.js

To add Vue Router to our project, we must import the library and then use the Vue.use API method to make Vue compatible with Vue Router. This will give Vue a new configuration property, router, that we can use to connect a new router.

We then create an instance of Vue Router with new VueRouter().

resources/assets/js/router.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

export default new VueRouter();

By exporting our router instance from this new file, we've made it into a module that can be imported in app.js. If we name the imported module router, object destructuring can be used to succinctly connect it to our main configuration object.

resources/assets/js/app.js:

import "core-js/fn/object/assign";
import Vue from 'vue';

import ListingPage...