Vue 3 › Nuxt UI : des composants Vue/Nuxt

Qu’est-ce que Nuxt UI ?

Nuxt UI est une bibliothèque de composants d’interface pour Vue et Nuxt, conçue pour faciliter le développement d’applications web modernes et performantes.

Créée en grande partie par Benjamin Canac, membre de la core Team de NuxtLabs, Nuxt UI est officiellement sortie en version 3 en 2025.

Sous le capot, Nuxt UI repose sur des technologies de référence et embarque de nombreuses fonctionnalités prêtes à l’emploi :

• 🎨 Design System : L’incontournable framework CSS utilitaire Tailwind CSS en v4
• ✅ Accessibilité et interactivité : Reka UI pour des composants interactifs non stylisés et une accessibilité optimale (conformité aux normes WAI-ARIA).
• 🛡️ Typage TS : TypeScript garantit une autocomplétion fluide et une utilisation rigoureuse de ses composants.
• 🌍 i18n : traduction en 30+ langues et compatible avec i18n et support multi-directionnel (LTR/RTL).
• 🧩 Extras intégrés : prise en charge d’Iconify, gestion des polices, dark/light mode, et plus encore.

Si Nuxt UI a, à l’origine, été conçu pour les applications développées avec le framework Nuxt, il est désormais compatible pour les applications Vue.js seules ! Et ça, c’est une très bonne initiative, notamment pour les projets de prototypages, les SPA simples ou encore les projets sans enjeu SEO (dashboard internes, widget intégré…).

Pourquoi utiliser Nuxt UI ?

Utiliser Nuxt UI dans vos projets vous permet d’être productif et qualitatif, avec des composants prêts à l’emploi pour shipper plus vite tout en bénéficiant de composants accessibles, typés et personnalisables.

Installer Nuxt UI

Nuxt UI se présente sans surprise sous la forme d’un paquet JS, téléchargeable avec votre gestionnaire de paquet favori.

Voici un exemple avec npm :

npm install @nuxt/ui

Votre paquet doit ensuite être déclaré en tant que module/plugin pour votre application.

Côté configuration, cela dépend de votre environnement :

• Vous travaillez dans un projet Vue ? Suivez ce guide de configuration pour Vue.
• Vous travaillez dans un projet Nuxt ? Suivez ce guide de configuration pour Nuxt.

Utiliser des composants Nuxt UI

Tous les composants Nuxt UI sont par défaut préfixés par U : <UAlert>, <USlider>, <UBadge>, <UButton>, etc.

<UAlert title="Hello from laConsole!" color="primary" />

Chaque composant possède ses propres :

• ⚙️ Props : Afin d’en modifier le comportement et l’apparence.
• 📦 Slots : Afin d’en personnaliser le contenu.

Si les composants Nuxt UI sont dotés d’un bon potentiel de personnalisation via leurs props et slots, cela ne suffit pas toujours à les intégrer parfaitement à votre design system.

Place à la personnalisation de Nuxt UI ! 👇

Personnaliser Nuxt UI

Personnalisation du thème

Nuxt UI repose sur Tailwind CSS v4, qui adopte une approche CSS-first.

Les thèmes ne se configurent plus via un fichier 📄 tailwind.config.ts, mais directement avec des variables CSS au sein du fichier 📄 main.css.

Créons par exemple :

• Des variables --color-lila-* contenant une palette de couleurs lila avec des variantes de teintes
• Une variable --text-big ayant vocation à définir une font-size pour des titres

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

/* ... */

@theme {
  --text-big: 100px;
  --color-lila-50: #fdf4ff;
  --color-lila-100: #fae8ff;
  --color-lila-200: #f5d0fe;
  --color-lila-300: #f0abfc;
  --color-lila-400: #e879f9;
  --color-lila-500: #d946ef;
  --color-lila-600: #c026d3;
  --color-lila-700: #a21caf;
  --color-lila-800: #86198f;
  --color-lila-900: #701a75;
  --color-lila-950: #4a044e;
}

La directive @theme indique à Tailwind de créer les classes utilitaires basées sur ces variables (text-lila-50, bg-lila-50, border-lila-50, text-lila-100…text-big…) et variantes de style pour les composants utilisant ces variables.

Nuxt UI utilise un système de couleurs basé sur les conventions classiques du design d’interface. Chaque couleur a un rôle bien défini (primaire, succès, erreur, etc.), ce qui facilite la lecture du code et la cohérence visuelle des composants.

Si vous souhaitez personnaliser les couleurs définies par défaut dans le design system de Nuxt UI, deux options s’offrent à vous :

1. Associer chaque couleur à une valeur de la palette officielle de Tailwind
2. Utiliser vos propres couleurs, définies au préalable dans la section @theme de votre fichier 📄 main.css.

Pour une application Vue, cela se passe dans le fichier 📄vite.config.ts :

// ...
import ui from "@nuxt/ui/vite";

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    ui({
      ui: {
        colors: {
          primary: "lila", // Couleur perso
          neutral: "zinc" // Couleur de Tailwind
        },
      },
    }),
  ],
  // ...,
});

Pour une application Nuxt, cela se passe dans le fichier app.config.ts :

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'lila', // Couleur perso
      neutral: 'zinc' // Couleur de Tailwind
    }
  }
})

Ces modifications vont appliquer les teintes des couleurs spécifiées aux variables --ui-color-primary-50, --ui-color-primary-100, etc.

Modifier le thème via des variables CSS impacte globalement le style des composants Nuxt UI, qui s’appuient en partie sur ces valeurs pour leur design.

Par exemple :

• <UContainer> va définir sa max-width avec la variable --ui-container
• <UButton>, <UAlert>, etc. vont définir leurs variantes de couleurs avec les variables --ui-color-*.
• Etc.

En revanche, certains styles de composants ne sont pas liés aux variables CSS. Dans ce cas, il faudra les modifier de manière ciblée, directement sur les composants concernés. 👇

Personnalisation de composants

Nuxt UI propose 2 approches pour modifier les styles des composants.

Pour choisir la bonne méthode, posez-vous deux questions simples :

• Souhaitez-vous appliquer le style à toutes les utilisations du composant ? 👉 Optez pour une modification globale.
• Souhaitez-vous modifier uniquement une instance précise du composant ? 👉 Optez pour une modification locale.

Modifier un composant globalement

Pour modifier le style d’un composant de manière globale, Nuxt UI nous propose de modifier les classes Tailwind utilisées pour mettre en forme les slots et variantes de style (couleurs, tailles…) du composant.

Ce paramétrage est directement intégré dans la configuration de votre application, au sein de la section ui de votre fichier vite.config.ts (ou app.config.ts pour Nuxt).

Voici un exemple dans lequel j’override la border-radius du composant <UButton>, en remplaçant la classe rounded-md appliquée par défaut, par rounded-full :

// ...
ui: {
  button: {
    slots: {
      base: 'rounded-full'
    }
  }
}

Cette méthode affectera toutes les occurrences du composant <UButton> dans votre application.

Ici, je modifie le style appliqué au slot nommé base du composant <UButton>, mais j’aurais tout aussi bien pu modifier d’autres slots, comme label, leadingIcon, etc.

Les variantes de style, sont également paramétrables via une propriéte variants.

Modifier un composant localement

Pour personnaliser le style d’un composant à un endroit bien précis de votre application, utilisez la prop ui pour écraser les classes Tailwind utilisées par défaut.

Par exemple, pour créer un bouton au style outline avec une bordure en tirets de 2px, ajoutons les classes ring-0 border-2 border-dashed sur le slot base du composant <UButton> :

<UButton variant="outline" color="secondary" :ui="{ base: 'ring-0 border-2 border-dashed' }">Hello</UButton>

Cette méthode affectera une instance spécifique du composant <UButton> dans votre application.

Nuxt UI Pro

Si Nuxt UI propose de nombreux composants de base, Nuxt Labs propose Nuxt UI Pro, une version premium de sa bibliothèque constituée de 50+ composants additionnels.

Je l’utilise personnellement sur la plupart de mes projets Vue/Nuxt pour 3 raisons :

1. ⚡ Un vrai gain de productivité pour créer des interfaces
2. 👁️‍🗨️ Des composants accessibles par défaut
3. 🎨 Une personnalisation ultra simple et poussée

Et pour faire les choses bien, je suis allé contacter Sébastien Chopin, le fondateur de Nuxt, pour vous dégoter une offre spéciale, alors si la lib vous tente, vous pouvez bénéficier de -20% de réduction avec le code promo LACONSOLE 🎉

N’hésitez pas à faire un tour sur le site de Nuxt UI Pro pour découvrir les composants disponibles et les avantages de cette version premium.