Add Fougere to an app you already have
Fougere adds its model layer to the app you already run. 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 '@fronds/<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: Bring your schema — what a Prisma or Drizzle model becomes, and the part you are writing down for the first time.
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.