Nuxt UI, la bibliothèque de composants intuitive pour les applications Vue

Construire une application Vue à partir de zéro implique de prendre des dizaines de décisions avant même d’écrire la moindre ligne de logique métier : quelle bibliothèque de composants utiliser, comment gérer l’accessibilité, si votre design system pourra évoluer, et à quel point il doit être couplé à votre framework. Nuxt UI répond à la plupart de ces questions avant même que vous n’ouvriez votre éditeur.

Qu’est-ce que Nuxt UI ?

Nuxt UI est une bibliothèque de composants Vue gratuite et open-source, construite sur trois technologies fondamentales :

• Reka UI — des primitives headless accessibles qui gèrent nativement la navigation au clavier, la gestion du focus et le support des lecteurs d’écran
• Tailwind CSS — un système de styles utility-first avec un modèle de configuration CSS-first
• Tailwind Variants — une API typée pour gérer les variantes de composants et résoudre proprement les conflits de styles

Le résultat : plus de 125 composants prêts pour la production, accessibles par défaut, visuellement soignés et faciles à personnaliser.

Une clarification importante : malgré son nom, Nuxt UI n’est pas exclusif à Nuxt. Elle fonctionne tout aussi bien dans n’importe quel projet Vue via un plugin Vite. Si vous développez avec Vue, Vue Router et Vite, la configuration ne demande que quelques lignes.

Comment Nuxt UI s’intègre dans l’écosystème Vue

Lors de l’évaluation d’une bibliothèque de composants Vue, la vraie question n’est pas « contient-elle suffisamment de composants ? » — mais plutôt « correspond-elle à ma façon de développer ? »

Voici où se situe Nuxt UI par rapport aux alternatives courantes :

Si votre stack inclut déjà Tailwind CSS et que vous souhaitez des composants de haut niveau — tableaux de données, formulaires, overlays, navigation — sans les développer vous-même, Nuxt UI est le choix naturel.

Premiers pas : installation

Pour les projets Nuxt, ajoutez le module à nuxt.config.ts :

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

Ensuite, encapsulez votre application avec UApp et importez les styles dans votre fichier d’entrée CSS :

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

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Pour les projets Vue + Vite standards, configurez le plugin Vite :

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()]
})

Ensuite, enregistrez le plugin dans main.ts et importez le même CSS. Les composants et composables sont automatiquement importés globalement dans les deux configurations.

Fonctionnalités clés à connaître

L’accessibilité sans effort supplémentaire. Comme Nuxt UI repose sur Reka UI, les composants complexes tels que les modales, onglets et menus déroulants gèrent automatiquement les attributs ARIA, le focus trapping et les interactions clavier. Vous devez toujours tester en contexte, mais les fondations sont solides.

TypeScript de bout en bout. Chaque prop, slot et événement de composant est typé. Le theming via app.config.ts est type-safe, et les props de composants, slots et composables sont entièrement typés dans toute la bibliothèque.

Un theming qui ne vous résiste pas. Nuxt UI v4 utilise un modèle de configuration CSS-first. La personnalisation des couleurs, tailles et variantes se fait dans le CSS ou dans app.config.ts — sans fichier de configuration JavaScript avec lequel batailler.

Plus de 125 composants répartis dans 13 catégories, incluant des groupes spécialisés pour les dashboards, interfaces de chat IA, édition de texte enrichi et l’intégration avec Nuxt Content — des domaines pour lesquels la plupart des bibliothèques de composants Vue basées sur Tailwind CSS ne proposent rien.

Quand Nuxt UI est le bon choix

Nuxt UI a du sens lorsque vous voulez :

• Des composants Tailwind-native qui ne nécessitent pas de système de design tokens séparé
• Une accessibilité gérée au niveau des primitives, et non ajoutée après coup
• Des composants UI Nuxt 4 avec un support SSR, i18n et color mode de première classe
• Une bibliothèque gratuite sous licence MIT sans composants payants (Nuxt UI Pro a été fusionné dans la bibliothèque principale en v4)

Elle est moins adaptée si vous avez besoin de Material Design, si vous préférez copier le code source des composants dans votre dépôt (envisagez plutôt shadcn-vue), ou si vous développez des applications multiplateformes ciblant mobile et desktop (envisagez Quasar).

Conclusion

Nuxt UI supprime la « taxe de scaffolding » qui ralentit le développement Vue en phase initiale. Avec des composants accessibles, un design system cohérent et TypeScript intégré, vous pouvez vous concentrer sur ce que votre application fait réellement plutôt que de reconstruire des primitives.

Commencez par la documentation officielle ou clonez l’un des templates prêts à l’emploi — Dashboard, SaaS, Landing ou Starter — et obtenez quelque chose de fonctionnel en quelques minutes.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.