Previous
Sign Up to Track Progress
Next

Default Layouts & Overwriting the Default Layout

In this lesson, we'll inspect how Inertia injects our layout component and the data passed to it. We'll also learn how we can overwrite our default layout from our page components.

Tom Gobich
Author
Tom Gobich
Published
Aug 30, 24
Duration
6m 0s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Visit Website

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

⏳ Chapters

00:00 - Inspecting Our Layout's Prop Data
00:36 - Checking If Layout Is Already Set
02:24 - Creating Our AppLayout
02:46 - Using AppLayout As Our Default Layout
03:25 - Using A Different Layout from the Default

Join The Discussion! (4 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. vladimir-laskin
    Adocasts Plus Subscriber
    Commented 20 days ago

    Hey Tom,

    I was following along and got really stuck on this specific section, due to it being in React vs Vue:

    For anyone who gets stuck adding different layouts from the default, you won't be able to follow it step by step using React. Instead, do this:

    (PART 1)
    export default function Login() { /* The Login page*/}
    Login.layout = (page: ReactElement) => <AuthLayout children={page} />

    Source: https://inertiajs.com/pages

    1

    Please sign in or sign up for free to reply

    1. vladimir-laskin
      Adocasts Plus Subscriber
      Commented 20 days ago

      (PART 2)

      In your SSR/APP config, you would need to do something along the following:

          resolve: (name) => {

            const pages = import.meta.glob('../pages/**/*.tsx', { eager: true })

            const resolvedPage = pages[`../pages/${name}.tsx`] as {

              default: ComponentType & { layout?: (page: ReactElement) => ReactElement }

            }

            if (!resolvedPage.default.layout) {

              resolvedPage.default.layout = (page) => <AppLayout>{page}</AppLayout>

            }

            return resolvedPage

          },

      1

      Please sign in or sign up for free to reply

      1. vladimir-laskin
        Adocasts Plus Subscriber
        Commented 20 days ago

        (PART 3)

        What the code above basically tells Inertia is this:

        1 - Get the whole page itself
        2 - Check if it is missing a layout.
        3 - If it's missing a layout, wrap it around <AppLayout>, and go to step 4. (Skip if it's not missing a layout)
        4 - Return the page for rendering

        It keeps all the benefits of not GETing the resources all over again, and is very intuitive since you could add nest your layouts further like so:

        https://inertiajs.com/pages#persistent-layouts (2nd example)

        1

        Please sign in or sign up for free to reply

        1. tomgobich
          Adocasts Plus Subscriber
          Commented 14 days ago

          Thanks so much for sharing, Vladimir!!

          1

          Please sign in or sign up for free to reply