Anatomy

A frontend module adds Vue components, pages or server routes to a DMS dashboard. Keep its source in your backend module, usually in frontend-vue/; do not edit the generated workspace under ~/.antelopejs/dms-frontend/, because the CLI replaces those copies.

Start with an existing backend module in a running DMS project. Register its frontend directory as shown below, then add only the entry you need. For a small end-to-end example with a response you can check using curl, follow Return your first response.

The backend side registers the module and the renderer it targets:

await AddFrontendModule({
  name: "@acme/dms-billing-frontend-vue",
  sourcePath: path.join(__dirname, "../frontend-vue"),
  renderer: { name: "vue", version: "3" },
});

The registration also carries what the frontend server needs to know about the backend: publicEndpoints, backendProxies and authEstablishEndpoints, covered in Deployment. The Distributable module page of the DMS guide covers the backend half.

Layers

A module keeps its application code, translations, public files and app config either at its root or in layers, one directory each under layers/<name>/. Every layer answers to the #<name> alias inside the workspace, which is how the DMS core module exposes #dms-core and #dms-ui. Where two layers of a module hold the same file, the last one by name wins.

The entry: dms.frontend.ts

A module opts into the Vue renderer with a root dms.frontend.ts whose default export receives the SDK. It imports the SDK's types from the #dms/frontend-module alias, which the loader resolves to the generated frontend-module.ts.

import MyBlock from "./components/MyBlock.vue";
import ReportsPage from "./pages/ReportsPage.vue";
import type { DmsFrontendModule } from "#dms/frontend-module";

const frontendModule: DmsFrontendModule = {
  setup(sdk) {
    sdk.registerComponent("MyBlock", MyBlock);
    sdk.registerPage("reports", ReportsPage);
  },
};

export default frontendModule;

This example assumes components/MyBlock.vue and pages/ReportsPage.vue already exist. registerComponent makes a component available by name; it does not place it on a page. Likewise, registerPage("reports", ...) selects a renderer for a matching backend page; it does not create a /reports backend route or menu entry. Create the page in the DMS first, then visit it to see the registered renderer.

The SDK setup receives registers everything the module brings:

sdk.options holds the module's public options from the manifest. A component the page tree names but no module registers falls back to the generic card renderer.

Order and idempotency

Entries run by descending manifest priority, then by module id. Within one setup, the first module to register a name keeps it. A module without dms.frontend.ts is skipped by the generated loader.

Plugins registered with registerPlugin(setup, { enforce: "pre" }) run before the default plugins, regardless of their module's priority. Plugins with { enforce: "post" } run after them. Each group keeps the modules' priority order. Use pre for a plugin that establishes context, such as the async data scope, before other plugins read data.

ajs dms dev sets every module up again, into empty registries, each time a change to a layer reaches the server renderer. A setup can therefore run more than once in one process: it registers, and keeps no state of its own between runs.

Redirecting typed access refusals

A backend can refuse a whole surface with a typed 403 whose body is a machine-readable code, such as a tenant gate blocking a suspended workspace. A module that owns such a code registers where a refused page visit goes instead of the error page:

sdk.registerAccessRedirect(
  "saas.errors.workspace.access_blocked",
  "/workspace-suspended",
);

The server answers the refused visit, document or Inertia, with a redirect before anything renders, so a reload lands there directly. The body may be the bare code or JSON ("code" or { "message": "code" }). A destination refused in turn shows the error page instead of looping. The first registration of a code wins, in manifest-priority order.

The other entries