Embedding

Pages declared in the Vite plugin's pages option mount their apps automatically. To add an app to an existing JavaScript application instead, import it and mount it manually.

Add the plugin#

$ pnpm add cursery

vite.config.js

import cursery from "cursery/vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [cursery()],
});

For TypeScript, add cursery/vite-plugin/client to compilerOptions.types.

Mount the app#

app/default.nix

let
  inherit (import <web/dom>) html;
in
{
  render = state: html.p "Hello from Nix";
}

Import the app's directory with ?cursery:app, and mount it into an element:

main.js

import app from "./app?cursery:app";

// Edits to the app's files hot reload it, keeping its state.
const unmount = app.mount(document.getElementById("app"));

To exchange data with the host, see Host IO.