Add Fougere to an existing Nuxt app
Fougere adds its model layer to the existing app. Routing, pages, components, styling,
and server routes remain in place. The module only registers its own paths:
/_fougere/call (the envelope), /api/{frond}/…
(REST surface) and /auth/** if you enable auth.
The three pieces
1. The module — in your existing nuxt.config.ts:
export default defineNuxtConfig({
modules: [/* your modules */, '@fougere/nuxt'],
});
2. The config — fougere.config.ts at the root
(full reference):
import { defineFougere } from '@fougere/core';
export default defineFougere({
db: { dialect: 'sqlite', path: '.data/app.db' },
});
3. A first Frond — one entity and one handler, at the root of the app you already have:
entities/Todo.ts
handlers/TodoHandler.ts
The scanner recognizes these two files through the convention used at the project root
(the flat shape). A page writes
import Todo from '@frond/<your-package-name>/entities/Todo' — the module registers that
alias from the scan, so there is no package.json and no pnpm-workspace.yaml entry to
add. A second domain later goes to fronds/billing/, and these two files stay where they
are.
Run pnpm dev and check the log: scanned 1 frond(s).
Migrate feature by feature
Take one feature at a time; the old routes keep serving the rest. The following elements have a Fougere equivalent:
| You maintain today | It becomes |
|---|---|
| a Zod/Yup schema | the entity's fields — shape axis |
| a table definition or additive migration | derived — additive auto-DDL from the same fields; destructive changes stay explicit |
server/api/todos.post.ts + validation call | a handler operation, validated at the façade |
| form state + client-side rules | useFormFor(Todo) — same validation as the server |
useFetch('/api/todos') + refresh bookkeeping | useQuery(Todo, 'list') — revalidated by commands |
Delete the originals as each feature lands — the point is fewer files to keep in sync, not a parallel copy.
What stays yours
- Pages and components — the primitives are additive; no layout, no widgets.
- Other server routes — anything outside the claimed paths is untouched.
- Auth — optional. Keep your own system if you have one;
useCurrentUserand the session-to-handler flow need Fougere auth to be enabled.
Current limits
- The packages are on npm under the
alphatag — the version is the whole promise. - Storage is SQLite auto-DDL (Kysely underneath). An entity's table is owned by Fougere — bring a feature in when you can hand its storage over, keep your existing database access for the rest.
Next: The CLI — composing a workspace, hosting one Frond, calling an operation.
Another host?
This page is about Nuxt because its module does the mounting for you. The same Frond runs under Next, TanStack Start, React Router, SvelteKit and Express — three of them need no Fougere package at all. See Hosts.