@nanoviews/router

Nanoviews integration for @nano_kit/router: pages, nested layouts, code splitting, links and head management, with or without dependency injection.

• Small. Around 1.3 kB (minified and brotlied) on top of the router, and only what you import of it.
• Direct DOM. A layout is built once and the matched page is swapped inside it.
• Type-safe. Route names and params are checked in links and path builders.

Installation

pnpm add nanoviews @nano_kit/store @nano_kit/router @nanoviews/router
# or
npm i nanoviews @nano_kit/store @nano_kit/router @nanoviews/router
# or
yarn add nanoviews @nano_kit/store @nano_kit/router @nanoviews/router

Quick Start

@nanoviews/router re-exports everything from @nano_kit/router, so the whole router is imported from it. Here is an app with two pages in a layout, each page in a chunk of its own:

import { mount, main, nav, component$ } from 'nanoviews'
import { browserNavigation, buildPaths, linkComponent, router, pageView, page, layout, loadable, Outlet } from '@nanoviews/router'

const routes = {
  home: '/',
  user: '/users/:id'
} as const
const [$location, navigation] = browserNavigation(routes)
const Link = linkComponent(navigation, buildPaths(routes))

const MainLayout = component$(() => (
  main()(
    nav()(
      Link({
        to: 'home'
      })(
        'Home'
      ),
      Link({
        to: 'user',
        params: {
          id: 1
        }
      })(
        'User'
      )
    ),
    Outlet()
  )
))

const $page = router($location, [
  layout(MainLayout, [
    page('home', loadable(() => import('./pages/Home.js'))),
    page('user', loadable(() => import('./pages/User.js')))
  ])
])

mount(() => pageView($page), document.querySelector('#app')!)

A page module exports its page as default:

// pages/Home.ts
import { h1, component$ } from 'nanoviews'

export default component$(() => (
  h1()(
    'Home'
  )
))

Documentation

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