Vue Router in Laravel

By | 27/01/2020

To use the view router we need to tell laravel that everything we need to route that’s not to the api needs to be taken care of through the Vue router. In your routes/web.php add

Route::get('/{prms?}', function () {
    return view('welcome');
})->where('prms', '^(?!api\/)[\/\w\.-]*');

This tells laravel to consider everything after the forward slash as a parameter and if it doesn’t contain ‘api’ to allow Vue Router to handle it.

Now we need to install Vue Router.

$ npm install vue-router

Now let’s create a file to hold the Vue routes

$ touch resources/js/routes.js

We’ll create the new routes in the route.js file, we’ll add 3 elements, the path, component and name. The component is the element Vue knows to load into the browser and the name is the… well name of the route!

To start with we can use the example component in the components directory.
We need to import it like this:

import ExampleComponent from "./components/ExampleComponent";

We also need to import the due router:

import VueRouter from "vue-router";

Now to declare our first route through a constant called routes:

const routes = [
{
path: "/",
component: ExampleComponent,
name: "home",
},
];

We then need to add it to our VueRouter and export it as a default function.

const router = new VueRouter({
routes,
});

export default router;

To render the component from the VueRouter we have to tell it where to render. On the welcome.blade.php file in your #app div add:

<router-view></router-view>

If you restart your server and head to your home page you should see the example component load!