--- phase: 01-foundation plan: 01 type: execute wave: 1 depends_on: [] files_modified: - nuxt.config.ts - package.json - pnpm-lock.yaml - tsconfig.json - app/app.vue - shared/types/index.ts - .gitignore autonomous: true requirements: - SSR-01 - SSR-02 - SSR-03 - INFRA-02 - INFRA-03 must_haves: truths: - "nuxt dev demarre sans erreur et sert localhost:3000" - "La structure app/ est utilisee (Nuxt 4 compatibilityVersion 4)" - "Tous les modules sont installes dans nuxt.config.ts" - "TypeScript strict mode est actif" - "ESLint via @nuxt/eslint fonctionne sans erreur" artifacts: - path: "nuxt.config.ts" provides: "Configuration principale Nuxt 4 avec tous les modules" contains: "compatibilityVersion: 4" - path: "app/app.vue" provides: "Composant racine Nuxt" - path: "shared/types/index.ts" provides: "Interfaces TypeScript resserrees" exports: ["Project", "ProjectButton", "Technology", "TechStack", "Testimonial", "FAQ"] - path: "package.json" provides: "Dependances Nuxt 4 + tous modules" key_links: - from: "nuxt.config.ts" to: "app/app.vue" via: "Nuxt srcDir convention" pattern: "compatibilityVersion.*4" --- Initialiser le projet Nuxt 4 avec pnpm, installer tous les modules, configurer TypeScript strict et ESLint, et definir les interfaces TypeScript resserrees. Purpose: Creer le squelette technique Nuxt 4 sur lequel toute la migration repose. Output: Projet Nuxt 4 fonctionnel avec `pnpm dev` qui demarre, tous modules configures, types definis. @C:/Users/minit/.claude/get-shit-done/workflows/execute-plan.md @C:/Users/minit/.claude/get-shit-done/templates/summary.md @.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/01-foundation/01-CONTEXT.md @.planning/phases/01-foundation/01-RESEARCH.md From src/types/index.ts: ```typescript export interface Project { id: string title: string image: string description: string longDescription?: string technologies?: string[] category?: string featured?: boolean buttons?: ProjectButton[] date?: string demoUrl?: string githubUrl?: string features?: string[] gallery?: string[] status?: string } export interface ProjectButton { title: string link: string } export interface Technology { name: string level: 'Beginner' | 'Intermediate' | 'Advanced' image: string } export interface TechStack { programming: Technology[] front: Technology[] database: Technology[] devtools: Technology[] operating_systems: Technology[] socials: Technology[] } ``` Task 1: Initialiser le projet Nuxt 4 avec pnpm et tous les modules nuxt.config.ts, package.json, pnpm-lock.yaml, app/app.vue, .gitignore, tsconfig.json - src/types/index.ts (types existants pour reference) - package.json (dependances actuelles Vue 3) - .gitignore (regles existantes) 1. Installer pnpm globalement si absent: `npm install -g pnpm` 2. Initialiser le projet Nuxt 4: `pnpm dlx nuxi@latest init . --force` (force car le dossier n'est pas vide). Si nuxi init ne supporte pas --force dans un repo existant, creer dans un sous-dossier temp et copier les fichiers generes. 3. Installer tous les modules (per D-08, D-09): ```bash pnpm add @nuxt/ui @nuxtjs/i18n @nuxt/eslint @nuxtjs/sitemap nuxt-gtag @nuxt/image ``` NOTE: Ne PAS installer @nuxtjs/color-mode — deja inclus dans @nuxt/ui. 4. Configurer nuxt.config.ts avec ce contenu exact: ```typescript export default defineNuxtConfig({ future: { compatibilityVersion: 4 }, ssr: true, modules: [ '@nuxt/ui', '@nuxtjs/i18n', '@nuxt/eslint', '@nuxtjs/sitemap', 'nuxt-gtag', '@nuxt/image' ], typescript: { strict: true }, i18n: { locales: ['fr', 'en'], defaultLocale: 'fr' }, gtag: { id: 'G-CDVVNFY6MV', enabled: false } }) ``` 5. Creer `app/app.vue` minimal: ```vue ``` 6. Creer `app/pages/index.vue` minimal pour que le serveur demarre sans erreur: ```vue ``` 7. Mettre a jour .gitignore pour inclure: `node_modules`, `.nuxt`, `.output`, `dist`, `.env` 8. Verifier que `pnpm dev` demarre sans erreur sur localhost:3000 cd C:/Users/minit/Desktop/portfolio/portfolio && pnpm dev --port 3000 & sleep 15 && curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 | grep -q "200" && echo "PASS" || echo "FAIL"; kill %1 2>/dev/null - nuxt.config.ts contains `compatibilityVersion: 4` - nuxt.config.ts contains `'@nuxt/ui'` in modules array - nuxt.config.ts contains `'@nuxtjs/i18n'` in modules array - nuxt.config.ts contains `'@nuxt/eslint'` in modules array - nuxt.config.ts contains `'@nuxtjs/sitemap'` in modules array - nuxt.config.ts contains `'nuxt-gtag'` in modules array - nuxt.config.ts contains `'@nuxt/image'` in modules array - nuxt.config.ts contains `strict: true` - package.json contains `@nuxt/ui` in dependencies - package.json contains `@nuxtjs/i18n` in dependencies - app/app.vue exists with NuxtPage component - pnpm dev starts and localhost:3000 returns HTTP 200 Projet Nuxt 4 demarre sur localhost:3000 avec tous les modules installes, TypeScript strict actif Task 2: Definir les interfaces TypeScript resserrees et configurer ESLint shared/types/index.ts - src/types/index.ts (types existants a resserrer per D-03) - src/data/testimonials.ts (interface Testimonial existante) - src/data/faq.ts (interface FAQ existante) - nuxt.config.ts (verifier @nuxt/eslint present) 1. Creer `shared/types/index.ts` avec les interfaces resserrees (per D-03 — rendre obligatoires technologies, category, date): ```typescript export interface ProjectButton { title: string link: string } export interface Project { id: string image: string // URL /images/xxx.webp technologies: string[] // OBLIGATOIRE (etait optionnel) category: string // OBLIGATOIRE (etait optionnel) date: string // OBLIGATOIRE (etait optionnel) featured?: boolean buttons?: ProjectButton[] gallery?: string[] demoUrl?: string githubUrl?: string features?: string[] // Pas de title/description/longDescription/status — i18n via cles } export interface Technology { name: string level: 'Beginner' | 'Intermediate' | 'Advanced' image: string } export interface TechStack { programming: Technology[] front: Technology[] database: Technology[] devtools: Technology[] operating_systems: Technology[] socials: Technology[] } export interface Testimonial { name: string role: string company: string avatar: string rating: number content: string date: string platform: string featured?: boolean project_type: string results?: string[] } export interface TestimonialsStats { totalReviews: number averageRating: number projectsCompleted: number } export interface FAQ { questionKey: string answerKey: string featuresKey: string } ``` Note: FAQ utilise des cles i18n (per D-02) au lieu de texte direct. L'ancienne interface avait `question: string` (texte), la nouvelle a `questionKey: string` (cle de traduction). 2. Verifier que `pnpm nuxi typecheck` passe (les types sont auto-importes depuis shared/ en Nuxt 4). 3. Verifier que `pnpm eslint .` passe sans erreur (ESLint configure via @nuxt/eslint dans les modules). cd C:/Users/minit/Desktop/portfolio/portfolio && npx nuxi typecheck 2>&1 | tail -5 - shared/types/index.ts contains `technologies: string[]` (not optional) - shared/types/index.ts contains `category: string` (not optional) - shared/types/index.ts contains `date: string` (not optional, in Project interface) - shared/types/index.ts contains `export interface Project` - shared/types/index.ts contains `export interface Technology` - shared/types/index.ts contains `export interface TechStack` - shared/types/index.ts contains `export interface Testimonial` - shared/types/index.ts contains `export interface FAQ` - shared/types/index.ts contains `questionKey: string` - npx nuxi typecheck exits with code 0 Toutes les interfaces TypeScript resserrees existent dans shared/types/index.ts, typecheck et eslint passent sans erreur ## Trust Boundaries | Boundary | Description | |----------|-------------| | Aucune | Phase 1 est une initialisation technique sans surface d'attaque | ## STRIDE Threat Register | Threat ID | Category | Component | Disposition | Mitigation Plan | |-----------|----------|-----------|-------------|-----------------| | T-01-01 | I (Information Disclosure) | nuxt.config.ts | mitigate | gtag.enabled: false — pas de tracking en dev | | T-01-02 | T (Tampering) | pnpm dependencies | accept | lockfile pnpm-lock.yaml tracke dans git | 1. `pnpm dev` demarre sans erreur sur localhost:3000 2. `npx nuxi typecheck` exit 0 3. `pnpm eslint .` exit 0 (si le script existe, sinon `npx eslint .`) 4. nuxt.config.ts contient les 6 modules et compatibilityVersion 4 5. shared/types/index.ts exporte Project, Technology, TechStack, Testimonial, FAQ - Le projet Nuxt 4 demarre localement - Tous les modules sont installes et declares - TypeScript strict mode actif - Interfaces resserrees per D-03 - ESLint fonctionne via @nuxt/eslint After completion, create `.planning/phases/01-foundation/01-01-SUMMARY.md`