Add an Error Page and Layouts to SvelteKit Routes

InstructorBen Patton

Share this video with your friends

Send Tweet

SvelteKit gives us unique files for adding layouts. Using the +layout.svelte file name, we can set layouts for all levels of routes. We can also set +error.svelte in each route so that we can handle any errors for these routes.

We'll do that in this lesson by adding a <h1>Header</h1> and <h4>Footer</h4> that wraps a <slot /> to see it rendered on different pages. Notice that we will need to utilize <slot /> to render the routes content onto the page as well. This gives us finegrain control of where content goes in our layout.