Nuxt : Le Framework Full-Stack Vue, Features, Deployment

Qu'est-ce que Nuxt ?

Nuxt est le framework full-stack officiel pour Vue.js. Où Vue est la library UI, Nuxt est tout le reste nécessaire pour construire une app web production : routing, server-side rendering (SSR), static site generation (SSG), endpoints API, tooling build et deployment. C'est analogue à Next.js pour React ou SvelteKit pour Svelte.

Nuxt 3 est construit sur Vue 3, Vite et le moteur serveur Nitro. Nitro déploie virtuellement n'importe où — Node.js, AWS Lambda, Cloudflare Workers, Vercel, Netlify, Deno Deploy.

Pourquoi Nuxt ?

• Conventions sur config.
• Rendering universel.
• Moteur Nitro.
• Auto-imports.
• TypeScript first-class.
• Écosystème Vue.
• Modules Nuxt.
• Dev server Vite.

Structure projet Nuxt

my-app/
├── pages/
│   ├── index.vue
│   └── blog/[slug].vue
├── components/
├── composables/
├── server/
│   └── api/posts.get.ts
├── layouts/default.vue
└── nuxt.config.ts

Routing dans Nuxt

<script setup lang="ts">
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

Routes API serveur

export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug');
  const post = await db.post.findUnique({ where: { slug } });
  if (!post) throw createError({ statusCode: 404 });
  return post;
});

Data fetching

Modes rendering

export default defineNuxtConfig({
  ssr: true,
  routeRules: {
    '/': { prerender: true },
    '/dashboard': { ssr: false },
    '/blog/**': { isr: 60 }
  }
});

Nuxt vs Next.js vs SvelteKit

Modules Nuxt populaires

Best practices Nuxt

• Utiliser server routes pour API.
• useFetch pour données.
• routeRules pour rendering hybride.
• Auto-imports pour code plus propre.
• Pinia pour state global.
• SEO via @nuxt/seo.
• Nuxt DevTools.
• TypeScript partout.

FAQ : Nuxt

Nuxt 3 est-il production-ready ?

Oui.

Nuxt ou Vue seul ?

Vue seul pour SPAs. Nuxt pour SSR, SSG.

Nuxt peut-il déployer à Cloudflare Workers ?

Oui — Nitro auto-detect.

Comment Nuxt se compare-t-il à Next.js ?

Écosystèmes différents.

Nuxt supporte-t-il TypeScript ?

First-class.

Différence entre useFetch et $fetch ?

useFetch gère SSR + client + caching automatiquement.

Puis-je utiliser Nuxt pour site statique ?

Oui.

Load-testez votre app Nuxt avec LoadFocus

LoadFocus exécute des scripts JMeter et k6 contre votre deployment Nuxt depuis 25+ régions. Inscrivez-vous sur loadfocus.com/signup.