How to Add a Default Persistent Layout In Laravel Inertia and Vue

2 years ago admin Laravel

In this today's lesson, we are going to see how to add a default persistent layout In Laravel Inertia js and Vue js, let's assume that we have a navigation menu component that we want to be shown throughout the whole application.


Create the MainLayout Component

to add a default layout in Inertiajs we need to have a Layouts folder inside the Pages folder once done add a new component MainLayout.vue.

                                                    
                                                                                                                
<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container-fluid">
            <Link class="navbar-brand" href="/">Laravel Vue CRUD App</Link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <Link class="nav-link" aria-current="page"
                            href="/"><i class="fas fa-home"></i> Home</Link>
                    </li>
                    <li class="nav-item">
                        <Link class="nav-link" href="/tasks/create"><i class="fas fa-edit"></i> Create Task</Link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <slot></slot>
</template>

<script setup>
    import { Link } from '@inertiajs/vue3'; 
</script>

<style>
</style>

Set the default layout

To set the default layout all you need to do is to import the MainLayout component and update the code inside the app.js file.

                                                        
                                                                                                                        
import './bootstrap';

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import MainLayout from '@/Pages/Layouts/MainLayout.vue';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    const page = pages[`./Pages/${name}.vue`]
    page.default.layout = page.default.layout || MainLayout
    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Related Tuorials

How to Add a Relationship to a Select in Filament

In this lesson, we will see how to add a relationship to a select in Filament.Let's assume that we h...


How to Generate Slugs from a Title in Filament

In this lesson, we will see how to generate slugs from a title in Filament, Sometimes we need to gen...


How to Change the Order of the Filament Left Navigation Menu Items

In this lesson, we will see how to change the order of the filament left navigation menu items.Somet...


How to Hide the Info Widget on the Filament Dashboard

In this lesson, we will see how to hide the info widget on the Filament dashboard. The info widget i...


How to Add Bootstrap 5 to Laravel 12 with Vite

In this tutorial, we will see how to add Bootstrap 5 to Laravel 12 with Vite, The process is simple...


How to Add Middleware in Laravel 12

In this tutorial, we will see how to add middleware in Laravel 12, Now we can use bootstrap/app.php...


How to Add React js to Laravel 12 with Vite

In this tutorial, we will see how to add React JS to Laravel 12 with Vite. Since version 9.19, Larav...


How to Add Vue js 3 to Laravel 12 with Vite

This tutorial will show us how to add Vue js 3 to Laravel 12 with Vite. Since version 9.19, Laravel...


How to Show the Old Values in Multiple Select Options in Laravel

In this lesson, we will see how to show the old values in multiple select options when editing in La...


How to Get the Old Value of the Select in Laravel

In this lesson, we will see how to get the old value of the select when editing in Laravel, this app...