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

1 year 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 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...


How to Show the Old Value of the Input Field When Editing in Laravel

in this lesson, we will see how to show the old value of the input field when editing in Laravel, th...


How to Prevent the Loop Incrementing Operator from Resetting Back to 1 in the Next Pagination Pages in Laravel

In this lesson, we will see how to prevent the loop incrementing operator from resetting back to 1 i...


How to Logout a User from the Other Devices in Laravel 11

In this lesson, we will see how to logout a user from the other devices in Laravel 11, sometimes you...


How to Logout a User from the Current Device in Laravel 11

In this lesson, we will see how to logout a user from the current device in Laravel 11, sometimes yo...


How to Import Multiple Classes from a Single Namespace in Laravel

In this lesson, we will see how to import multiple classes from a single namespace in Laravel by add...


Laravel 11 Livewire CRUD Application Tutorial Part 2

In the second part of this tutorial, we will display all the tasks on the home page and later we wil...


Laravel 11 Livewire CRUD Application Tutorial Part 1

This tutorial will show us how to create a Laravel 11 Livewire CRUD application. The user can c...


How to Conditionally Include a Blade Template in Laravel

In this lesson, we will see how to conditionally include a blade template in Laravel.Sometimes,...