Creating A Layout

In this lesson, we'll learn how to create a layout component and apply it to all our pages, the Inertia way.

Published
Aug 30, 24
Duration
6m 55s

Developer & dog lover. I teach AdonisJS, a full-featured Node.js framework, at Adocasts where I publish weekly lessons. Professionally, I work with JavaScript, .NET, and SQL Server.

Adocasts

Burlington, KY

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

⏳ Chapters

00:00 - Creating Our Layout
03:06 - Using Our Layout
06:10 - Inspecting Our Layout

Join The Discussion! (2 Comments)

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

  1. Commented 15 days ago

    If we do something like this in react
    ```
    resolve: async (name) => {

    const page = await resolvePageComponent(`../pages/${name}.tsx`, import.meta.glob('../pages/**/*.tsx'))

    page.default.layout = page.default.layout || (page => <MainLayout>{page}</MainLayout>)

    return page

    }
    ```
    We get typescript errors that page is of type unknown, what would be the proper typing for page?

    1

    Please sign in or sign up for free to reply

    1. Commented 14 days ago

      Hi cubicalprayer712!

      Vladimir kindly left steps on getting this setup in React in the next lesson's comments if you'd like more details, but something like the below should satisfy the needed typing.

      const page = await resolvePageComponent(
        `../pages/${name}.tsx`,
        import.meta.glob('../pages/**/*.tsx'),
      ) as {
        default: ComponentType & { layout?: (page: ReactElement) => ReactElement }
      }
      
      page.default.layout = page.default.layout
      Copied!
      0

      Please sign in or sign up for free to reply

Playing Next Lesson In
seconds