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.
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.
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
/dashboardroute is accessible,
dashboardroute will be loaded with
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.
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
- Example: If it's wanna reset
(app) - group layoutjust do
+page@(app).svelteand if wanna change root layout just do
// 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.