@nano_kit/svelte-router

The @nano_kit/svelte-router package provides Svelte integration for @nano_kit/router. It allows you to use the router's powerful features like code splitting, dependency injection, and state management directly within your Svelte application.

Installation

pnpm add @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router svelte
# or
npm install @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router svelte
# or
yarn add @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router svelte

Quick Start

Basically, @nano_kit/svelte-router re-exports everything from @nano_kit/router, so you can use all base router functions:

import { browserNavigation, getPageSignal, layout, loadable, page, router } from '@nano_kit/svelte-router'
import MainLayout from './MainLayout.svelte'
import Loader from './Loader.svelte'

/* Define routes config */
const routes = {
  home: '/',
  user: '/users/:id'
} as const

/* Create navigation */
const [$location, navigation] = browserNavigation(routes)

/* Create page signal */
const $page = router($location, [
  layout(MainLayout, [
    page('home', loadable(() => import('./Home.svelte'), Loader)),
    page('user', loadable(() => import('./User.svelte'), Loader))
  ])
])

export const Page = getPageSignal($page)

<!-- App.svelte -->
<script lang="ts">
  import '@nano_kit/svelte'
  import { Page } from './router.js'
</script>

{#if $Page}
  {@const CurrentPage = $Page}
  <CurrentPage />
{/if}

In MainLayout, use Outlet to render the matched child page:

<!-- MainLayout.svelte -->
<script lang="ts">
  import { Outlet } from '@nano_kit/svelte-router'
</script>

<main>
  <Outlet />
</main>

Documentation

For comprehensive guides, API reference, and integration patterns, visit the documentation website.