Question: How can I set up multiple layout logic.

[Sergeant61]

Hello, thank you for the package.
Is it possible to implement a multi-layout logic?
I tried to explain what I'm trying to do below.

• App.svelte (router config)
• PublicLayout.svlete (/)
  -- Home.svelte (/)
  -- About.svlete (/about)
• Admin.svelte (/admin)
  -- Dashboard.svelte (/)
  -- Users.svelte (/users)
• User.svelte (/user)
  -- Profile.svelte (/)

[dvcol]

Helo !

I'm not exactly sure what you're trying to do, could you give a little more detail ?

The package supports nested routes with multiple RouterView as well as child routes.

[Sergeant61]

Hello, sorry for the confusion earlier — I couldn’t fully express what I meant. I was previously using Tinro, but it's not fully compatible with Svelte 5. One of the things I liked about Tinro was the ability to define routers across multiple pages.

What I’m trying to achieve is rendering pages using a general wrapper layout with — so I can have shared layouts across routes.

For now, I'm using a community-updated version called tinro5, and here's how I implemented that idea with it:

App.svelte

<script lang="ts">
  import { Route } from 'tinro5'

  // Routers
  import PublicRouter from './public/PublicRouter.svelte'
  import AdminRouter from './admin/AdminRouter.svelte'
  import AuthRouter from './auth/AuthRouter.svelte'
</script>

<PublicRouter />

{/* @ts-ignore */ null}
<Route path="/admin/*">
  <AdminRouter />
</Route>

{/* @ts-ignore */ null}
<Route path="/auth/*">
  <AuthRouter />
</Route>

AuthRouter.svelte

<script lang="ts">
  import { Route } from 'tinro5'

  // Layouts
  import Default from './layout/Default.svelte'

  // Pages
  import Login from './pages/SignIn.svelte'
  import SignUp from './pages/SignUp.svelte'
  import ForgotPassword from './pages/ForgotPassword.svelte'
  import ResetPassword from './pages/ResetPassword.svelte'
  import VerifyEmail from './pages/VerifyEmail.svelte'
</script>

{/* @ts-ignore */ null}
<Route path="/sign-in">
  <Default>
    <Login />
  </Default>
</Route>

{/* @ts-ignore */ null}
<Route path="/sign-up">
  <Default>
    <SignUp />
  </Default>
</Route>

{/* @ts-ignore */ null}
<Route path="/forgot-password">
  <Default>
    <ForgotPassword />
  </Default>
</Route>

{/* @ts-ignore */ null}
<Route path="/reset-password">
  <Default>
    <ResetPassword />
  </Default>
</Route>

{/* @ts-ignore */ null}
<Route path="/verify-email">
  <Default>
    <VerifyEmail />
  </Default>
</Route>

PublicRouter.svelte

<script lang="ts">
  import { Route } from 'tinro5'

  // Layouts
  import Default from './layout/Default.svelte'

  // Pages
  import Home from './pages/Home.svelte'
  import About from './pages/About.svelte'
</script>

{/* @ts-ignore */ null}
<Route path="/">
  <Default>
    <Home />
  </Default>
</Route>

{/* @ts-ignore */ null}
<Route path="/about">
  <Default>
    <About />
  </Default>
</Route>

PublicDefaultLayout (Default).svelte

<script lang="ts">
  import Navbar from '../../common/components/Navbar.svelte'
  import Footer from '../../common/components/Footer.svelte'
  import type { Snippet } from 'svelte'

  interface Props {
    children: Snippet
  }

  let { children }: Props = $props()
</script>

<header class="grow-0">
  <Navbar />
</header>

<main class="grow flex flex-col">{@render children()}</main>

<footer class="grow-0">
  <Footer />
</footer>