Standalone Pages

Use this procedure to create a custom standalone page and register it in the navigation menu.

The development environment is set up and the development server is running. See Requirements and Installation.
  1. Create a new TypeScript file in the standalone pages directory.

    Create the file in the libs/default-components/src/lib/standalone-pages/ directory (for example, my-page.ts). Use the following code skeleton:

    import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('wui-my-page')
export class WuiMyPage extends LitElement {
  static override readonly styles = css`
    :host { display: block; }
    .page { padding: 0.5rem 0.75rem 1rem; max-width: 1440px; margin: 0 auto; }
  `;

  override render() {
    return html`
      <div class="page">
        <h1>My Page</h1>
        <p>Page content goes here.</p>
      </div>
    `;
  }
}

    Custom elements should have a prefix, for example wui- as used here (wui-my-page). The build system automatically discovers standalone pages in this directory.

  2. Register the page in the menu configuration.

    Add an entry to apps/dashboard-wc/config/menuconfig.jsonc:

    {
  "title": {
    "en_US.utf8": "My Page",
    "de_AT.utf8": "Meine Seite"
  },
  "icon": "rocket",
  "path": "/my-page",
  "module": "/data/dashboard-wc/pages/my-page.js",
  "routeId": "my-page",
  "component": "wui-my-page",
  "permission": ["connected"]
}

    The permission field controls visibility. Use connected for pages that require authentication. To make a page accessible without authentication, remove the permission property entirely.

  3. Build the project and verify the page.
    Run the build command and navigate to the page URL to verify. See Requirements and Installation for build instructions.
The new standalone page is available in the navigation menu and can be accessed at the configured path.