- CLAUDE.md devient un index concis : contexte, stack, regles absolues numerotees, pointeurs vers les fichiers de regles detaillees via references @.claude/rules/*.md - Les conventions detaillees (architecture, backend, frontend, testing, naming, git, workflow) sont extraites dans .claude/rules/ pour rester chargees a la demande sans gonfler le context du CLAUDE.md principal - Ajoute la regle absolue "Ne jamais mentionner Claude/IA dans commits ou PR" (point 10) pour garder l'historique git signe par l'utilisateur
3.1 KiB
3.1 KiB
Frontend — Regles Nuxt 4 / Vue 3 / @malio/layer-ui
Base
- TypeScript strict
- 4 espaces d'indentation
- Commentaires (JSDoc, inline, bloc) en francais ; code (variables, types) en anglais
- Chaque module front = un layer Nuxt auto-detecte (
frontend/modules/*/nuxt.config.tsminimal)
Appels API
- Toujours
useApi()— jamais$fetch,ofetch,axiosen direct useApi()gere : cookies JWT, erreurs, toasts i18n, parsing Hydra
Stores (Pinia)
useAuthStorepour l'authentificationuseUiStorepour l'etat UI global (sidebar, modales, etc.)- Composables avec state singleton (refs module-level) : exposer une fonction
reset*()et la rappeler au logout (ex:useSidebar().resetSidebar())
Middlewares globaux
auth.global.tsprotege les routes + charge la sidebar apres loginmodules.global.tsredirige si la route demandee est dansdisabledRoutes
i18n et sidebar
- Labels de sidebar = cles i18n
sidebar.<module>.*, jamais du texte brut - Le layout
default.vueappliquet()sur les labels retournes par/api/sidebar - Traductions dans
frontend/i18n/locales/
Composants formulaires — @malio/layer-ui obligatoire
Tout champ de formulaire / filtre doit utiliser les composants Malio* plutot que <input> / <select> bruts :
MalioInputText,MalioInputNumber,MalioInputAmount,MalioInputPassword,MalioInputTextAreaMalioSelect,MalioSelectCheckbox,MalioCheckbox,MalioRadioButtonMalioInputUpload,MalioTimeMalioButton,MalioButtonIcon
Exceptions autorisees (commenter un // TODO pour migrer quand la lib couvrira le cas) :
- Type non couvert :
datetime-local,date, color picker, file drag & drop - Bug connu bloquant (ex:
MalioSelectavec options string) — documenter le bug en commentaire
Toute autre exception requiert validation avant merge.
Tableaux de donnees — MalioDataTable obligatoire
Tout affichage LISTE tabulaire (donnees metier paginees, CRUD admin) doit passer par MalioDataTable :
- Pagination integree
- Slots
#header-*pour filtres,#cell-*pour rendu custom - Pas de
<table>brut avec pagination custom
Exception : tableaux purement presentationnels non paginables (diff field/old/new, grille de comparaison, matrice RBAC d'admin, etc.) peuvent rester en <table> HTML brut.
Etat des tableaux — pas de persistance URL
Interdit de persister l'etat d'un tableau (filtres, pagination, tri par colonne, selection, ligne active, scroll) dans la query string ou de le reinjecter depuis route.query au montage.
- L'etat vit uniquement dans le composant (
reactive,reflocales) - Seuls les deep links "de navigation metier" (ex: ouvrir un detail precis
/users/42) sont dans l'URL - Exceptions autorisees sur demande explicite de l'utilisateur
Interdits
modules-loader.ts,.module.ts— le scan des layers est automatique- Hardcode de la sidebar cote front — elle vient de
/api/sidebar - Edition manuelle de
extendsdansfrontend/nuxt.config.ts— les layers sont scannes - Import d'un module front depuis un autre module — passer par
frontend/shared/