Sveltekit Changes: Advanced Layouts

Introduction

In last part I added my project's tree:

src/routes/
├── (authed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   └── dashboard
│       ├── +page.svelte
│       └── +page.ts
├── (unauthed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── +page.ts
│   ├── createAdmin
│   │   ├── +page.server.ts
│   │   └── +page.svelte
│   └── login
│       ├── +page.server.ts
│       └── +page.svelte
└── api

Here you can see I named some directories in parentheses. Few days ago, kit made some changes to layouts too. Made them more advanced and re-useable. I'm gonna focus more on grouped layouts because these are more useful in big projects.

Project Introduction for Example Use

Here we going with our project tree. I have a project which need two different navbars. One is neede when user is not authenticated and other is for when user is authenticated. So some of my routes are accessible without loggedIn those are [login, createAdmin, Home]. Routes for loggedIn user is [Dashboard]. Now I'll explain all about group layout to understand my project.

Grouped Layouts

In my projects I need different Navbar for Authorized and Unauthorized users. For this kind of things we need different layout for Authorized and Unauthorized where grouped layouts comes to play. They made it easy to identify which route is authorized and which is not. Second now i can have a different layout for both type of groups.

• When user comes to / route it goes to (unauthed) group and loads with it's layout.
• When user is loggedIn and /dashboard route is accessible, dashboard route will be loaded with (authed) group's layout.

As you can see now my routes are managed as well as I'm able to use different navbar on the basis of user authorization. And one much important thing group names doesn’t effect your public routes. Yup that's cooler than my project 🥲.

Let's talk about some more magical things that sveltekit did with layouts.

+page@

Above you learned about grouped layouts but sometimes we need to break from those groups or route's parent layout. Where +page@ comes to play. First look at this project tree:

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

Here our route is using three layouts [(app) - group, item - route, [id] - dynamic route]. If embed route wanna reset any one of layouts just append name of layout after +page@.

• Example: If it's wanna reset (app) - group layout just do +page@(app).svelte and if wanna change root layout just do +page@.svelte.

// app grp reset

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page@(app).svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

// Root layout reset

 (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page@.svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

This will help you to reset your layout for specific route anywhere in project. If you wanna reset child routes layout you can use similar techniques on +layout@ and handle as +page@. For more information read Advanced Layouts on Sveltekit Docs

This is me writing for you. If you wanna ask or suggest anything please put it in comment.