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.
Top comments (2)
Finally! Someone writing about this. Could you help me understand why I get a route conflict error with the structure I have
It says '/' and '/(account)' conflict
I found an example in detail on github. github.com/j4w8n/sveltekit-layouts