skip to Main Content

I recently started going through inertia.js docs, and tried to replicate pages with a default layout: https://inertiajs.com/pages

My app.js (followed by the docs) looks like:

import "./bootstrap";
import "../css/app.css";

import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import Layout from "./Layout";
const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
        const page = resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        );

        page.then((module) => {
            module.default.layout = module.default.layout || Layout;
        });

        return page;
    },
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

The layout file (from the docs)

import React, { useEffect } from "react";
import { Link } from "@inertiajs/inertia-react";

export default function Layout({ children }) {
    return (
        <main>
            <header>
                <Link href="/">Home</Link>
                <Link href="/about">About</Link>
                <Link href="/contact">Contact</Link>
            </header>
            <article>{children}</article>
        </main>
    );
}

I get no errors whatsoever, when I try to access a page, I see the layout correctly, but the actual children page is blank. Any hints?

The page:

import React from "react";

const Simple = ({ user }) => {
    return (
        <>
            <div>
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                Lorem Ipsum.
            </div>
        </>
    );
};

export default Simple;

The result I get:
page preview

2

Answers


  1. At the top of the Page component you need to import the Layout.

    import Layout from "./Layout";
    
    Login or Signup to reply.
  2. This is my first post so bare with me, I hope this helps.
    This worked for me:

    function setupPageLayout(module) {
        if (!module.default.layout) {
          module.default.layout = (p) => <Layout children={p}></Layout>
        }
    }
    
    
    createInertiaApp({
        resolve: (name) => {
            const page = resolvePageComponent(name, import.meta.glob('./src/pages/**/*.jsx'))
            page.then((module) => setupPageLayout(module))
            return page
        },
        setup({ el, App, props }) { ... },
    })
    

    As you can see, you need to pass the page as the children prop to the layout itself via an arrow function.
    This is a direct reference to:
    https://inertiajs.com/pages#persistent-layouts

    For this particular example just swap out your Layout and you are good to go.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search