2

I want to have a default layout with a navbar that should be applied to all pages except certain "account" pages (e.g., Sign In, Sign Out, Register).

Here's what I've done so far:

  1. I created two groups (account) and (main) to separate the layout behaviors.
  2. I added the layout and the page file directly into the (main) group so that the main index page (/) will use the layout and pages within this group.

However, I'm facing a challenge with applying this default layout to error pages.

The Problem:

If I create a +error.svelte document in the root directory, it doesn't use the layout in the (main) group. On the other hand, if I place +error.svelte within the (main) group, even errors on the main pages don't get the layout because the error seems to propagate to the parent folder structure(?).

What I'm Looking For:

How can I configure SvelteKit so that all error pages, regardless of the group they originate from, use the default layout from the (main) group? (Even errors from the account group have the default layout)

Current Folder Structure:

src/
├── routes/
│   ├── (account)/
│   │   ├── account/
│   │   │   └── +page.svelte
│   │   └── +layout.svelte
│   ├── (main)/
│   │   ├── __layout.svelte (Main layout with navbar)
│   │   ├── index.svelte (Main index page)
│   │   └── ... (Other pages that use the main layout)

Expected Folder Structure:

src/
├── routes/
│   ├── (account)/
│   │   └── ... (like above)
│   ├── (main)/
│   │   ├── +layout.svelte (Main layout with navbar)
│   │   ├── +page.svelte
│   │   └── ... (Other pages that use the main layout)
│   └── +error.svelte (Expected to have the layout from the (main) group but doesn't)
Improve this question

3 Answers 3

Reset to default
1

I think you should create +error.svelte in 2 different groups that you have such as (account) and (main).

By that way, the error page will take the same level layout to render.

ie:

src/routes/(main)
src/routes/(main)/+layout.svelte
src/routes/(main)/+error.svelte

src/routes/(account)
src/routes/(account)/+layout.svelte
src/routes/(account)/+error.svelte

If you place +error.svelte at the root level, it will take the root +layout.svelte automatically.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I think you need to create a Navbar, Header, Footer component and import to your +error.svelte if you want error page have these components. +layout.svelte is only for +page.layout. My simple folder structure is like this: Sveltekit simple folder structure

Improve this answer

Comments

0

Following your expected folder structure, one option is to do the following

Create a component defining the layout with necessary named slots, call it, say src/component/main_layout.svelte. It's content should be fairly similarly to the current src/routes/main/+layout.svelte file.

Rewrite src/routes/main/+layout.svelte using the component

Use the same component in src/routes/+error.svelte file as your skeleton and personalize for each error type by using the named slots.

Since both files are reusing the same component, any update in the src/component/main_layout.svelte file should reflected in src/routes/main/+layout.svelte, and src/routes/+error.svelte.

Kindly ensure no other +error.svelte file inside any nested folders as sveltekit will look for the closest error boundary, i.e.tracing its way up the folder tree and use the first +error.svelte file it encounters.

May not be the best solution, but it should do the trick.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.