Nested routes

Sometimes we need to reuse routes, for that we have routes combined with outlet component.

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';
import { Routes, router } from 'vistajs/router'

const Form = Component('app-form', () => {
  return () => html`<n-outlet />`;
});

const PersonalData = Component('app-personal-data-step', () => {
  return  () => html`
    <div>
       <div>
          <label for="firstname">Firstname</label>
          <input id="firstname">
        </div>
        <div>
          <label for="surname">Surname</label>
          <input id="surname">
        </div>
        <button>next</button>
    </div>`;
});


const CreatePassword = Component('app-create-password-step', () => {
  return  () => html`
    <div>
       <div>
          <label for="password">Password</label>
          <input id="password" type="password">
        </div>
        <div>
          <label for="confirm_password">Confirm password</label>
          <input id="confirm_password">
        </div>
        <button>create account</button>
    </div>`;
});


const routes: Routes = [
  {
    path: 'create-account',
    component: () => Form,
    children: [
      {
        path: 'personal-data-step',
        component: () => PersonalData
      },
      {
        path: 'personal-data-step',
        component: () => CreatePassword
      },
    ]
  },
];

const root = document.querySelector('#root') as Element;

bootstrap(document.body, root, { routes })

result