Step 01: Installing vue-router package
npm install vue-router@latest
Step 02: Creating second vue component Create.vue with static text below inside resources/js/Issues
<template> <h1>Create Client Issues </h1> </template>
Step 03: Linking the component inside resources/js/app.js
// at the top import IssuesCreate from './components/Issues/Create.vue'
Step 04: Now importing vue-router inside resources/js/app.js and to create list of routes and use that with createApp() method
// at the top import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', component: IssuesIndex }, { path: '/issues-create', component: IssuesCreate }, ] const router = createRouter({ history: createWebHistory(), routes }) createApp({}) // .component('IssuesIndex', IssuesIndex) .use(router) .mount('#app')
Step 05: Now need to add master.vue to add navigation links inside resources/js/layouts/master.vue and take all the blade html there from app.blade.php like below.
<template> <div class="app-body"> <main class="main"> <div style="padding-top: 20px" class="container" > <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <router-link to="/" class="nav-link" href="#">Issues</router-link> </li> <li class="nav-item"> <router-link to="/issues-create" class="nav-link" href="#">Issues Create</router-link> </li> </ul> </nav> <router-view></router-view> </div> </main> </div> </template>
The code above introduced router-view and router-link element from vue-router which will replace traditional anchor tag link without refreshing the page ( router-link ) and all dynamic content would be loaded inside router-view elemenet.
Step 06: Now, Removing id="app" element from previously added to div container class element to body tag inside app.blade.php. Now this file will look like below
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel Vue initial setup </title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> @vite(['resources/js/app.js', 'resources/css/app.css']) </head> <body id="app"> </body> </html>
Step 07: Now linking this master.vue inside resources/js/app.js like below to work navigation links properly
// at the top import App from './layouts/master.vue' createApp(App) .use(router) .mount('#app')
Step 08: now navigation at the top will be seen and if active class needs to be maintained in those link we can tweak the master.vue file like below
<ul class="navbar-nav"> <li class="nav-item" active-class="active"> <router-link to="/" class="nav-link" href="#">Issues</router-link> </li> <li class="nav-item" active-class="active"> <router-link to="/issues-create" class="nav-link" href="#">Issues Create</router-link> </li> </ul>
Step 09: now we need to make changes in routes/web.php like below if we need to maintain site wide direct link access ( for now its issues list and create issue link ) so that laravel does not complain 404 page error
Route::view('/{any?}', 'app')->where('any', '.*');