Nested Apps

Typically, H3 projects consist of several Event Handlers defined in one or multiple files (or even lazy loaded for faster startup times).

It is sometimes more convenient to combine multiple H3 instances or even use another HTTP framework used by a different team and mount it to the main app instance. H3 provides a native .mount method to facilitate this.

Nested H3 Apps

H3 natively allows mounting sub-apps. When mounted, sub-app routes and middleware are merged with the base url prefix into the main app instance.

import { H3, serve } from "h3";

const nestedApp = new H3()
  .use((event) => {
    event.res.headers.set("x-api", "1");
  })
  .get("/**:slug", (event) => ({
    pathname: event.url.pathname,
    slug: event.context.params?.slug,
  }));

const app = new H3().mount("/api", nestedApp);

In the example above, when fetching the /api/test URL, pathname will be /api/test (the real path), and slug will be /test (wildcard param).

Nested Web Standard Apps

Mount a .fetch compatible server instance like Hono or Elysia under the base URL.

import { H3 } from "h3";
import { Hono } from "hono";
import { Elysia } from "elysia";

const app = new H3()
  .mount(
    "/elysia",
    new Elysia().get("/test", () => "Hello Elysia!"),
  )
  .mount(
    "/hono",
    new Hono().get("/test", (c) => c.text("Hello Hono!")),
  );