Installer Nuxt UI

Ce que tu vas apprendre

• Ce qu'est Nuxt UI et pourquoi l'utiliser dans un projet Nuxt.
• Installer le paquet @nuxt/ui et déclarer le module.
• Brancher le fichier CSS et envelopper l'application dans <UApp>.

C'est quoi, Nuxt UI ?

Nuxt UI est une bibliothèque de composants d'interface : boutons, formulaires, fenêtres, menus. Tu n'écris plus le HTML et le CSS de chaque bouton, tu écris <UButton>.

Elle repose sur Tailwind CSS 4, un outil qui met en forme les éléments avec des classes courtes comme p-4 ou text-lg. Tu n'as pas besoin de connaître Tailwind pour commencer.

Ce cours part d'un projet Nuxt 4 existant, comme celui du cours Introduction à Nuxt. Le fil rouge reste un site de recettes.

Installer le paquet

Dans le dossier du projet, lance :

npm install @nuxt/ui tailwindcss

Un module Nuxt est un paquet qui ajoute des fonctions au projet, ici les composants. @nuxt/ui en est un. tailwindcss est nécessaire à côté.

Déclarer le module

Ouvre nuxt.config.ts et ajoute deux lignes :

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

modules active Nuxt UI. css indique le fichier de styles chargé sur toutes les pages. Le signe ~ désigne le dossier app/.

Créer le fichier CSS

Crée app/assets/css/main.css avec deux importations :

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

La première charge Tailwind CSS. La seconde charge les styles de Nuxt UI.

Envelopper l'application dans UApp

UApp est un composant qui prépare l'environnement des autres : il est requis pour les notifications (toasts), les info-bulles et les fenêtres. Place-le autour du contenu de app/app.vue.

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

<NuxtPage /> affiche la page correspondant à l'adresse, comme dans le cours sur le routage.

Vérifier que ça marche

1. Lance npm run dev.
2. Ouvre app/pages/index.vue et mets-y un bouton.
3. Ouvre http://localhost:3000 : un bouton coloré doit apparaître.

<template>
  <UButton label="Voir les recettes" to="/recettes" />
</template>

Si le bouton est affiché sans couleur, retourne vérifier main.css et la ligne css de nuxt.config.ts.

Les composants sont importés tout seuls

Tu n'écris aucun import. Nuxt reconnaît les noms qui commencent par U et charge le bon composant, comme pour les composants de ton dossier app/components/.

Tous les composants ont la même logique : des props (réglages passés comme des attributs HTML), des slots (zones où glisser du contenu) et une apparence qu'on peut changer. Les cours suivants les explorent un à un.

Utiliser aussi les classes Tailwind

Comme Tailwind CSS est installé, tu peux mettre en forme tes propres éléments avec ses classes :

<template>
  <div class="p-6 text-center">
    <h1 class="text-2xl font-bold">Mes recettes</h1>
  </div>
</template>

p-6 ajoute de l'espace intérieur, text-center centre le texte, text-2xl et font-bold agrandissent et épaississent le titre. Les composants Nuxt UI et tes classes cohabitent sans réglage.

À retenir

• Nuxt UI est une bibliothèque de composants qui s'appuie sur Tailwind CSS 4.
• Installation : npm install @nuxt/ui tailwindcss, puis modules: ['@nuxt/ui'].
• Le fichier CSS contient @import "tailwindcss"; puis @import "@nuxt/ui";.
• <UApp> enveloppe l'application, il est requis pour les toasts et les info-bulles.
• Les composants U... sont importés automatiquement.