Toit-terrasseN NuxtPièce 8/8Mémo

Nuxt

Le mémo de Nuxt 4 : commandes, dossiers, pages, données, routes API et modes de rendu.

Ce mémo résume les pièces de l'appartement Nuxt. Chaque section renvoie au chapitre qui l'explique en détail.

Commandes

Commande	Effet
`npm create nuxt@latest mon-site`	Crée un projet.
`npm run dev`	Lance le serveur de développement sur `http://localhost:3000`.
`npm run build`	Prépare le site pour la mise en ligne (dossier `.output`).
`npx nuxt generate`	Génère un site entièrement statique.

Détails : Introduction à Nuxt.

Où ranger quoi

Dossier	Contenu
`app/pages/`	Les pages : un fichier, une adresse.
`app/components/`	Les composants, importés automatiquement.
`app/composables/`	Les fonctions `useXxx` réutilisables.
`app/layouts/`	Les gabarits communs (en-tête, pied de page).
`server/api/`	Les routes d'API, préfixées par `/api`.
`shared/`	Le code commun à `app/` et `server/`.
`public/`	Les fichiers servis tels quels.

Détails : La structure d'un projet.

<script setup lang="ts">
const route = useRoute()            // route.params.id dans pages/recettes/[id].vue
definePageMeta({ layout: 'admin' }) // choisir un gabarit
</script>

<template>
  <NuxtLink to="/recettes">Recettes</NuxtLink>
</template>

Depuis le code : await navigateTo('/recettes'). Détails : Pages et routage.

Composants

app/components/recette/Carte.vue s'utilise avec <RecetteCarte />.
<LazyRecetteCarte /> charge le composant à la demande.
Nom.client.vue ou <ClientOnly> : seulement dans le navigateur.

Détails : Les composants.

Données

Outil	Quand
`useFetch('/api/...')`	Charger une adresse pendant l'affichage d'une page.
`useAsyncData('cle', () => ...)`	Charger depuis une autre source (Supabase...).
`$fetch('/api/...', { method: 'POST', body })`	Une action de l'utilisateur (clic, formulaire).

useFetch et useAsyncData renvoient data, status, error et refresh. Détails : Récupérer des données.

Routes API

server/api/recettes/[id].get.ts

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  // getQuery(event), await readBody(event), useRuntimeConfig(event)
  if (!id) throw createError({ statusCode: 400, statusMessage: 'Identifiant manquant' })
  return { id }
})

Détails : Les routes API.

Modes de rendu

nuxt.config.ts

export default defineNuxtConfig({
  // ssr: false,                      // tout dans le navigateur
  routeRules: {
    '/': { prerender: true },         // au build
    '/recettes/**': { swr: 3600 },    // au serveur, en cache une heure
    '/admin/**': { ssr: false }       // dans le navigateur
  }
})

Détails : Les modes de rendu.

Sources officielles

Documentation de Nuxt (en anglais)

Ensuite

Introduction à Nuxt

Ce que Nuxt ajoute à Vue, quand l'utiliser, et comment créer ton premier projet.

Projet: Lignes de code
Niveau: Toit-terrasse
Appartement: Nuxt
Pièce: 8/8
Plan n°: nuxt/index