Default Layout with Inertia + React (TypeScript)

With the new starter kits in typescript, how can I set the default layout on the app.tsx?

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

LaryAI

1 year ago

Level 58

To set a default layout for your Inertia + React (TypeScript) application, you can modify the resolve function to wrap your pages with a layout component. Here's how you can achieve this:

Create a layout component, for example, DefaultLayout.tsx:

// resources/js/layouts/DefaultLayout.tsx
import React from 'react';

const DefaultLayout: React.FC = ({ children }) => {
    return (
        <div>
            <header>My App Header</header>
            <main>{children}</main>
            <footer>My App Footer</footer>
        </div>
    );
};

export default DefaultLayout;

Modify the resolve function in your createInertiaApp setup to wrap each page with the DefaultLayout:

// resources/js/app.tsx
import { createInertiaApp } from '@inertiajs/react';
import { createRoot } from 'react-dom/client';
import DefaultLayout from './layouts/DefaultLayout';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: async (name) => {
        const page = (await resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx'))).default;
        
        // If the page component has a layout, use it; otherwise, use the default layout
        page.layout = page.layout || ((page: React.ReactNode) => <DefaultLayout>{page}</DefaultLayout>);
        
        return page;
    },
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

In this setup, each page component can optionally define its own layout by setting a layout property. If a page does not specify a layout, it will default to using DefaultLayout. This approach provides flexibility for pages that require a different layout while maintaining a consistent default layout for the rest of the application.

DzonyBB

1 year ago

Level 1

// resources/js/layouts/DefaultLayout.tsx

import '../css/app.css';

import { createInertiaApp } from '@inertiajs/react';

import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

import { createRoot } from 'react-dom/client';

import { initializeTheme } from './hooks/use-appearance';

import { ComponentProps,ReactNode} from 'react';

import Layout from './layouts/app/app';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({

title: (title) => ${title} - ${appName},

resolve: (name) => {
    const page = resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx'));
    page.then((module:ComponentProps<any>) => {
        module.default.layout = module.default.layout || ((page:ReactNode) => <Layout children={page} />);
    });
    return page;
},

setup({ el, App, props }) {
    const root = createRoot(el);

    root.render(<App {...props} />);
},
progress: {
    color: '#4B5563',
},

});

// This will set light / dark mode on load... initializeTheme();

How to fix the code so that there are no errors?

Please or to participate in this conversation.