From this tutorial we will be focusing on making authentication and authorization of this mini issue tracking system. We will be implementing
this step by step in following tutorials.
Step 01: First creating Guest.vue component inside resources/js/layouts folder
<template> <div> <router-view></router-view> </div> </template>
also renaming the App.vue with Authenticated.vue inside resources/js/layouts folder
Step 02: Now inside app.js we will remove the reference of App.vue
// import App from './layouts/App.vue' .... // createApp(App) createApp({}) .use(router) .use(VueSweetalert2) .mount('#app')
Step 03: Since App.vue was our root component renaming it will make our page go blank. to fix this we need to do following steps
// in app.blade.php adding<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" class="container"> <router-view></router-view> </body> </html>
Step 04: Now creating Login.vue component inside resources/js/components/Auth folder
<template> Login component </template>
Step 05: Now separating our routes in resources/routes/index.js into two groups guest and authenticated like below
import AuthenticatedLayout from '../layouts/Authenticated.vue' import GuestLayout from '../layouts/Guest.vue' // instead of this below // const routes = [ // { path: '/', name: 'issues.list', component: IssuesIndex, meta: { title: 'Issues List' } }, // { path: '/create-issues', name: 'issues.create', component: IssuesCreate, meta: { title: 'Issues Create' } }, // { path: '/edit-issue/:id', name: 'issues.edit', component: IssuesEdit, meta: { title: 'Issue Edit' } }, // ] import Login from '../components/Auth/Login.vue' import IssuesIndex from '../components/Issues/Index.vue' import IssuesCreate from '../components/Issues/Create.vue' import IssuesEdit from '../components/Issues/Edit.vue' // we are separating routes like below into authenticated and guest const routes = [ { component : GuestLayout, children : [ { path : '/login', name : 'Login', component : Login, meta: { title: 'Login' } } ] }, { component : AuthenticatedLayout, children : [ { path : '/issues', name : 'issues.list', component : IssuesIndex, meta: { title: 'Issues List' } }, { path : '/create-issues', name : 'issues.create', component : IssuesCreate, meta: { title: 'Issues Create' } }, { path : '/edit-issue/:id', name : 'issues.edit', component : IssuesEdit, meta: { title: 'Issues Edit' } }, ] } ];
Now for root page / it will show empty. However, when we give url paths such as /login or /issues we will be able to see the pages like before.