How do I create a view?

A view is a routed page — one per route, mounted and destroyed by the router.

Generate a view

npm run generate view views/foo # target directory: src/app/views/foo

Register children

See How do I register child components

// foo.view.ts
import { View, html } from '../../../core/index.js';

const template = html`<h1>Title</h1>`;

export class FooView extends View {
  constructor() {
    super({ template, viewName: 'foo' });
  }

  public registerChildren(): Nutin.ComponentConfig[] {
    return []; // mount child components the same way as any other component — see the Components docs
  }
}

export const appRoutes: Nutin.Routes = {
  '/foo': () => new FooView(),
};

View vs. Component

View is for full-page routes; Component is for reusable, non-routed UI.

The key differences:

• View takes a static template (html or a string) — no templateFn/config normalization layer.
• Defaults differ: tagName: 'section', mountTarget: '#app' (vs. Component's tagName: 'div').
• View tracks route params and adds router-only hooks onEnter()/onExit() — see How do I access route parameters? and What lifecycle hooks are available?.
• Views are constructed via a factory function referenced from the route table, not instantiated directly by application code the way components are. The factory may return a Promise, to load the view's code on first visit — see Lazy routes.

Nutin.ViewOptions

// Nutin.ViewOptions
interface ViewOptions {
  template?: Nutin.Template; // an html`` result or a string
  mountTarget?: string | HTMLElement; // default: '#app'
  tagName?: keyof HTMLElementTagNameMap; // default: 'section'
  viewName: string;
  trustLevel?: Nutin.TrustLevel; // 'strict' | 'normal' | 'trusted', default: 'normal'
}

viewName is required — it's the view's identity, and there's no auto-derived default.

On every route change, document.title is resolved in this order: the view's documentTitle() -> matching route's config/seo.json (with generateSEOFiles enabled - see How do I use SEO files generation?) -> the view's locale file's title key (with i18n enabled — see How do I use i18n?) -> the view's viewName itself.

viewName is emitted in the view-mount/view-unmount events fired by the router; see How do I listen to application events?.