Persistent Layouts in Inertiajs: How to create a persistent layout in Inertiajs?

Inertia.js is a progressive JavaScript framework for building modern web applications. It simplifies server-side rendering and client-side hydration for Laravel and other PHP frameworks. Inertia.js allows you to build Vue.js components that can be rendered on the server and hydrated on the client, making your application faster and more efficient.

To create a persistent layout in Inertia.js, you can use the inertia-layout package. This package provides a simple way to create a layout file that can be shared across multiple pages in your application. Here's a step-by-step guide on how to create a persistent layout in Inertia.js using inertia-layout.

Install the inertia-layout package:

First, you need to install the inertia-layout package in your project. You can install it via npm or yarn.

# Using npm
npm install inertia-layout

# Using yarn
yarn add inertia-layout

Create a layout file:

Create a new file called app.blade.php or any name you prefer in the resources/views/layouts directory. This file will serve as the persistent layout for your application.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title }} - My App</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <header>
        <!-- Your header content goes here -->
    </header>

    <main class="py-6">
        {{ $slot }}
    </main>

    <footer>
        <!-- Your footer content goes here -->
    </footer>

    <script src="/js/app.js"></script>
</body>
</html>

Use the layout in your pages:

To use the layout in your pages, you need to import the InertiaLayout component from the inertia-layout package and wrap your page component with it.

// Import the InertiaLayout component
import { InertiaLayout } from '@inertiajs/inertia-layout';
import Page from '../Components/Page';

export default function ({ component: PageComponent }) {
    return (
        <InertiaLayout title="My Page">
            <PageComponent />
        </InertiaLayout>
    );
}

Finally, you need to register the layout in your app.js file so that it can be used in your pages.

import Vue from 'vue';
import App from './App.vue';
import { createInertiaApp } from '@inertiajs/inertia-vue';
import { InertiaProgress } from '@inertiajs/progress';
import Layout from './Layouts/App';

Vue.component('inertia-layout', () => import('@inertiajs/inertia-layout'));

createInertiaApp({
    title: (title) => `${title} - My App`,
    resolveComponent: (name) => require(`./Components/${name}`).default,
    setup({ el, App, props }) {
        new Vue({
            render: (h) => h(App, props),
        }).$mount(el);
    },
    components: {
        App,
        InertiaLayout,
    },
}).provider(() => ({
    defaultLayout: Layout,
})).use(InertiaProgress, {
    color: '#3F80ED',
    show: true,
    type: 'bar',
});

Now, whenever you use the InertiaLayout component in your pages, it will use the layout file you created as the base layout for your application. Any content you add between the <main> tags in the layout file will be displayed in the main content area of your pages.

That's it! You have successfully created a persistent layout in Inertia.js using the inertia-layout package.