Nuxt.js 3 : Le framework Vue ultime pour vos applications modernes

Introduction à Nuxt.js 3

Nuxt.js 3 est la dernière version majeure du framework Vue.js qui apporte des améliorations significatives en termes de performance, de fonctionnalités et d'expérience développeur. Construit sur Vue 3 et Vite, Nuxt 3 offre une architecture moderne et performante.

Les nouveautés majeures de Nuxt 3

1. Architecture hybride

Nuxt 3 permet de choisir entre différents modes de rendu :

• SSR (Server-Side Rendering) : Rendu côté serveur pour un meilleur SEO
• SSG (Static Site Generation) : Génération de sites statiques ultra-rapides
• SPA (Single Page Application) : Application monopage classique
• Mode hybride : Combinaison de SSR et SSG par route

2. Composition API native

Avec Vue 3, Nuxt adopte pleinement la Composition API qui offre une meilleure organisation du code :

export default defineComponent({
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    return { count, doubled, increment }
  }
})

3. Auto-imports

Nuxt 3 importe automatiquement les composables, composants et utilitaires. Plus besoin d'écrire des imports manuels !

// Pas besoin d'importer ref, computed, etc.
const count = ref(0)
const route = useRoute()
const router = useRouter()

Les composables essentiels

useFetch et useAsyncData

Nuxt 3 fournit des composables puissants pour la récupération de données :

const { data: posts, pending, error } = await useFetch('/api/posts', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer token'
  },
  transform: (data) => data.items,
  watch: [searchQuery]
})

💡 Astuce : Utilisez useFetch pour les appels API simples et useAsyncData pour les cas plus complexes nécessitant plus de contrôle.

useState pour le state partagé

// composables/useCounter.ts
export const useCounter = () => useState('counter', () => 0)

// Utilisable partout dans l'app
const count = useCounter()

Structure d'un projet Nuxt 3

Voici la structure recommandée :

my-nuxt-app/
├── assets/          # Fichiers non compilés (SCSS, images)
├── components/      # Composants Vue auto-importés
├── composables/     # Composables Vue auto-importés
├── layouts/         # Layouts de l'application
├── middleware/      # Middleware de route
├── pages/           # Routes de l'application
├── plugins/         # Plugins Nuxt
├── public/          # Fichiers statiques
├── server/          # API et middleware serveur
│   ├── api/
│   └── middleware/
├── nuxt.config.ts   # Configuration Nuxt
└── app.vue          # Composant racine

Modules incontournables

Module	Description	Usage
@nuxtjs/tailwindcss	Intégration Tailwind CSS	Styling
@pinia/nuxt	State management avec Pinia	Store
@nuxt/image	Optimisation d'images	Performance
@nuxtjs/i18n	Internationalisation	Multilingue

Performance et optimisation

Nuxt 3 offre des performances exceptionnelles grâce à :

1. Vite : Build tool ultra-rapide avec HMR instantané
2. Code splitting automatique : Chargement intelligent des chunks
3. Lazy loading : Chargement différé des composants
4. Nitro engine : Serveur ultra-performant et portable

Exemple de lazy loading

// Chargement paresseux d'un composant
const LazyModal = defineAsyncComponent(() => 
  import('~/components/Modal.vue')
)

// Ou avec le préfixe Lazy
<LazyBigComponent v-if="show" />

---

Conclusion

Nuxt.js 3 représente une évolution majeure qui combine la puissance de Vue 3, la simplicité de développement et des performances exceptionnelles. Que vous construisiez une application e-commerce, un blog ou une SaaS, Nuxt 3 offre tous les outils nécessaires pour réussir.

Pour aller plus loin, consultez la documentation officielle de Nuxt 3 qui est excellente et très complète.