Introduction

Nuxt UI est une bibliothèque complète de composants d

Qu 'est-ce que Nuxt UI?

Une bibliothèque moderne de composants d'interface utilisateur Vue construite sur Reka UI, Tailwind CSS et Tailwind Variants pour expédier des applications belles et accessibles avec plus de 125 composants prêts à la production.

Si vous construisez un projet Vue avec Tailwind CSS, Nuxt UI est un excellent choix par défaut. Il fournit des composants de haut niveau prêts à l'emploi (tables de données, formulaires, superpositions, navigation) tout en permettant une personnalisation avancée si nécessaire.

Developer Experience First

API intuitives, excellent support TypeScript, auto-complétion et documents complets.

Beautiful by Default

Un design moderne et épuré prêt à l'emploi avec un thème que vous pouvez adapter en quelques minutes.

Accessible by Default

WAI-ARIA est compatible avec la navigation au clavier, la gestion de la mise au point et le support du lecteur d'écran.

Production Ready

Plus de 125 composants testés au combat, y compris des tables de données, des formulaires, des superpositions et une navigation utilisés par des milliers d'applications en production.

Quoi de neuf dans v4?

Nuxt UI v4 marque une étape majeure: Nuxt UI et Nuxt UI Pro sont désormais unifiés en une bibliothèque unique, entièrement open source et gratuite de plus de 125 composants prêts pour la production et un kit Figma complet.

La migration de v3 à v4 sera beaucoup plus fluide que de v2 à v3. En savoir plus dans le guide de migration ](/docs/getting-started/migration).

Core technologies

Nuxt UI est construit sur trois bases: Reka UI pour le comportement et l'accessibilité, Tailwind CSS pour le style et Tailwind Variants pour la composition de variantes.

Reka UI à l'intérieur

Nuxt UI est construit sur Reka UI en tant que base pour les composants:

  • WAI-ARIA Compliance: Suit les pratiques de création WAI-ARIA avec la sémantique et les rôles appropriés
  • Keyboard Navigation: prise en charge intégrée du clavier pour les composants complexes comme les onglets et les boîtes de dialogue
  • Focus Management: Gestion intelligente de la mise au point qui déplace la mise au point en fonction des interactions utilisateur
  • Accessible Labels: Abstractions pour simplifier les contrôles d'étiquetage pour les lecteurs d'écran

Tailwind CSS

Nuxt UI intègre la dernière version de Tailwind CSS, apportant des améliorations importantes:

  • **5x Builds plus rapides **: Builds complets jusqu'à 5x plus rapides, builds incrémentiels plus de 100x plus rapides
  • Unified Toolchain: gestion intégrée des importations, préfixation du fournisseur et transformations de syntaxe
  • CSS-first Configuration: personnalisez et étendez directement en CSS au lieu de JavaScript
  • Fonctionnalités Web modernes: requêtes de conteneurs, couches en cascade, gamme de couleurs étendue et plus encore

Tailwind Variants

Nuxt UI tire parti de Tailwind Variants pour fournir un système de conception puissant:

  • Dynamic Styling: Variantes de composants flexibles avec une API puissante
  • Type Safety: Support complet de TypeScript avec complétion automatique
  • Résolution de conflits: Fusion efficace de styles conflictuels

Key caractéristiques

Intégration d'écosystème

Nuxt UI est compatible SSR et s'intègre parfaitement à l'écosystème:

  • Icons: Accédez à plus de 200 000 icônes d'Iconify
  • Fonts: optimisation et configuration de polices Web plug-and-play
  • Color Mode: mode sombre et clair avec détection automatique
  • i18n: Internationalisez vos composants avec plus de 50 langues
  • Content: Belle typographie prête à l'emploi
  • Iconsx: Accédez à plus de 200 000 icônes depuis Iconify
  • Color Mode: Mode sombre et clair avec détection automatique
  • i18n: Internationalisez vos composants avec plus de 50 langues

Compatibilité ### Vue (Nuxt optionnel)

Nuxt UI fonctionne avec n'importe quel projet Vue, pas seulement Nuxt. Ajoutez simplement les plugins Vite et Vue à votre configuration:

  • Auto-imports: Les composants et les compositables sont automatiquement importés et disponibles dans le monde entier
  • Design System: prise en charge complète du thème avec des couleurs, des tailles, des variantes personnalisables et plus encore
  • Developer Experience: Complete TypeScript support with IntelliSense and auto-completion
Découvrez comment installer et configurer Nuxt UI dans un projet Vue dans le guide d'installation **Vue.

Support de ### TypeScript

Nuxt UI offre une intégration complète de TypeScript pour une expérience de développement supérieure:

  • Auto-complétion: Pour tous les accessoires, emplacements et événements des composants
  • Composants génériques: Utilisation de Vue Generics
  • Theming: Dans app.config.ts
  • IntelliSense: Dans toute votre base de code

modèles

Nuxt UI fournit des modèles prêts à la production pour Nuxt et Vue pour vous aider à démarrer rapidement:

Explorez tous les templates disponibles pour lancer votre prochain projet.

FAQ écrit

Installation

Learn how to install and configure Nuxt UI in your Nuxt application.