⏳ Chapters
- Creating Our Layout
- Using Our Layout
- Inspecting Our Layout
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.
- Author
- Tom Gobich
- 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
Transcript
Creating A Layout
-
Getting Started
-
1.0What Is InertiaJS?Lesson 1.01m 57s
-
1.1What We'll Be BuildingLesson 1.16m 18s
-
1.2Creating Our AdonisJS App With InertiaJSLesson 1.211m 26s
-
1.3Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)Lesson 1.36m 6s
-
1.4Setting Up TailwindCSS, Shadcn-Vue, and Automatic Component ImportsLesson 1.419m 9s
-
-
The Basics
-
2.0The Flow of Pages and Page PropsLesson 2.06m 55s
-
2.1Sharing Data from AdonisJS to Vue via InertiaLesson 2.17m 37s
-
2.2Linking Between Pages & Page State FlowLesson 2.25m 58s
-
2.3The Link Component and Programmatic LinkingLesson 2.38m 32s
-
2.4Global Components and Hydration Mismatch in ActionLesson 2.45m 0s
-
2.5Partial and Lazy Data Loading and EvaluationLesson 2.59m 11s
-
2.6Creating A LayoutLesson 2.66m 55s
-
2.7Default Layouts & Overwriting the Default LayoutLesson 2.76m 0s
-
2.8Specifying Page Titles & Meta TagsLesson 2.88m 59s
-
2.9What Code Can & Can't Be Shared Between AdonisJS & InertiaLesson 2.93m 10s
-
-
Working with Forms
-
3.0Inertia Form BasicsLesson 3.04m 15s
-
Form Validation & Displaying ErrorsLesson 3.16m 47s
-
The useForm HelperLesson 3.28m 0s
-
Common useForm Methods & OptionsLesson 3.34m 23s
-
Creating A FormInput Vue ComponentLesson 3.47m 9s
-
Cross-Site Request Forgery (CSRF) Protection in InertiaJSLesson 3.52m 55s
-
What Are Some of Inertia's LimitationsLesson 3.64m 26s
-
-
Database & Project Scaffolding
-
Understanding Our Database SchemaLesson 4.02m 18s
-
Defining Our Migrations & Foreign KeysLesson 4.113m 48s
-
Defining Our Lucid Models & RelationshipsLesson 4.219m 8s
-
Creating A Lucid Model Mixin for our Organization RelationshipLesson 4.38m 29s
-
Seeding Our Initial Database DataLesson 4.43m 39s
-
Typing Lucid Models in Inertia with DTOsLesson 4.510m 58s
-
Completing Our AppLayout & Navigation BarLesson 4.616m 31s
-
Creating A Toast Message ManagerLesson 4.715m 7s
-
-
Authentication & Onboarding
-
User Registration with InertiaJSLesson 5.08m 37s
-
Splitting Our Routes Between Auth & WebLesson 5.15m 5s
-
Logging Out UsersLesson 5.24m 20s
-
Onboarding Newly Registered UsersLesson 5.322m 31s
-
Logging In Users & Displaying ExceptionsLesson 5.410m 40s
-
Adding the Remember Me TokenLesson 5.55m 45s
-
Forgot Password & Password ResetLesson 5.629m 42s
-
-
The User's Organizations
-
Setting & Loading the User's Active OrganizationLesson 6.012m 42s
-
Listing the User's OrganizationsLesson 6.16m 42s
-
The Form Dialog Component & Adding OrganizationsLesson 6.211m 51s
-
Switching Between OrganizationsLesson 6.32m 56s
-
Creating A UseResourceActions ComposableLesson 6.48m 42s
-
Editing the Active OrganizationLesson 6.57m 0s
-
The Confirm Delete Dialog & Deleting the Active OrganizationLesson 6.618m 24s
-
-
Difficulties, Statuses, & Access Levels
-
Listing & Creating DifficultiesLesson 7.015m 14s
-
Updating DifficultiesLesson 7.14m 44s
-
Confirming & Deleting DifficultiesLesson 7.24m 15s
-
Replacing A Course's Deleted DifficultyLesson 7.316m 31s
-
Reusable VineJS Exists In Organization ValidationLesson 7.43m 38s
-
Sorting Difficulties with Drag & DropLesson 7.59m 21s
-
Creating A Reusable Sorting Vue ComponentLesson 7.64m 1s
-
Replicating Behaviors for Access Levels & StatusesLesson 7.714m 28s
-
-
Courses
-
Modules & Lessons
-
Querying & Listing Sortable Course ModulesLesson 9.014m 43s
-
Creating, Editing, & Deleting Course ModulesLesson 9.115m 57s
-
Creating & Listing Sortable Course LessonsLesson 9.219m 30s
-
Editing & Deleting Course LessonsLesson 9.35m 9s
-
Adding A Publish Date & Time InputLesson 9.48m 20s
-
Patching Tag Changes for our Modules & LessonsLesson 9.58m 42s
-
Storing Module Order Changes from Vue DraggableLesson 9.68m 31s
-
Storing Lesson Order Changes & Handling Cross-Module Drag & DropsLesson 9.715m 44s
-
-
Settings
-
Creating the Settings ShellLesson 10.08m 10s
-
User Profile SettingsLesson 10.16m 58s
-
Allowing Users to Safely Update Their Account EmailLesson 10.210m 39s
-
Alerting Users When Their Account Email Is ChangedLesson 10.34m 35s
-
Account Deletion & Cleaning Dangling OrganizationsLesson 10.410m 6s
-
Updating & Deleting an OrganizationLesson 10.510m 15s
-
-
Organization Members
-
Listing Current Organization MembersLesson 11.08m 25s
-
Sending an Invitation to Join Our OrganizationLesson 11.113m 30s
-
Accepting an Organization InvitationLesson 11.218m 4s
-
Adding the Organization Invite User InterfaceLesson 11.320m 0s
-
Canceling an Organization InviteLesson 11.46m 5s
-
Removing an Organization UserLesson 11.59m 37s
-
Refreshing Partial Page DataLesson 11.65m 17s
-
-
Authorization
-
Rolling Our Own Authorization Access ControlsLesson 12.06m 55s
-
Applying Our Server-Side Authorization ChecksLesson 12.113m 0s
-
Applying Our Authorization UI ChecksLesson 12.26m 23s
-
Setting Up Secondary TailwindCSS Config & CSS File for our Landing PageLesson 12.38m 43s
-
Restricting Login Attempts with Rate LimitingLesson 12.49m 24s
-
Clearing Login Attempt Rate Limits on Password ResetLesson 12.54m 31s
-
-
InertiaJS 2
-
Upgrading to Inertia 2Lesson 13.011m 53s
-
Polling for Changes in InertiaJS 2Lesson 13.14m 12s
-
Prefetching Page to Boost Load Times in InertiaJS 2Lesson 13.211m 26s
-
Defer Loading Props in InertiaJS 2Lesson 13.35m 55s
-
Deferring A Prop Load Until it is Visible in InertiaJS 2Lesson 13.44m 27s
-
Super Easy Infinite Scroll in InertiaJS 2 with Prop MergingLesson 13.511m 9s
-
Join The Discussion! (2 Comments)
Please sign in or sign up for free to join in on the dicussion.
cubicalprayer712
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?Please sign in or sign up for free to reply
tomgobich
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.
Please sign in or sign up for free to reply