Maîtriser Vue.js 3 & Nuxt 4 : Guide d'Architecture & Performance

Niveau : Intermédiaire / Avancé

Technologies : Vue.js 3, Nuxt 4, TypeScript, Pinia, Nitro

Introduction #

Avec la maturité de Vue.js 3 et l'arrivée de Nuxt 4, l'écosystème frontend offre désormais des performances remarquables et une ergonomie de développement incomparable. Cependant, le passage à la Composition API et aux applications à grande échelle soulève souvent des questions d'organisation de code :

• Comment découper ses composables sans tomber dans le code spaghetti ?


• Comment optimiser l'hydratation côté client pour un LCP (Largest Contentful Paint) ultra-rapide ?


• Comment partager proprement l'état avec Pinia et TypeScript ?

Sommaire #

1. La Règle d'Or des Composables
2. Structure de Dossiers Modulaire Nuxt 4
3. Exemple Pratique : Composable Typé
4. Optimisation du Rendu et SSR
5. Conclusion

La Règle d'Or des Composables #

Un composable Vue 3 doit respecter le principe de responsabilité unique. Il doit encapsuler une logique réactive réutilisable sans coupler directement le composant aux détails d'implémentation externe.

class=class="text-emerald-400">"text-slate-500 italic">// app/composables/useUserPreferences.ts
export interface UserPreferences {
  theme: 'light' | 'dark' | 'system'
  fontSize: 'sm' | 'md' | 'lg'
  reducedMotion: boolean
}

export function useUserPreferences() {
  const preferences = useState<UserPreferences>('user-prefs', () => ({
    theme: 'dark',
    fontSize: 'md',
    reducedMotion: false
  }))

  function setTheme(newTheme: UserPreferences['theme']) {
    preferences.value.theme = newTheme
  }

  return {
    preferences: readonly(preferences),
    setTheme
  }
}

Structure de Dossiers Modulaire Nuxt 4 #

Nuxt 4 introduit une structure basée sur le répertoire app/, permettant une séparation nette entre la configuration globale et le code métier :

my"text-cyan-300">-nuxt"text-cyan-300">-project/
├── app/
│   ├── components/
│   │   ├── common/
│   │   └── ui/
│   ├── composables/
│   ├── layouts/
│   ├── pages/
│   │   ├── index.vue
│   │   └── blog/
│   │       ├── index.vue
│   │       └── [slug].vue
│   └── utils/
├── content/
├── server/
│   └── api/
└── nuxt.config.ts

Exemple Pratique : Composable Typé #

Voici comment consommer un composable de manière sûre dans un composant Vue 3 avec la syntaxe