Ajouter Fougere à une app Nuxt existante

Fougere ajoute sa couche modèle à l'app existante. Le routing, les pages, les composants, le style et les routes serveur restent en place. Le module enregistre uniquement ses propres chemins : /_fougere/call (l'enveloppe), /api/{frond}/… (surface REST) et /auth/** si vous activez l'auth.

Les trois pièces

1. Le module — dans votre nuxt.config.ts existant :

export default defineNuxtConfig({
  modules: [/* vos modules */, '@fougere/nuxt'],
});

2. La configfougere.config.ts à la racine (référence complète) :

import { defineFougere } from '@fougere/core';

export default defineFougere({
  db: { dialect: 'sqlite', path: '.data/app.db' },
});

3. Une première Frond — une entité et un handler, à la racine de l'app que vous avez déjà :

entities/Todo.ts
handlers/TodoHandler.ts

Le scanner reconnaît ces deux fichiers grâce à la convention utilisée à la racine du projet (la forme à plat). Une page écrit import Todo from '@frond/<nom-de-votre-paquet>/entities/Todo' — le module enregistre cet alias depuis le scan, donc il n'y a ni package.json ni entrée pnpm-workspace.yaml à ajouter. Un deuxième domaine ira plus tard dans fronds/billing/, et ces deux fichiers ne bougent pas.

Lancez pnpm dev et vérifiez le log : scanned 1 frond(s).

Migrer feature par feature

Prenez une fonctionnalité à la fois ; les anciennes routes continuent de servir le reste. Les éléments suivants ont un équivalent Fougere :

Ce que vous maintenez aujourd'huiCe que ça devient
un schéma Zod/Yuples champs de l'entité — axe shape
une définition de table ou une migration additivedérivée — auto-DDL additif depuis les mêmes champs ; les changements destructifs restent explicites
server/api/todos.post.ts + appel de validationune opération de handler, validée à la façade
l'état du formulaire + règles côté clientuseFormFor(Todo) — même validation que le serveur
useFetch('/api/todos') + comptabilité de refreshuseQuery(Todo, 'list') — revalidée par les commands

Supprimez les originaux à chaque feature migrée — le but est d'avoir moins de fichiers à synchroniser, pas une copie parallèle.

Ce qui reste à vous

  • Pages et composants — les primitives sont additives ; pas de layout, pas de widgets.
  • Les autres routes serveur — tout ce qui est hors des chemins revendiqués est intact.
  • L'auth — optionnelle. Gardez votre système si vous en avez un ; useCurrentUser et le flux session→handler demandent l'auth Fougere activée.

Limites actuelles

  • Les paquets sont sur npm sous le tag alpha — le numéro de version est toute la promesse.
  • Le storage est SQLite auto-DDL (Kysely dessous). La table d'une entité appartient à Fougere — migrez une feature quand vous pouvez lui confier son storage, gardez votre accès base existant pour le reste.

Suite : La CLI — composer un workspace, héberger une Frond, appeler une opération.

Un autre hôte ?

Cette page parle de Nuxt parce que son module fait le montage à votre place. La même Frond tourne sous Next, TanStack Start, React Router, SvelteKit et Express — trois d'entre eux n'ont besoin d'aucun paquet Fougere. Voir Hôtes.

Construit avec Fougere — ce site tourne sur le framework qu'il documente.