4e étageUI Nuxt UIPièce 7/7Mémo

Nuxt UI

Le mémo de Nuxt UI 4 : installation, composants courants, formulaires, superpositions, thème et personnalisation.

Ce mémo résume Nuxt UI 4. Chaque section renvoie au cours qui l'explique en détail.

Installation

npm install @nuxt/ui tailwindcss

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

Et <UApp> autour de <NuxtPage /> dans app/app.vue. Détails : Installer Nuxt UI.

Props communes

Prop	Valeurs
`color`	`primary`, `secondary`, `success`, `info`, `warning`, `error`, `neutral`
`variant` (UButton)	`solid`, `outline`, `soft`, `subtle`, `ghost`, `link`
`size`	`xs` à `xl`

Composants courants

Composant	Usage
`UButton`	Bouton ou lien (`label`, `to`, `icon`, `loading`)
`UBadge`	Étiquette
`UCard`	Carte (slots `header`, centre, `footer`)
`UIcon`	Icône `i-lucide-<nom>`

Les icônes demandent npm install @iconify-json/lucide. Détails : Premiers composants.

Formulaires

<UForm :schema="schema" :state="state" @submit="envoyer">
  <UFormField label="Titre" name="titre">
    <UInput v-model="state.titre" />
  </UFormField>
  <UButton type="submit" label="Enregistrer" />
</UForm>

schema vient de Zod, Valibot, Yup, Joi ou Superstruct ; event.data contient les valeurs validées. Détails : Formulaires et validation.

Besoin	Composant ou fonction
Menu de liens	`<UNavigationMenu :items="items" />`
Fenêtre modale	`<UModal v-model:open="ouverte" title="...">`
Menu d'actions	`<UDropdownMenu :items="items">`
Notification	`useToast().add({ title, color })`

Détails : Navigation et superpositions.

Thème et mode sombre

app/app.config.ts

export default defineAppConfig({
  ui: { colors: { primary: 'orange', neutral: 'stone' } }
})

<UColorModeButton /> bascule clair et sombre.
useColorMode().preference : light, dark ou system.

Détails : Thème, couleurs et mode sombre.

Personnaliser

Niveau	Exemple
Une instance	`<UButton class="rounded-full" />`
Une zone	`<UCard :ui="{ header: 'bg-primary/10' }" />`
Tout le site	`ui.button.defaultVariants` dans `app.config.ts`

Détails : Personnaliser un composant.

Sources officielles

Documentation de Nuxt UI (en anglais)

Ensuite

Installer Nuxt UI

Ajouter le module @nuxt/ui à un projet Nuxt 4, importer Tailwind CSS 4 et envelopper l'application dans UApp.

Projet: Lignes de code
Niveau: 4e étage
Appartement: Nuxt UI
Pièce: 7/7
Plan n°: nuxt-ui/index