🧠 Aide-mémoire Nuxt (Nuxt 3+)

Telechargement de base vide

⚙️ Installation d’un projet Nuxt

npx nuxi init mon-projet
cd mon-projet
npm install
npm run dev
npm run build
npm run preview

📆 Structure de base

mon-projet/
  ├─ pages/        # Pages de l’app
  ├─ components/   # Composants réutilisables
  ├─ layouts/      # Layouts globaux
  ├─ plugins/      # Plugins Vue/Nuxt
  ├─ middleware/   # Middleware navigation
  ├─ server/       # API côté serveur
  └─ app.vue       # Entrée principale

🧹 Exemple simple

<!-- pages/index.vue -->
<template>
  <div></div>
</template>

<script setup>
const message = ref('Bonjour Nuxt !')
</script>

<style scoped>
div { color: green; }
</style>

🎯 Spécificités Nuxt

• pages/ → génère automatiquement le routing
• <NuxtPage/> → rendu des pages
• <NuxtLayout/> → wrapper de layouts
• <NuxtLink to="/about"> → navigation interne
• useHead() → gérer meta & SEO
• useRoute(), useRouter() → routing

🔹 Cycle de vie Nuxt

onMounted(() => console.log('Monté client'))
onUnmounted(() => console.log('Détruit client'))

// Coté serveur
onServerPrefetch(async () => {
  await fetch('...')
})

🛠️ Composants

<!-- components/Hello.vue -->
<template><p>Hello !</p></template>

<script setup>
defineProps({ nom: String })
</script>

🚦 Routing automatique

pages/
  index.vue       → /
  about.vue       → /about
  blog/[id].vue   → /blog/123
  users/[...all].vue → /users/toto/edit

🧲 Données & API

<script setup>
// Fetch côté serveur et client
const { data, pending, error } = await useFetch('/api/hello')

// Appel API externe
const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users')
</script>

🔧 Fonctions Nuxt utiles

🌟 Exemple de layout

<!-- layouts/default.vue -->
<template>
  <div>
    <nav>
      <NuxtLink to="/">Accueil</NuxtLink> |
      <NuxtLink to="/about">À propos</NuxtLink>
    </nav>
    <main>
      <NuxtPage />
    </main>
  </div>
</template>