Skills

Nuxt UI : brancher la bibliothèque de composants en v4 et faire travailler un Agent selon AGENTS.md

Pour qui veut cette UI Vue dans un projet Nuxt, ou faire changer des composants par un agent de code selon les règles du dépôt. La page actuelle est la branche v4 ; ne pas la mélanger avec v3/v2.

Official source · Nuxt UI

Install

pnpm add @nuxt/ui tailwindcss

À qui ça s’adresse

Si vous faites une interface Nuxt et voulez une UI Vue toute faite, plutôt que d’assembler des composants accessibles de zéro, ce dépôt convient mieux. Il réunit Reka UI, Tailwind CSS et Tailwind Variants pour des interfaces complexes, accessibles et performantes. Les amonts liés sont

https://reka-ui.com/

https://tailwindcss.com/

https://www.tailwind-variants.org/

Il vous faut un projet Nuxt qui peut modifier nuxt.config, et accepter d’installer les dépendances avec pnpm. Qui veut seulement qu’un agent de code aide à changer composants, thèmes ou tests doit d’abord lire le AGENTS.md du dépôt. Il n’écrit pas un produit Agent particulier comme seul objet pris en charge ; il dit seulement qu’il sera ramassé automatiquement par all AI coding agents.

Premier essai en 3 minutes

La commande d’installation officielle est écrite sur la page comme celle-ci :

pnpm add @nuxt/ui tailwindcss

Cela change les dépendances du projet ; ce n’est pas une lecture seule. Confirmer d’abord que le répertoire courant est votre application Nuxt et que cette machine a pnpm, puis exécuter. Après installation, écrire le module dans la config. L’extrait donne :

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

Il exige l’entrée CSS ~/assets/css/main.css, mais n’écrit pas le contenu de ce fichier. N’inventez pas @import ni l’usage des composants. Signal de succès : la dépendance est installée, modules montre @nuxt/ui, et l’application démarre comme vous le faites déjà sans erreur due à l’absence de ce module. Si l’Agent commence à ajouter des exemples de boutons absents de l’extrait, ou à changer des jetons de thème, s’arrêter d’abord.

Contrôle moins risqué : ouvrir

https://github.com/nuxt/ui/blob/v4/AGENTS.md

Faire expliquer à l’Agent seulement la structure des composants ou les conventions de thème, sans encore changer de fichiers.

Cas d’usage

Cas 1 : Brancher v4 dans une application Nuxt. Installer @nuxt/ui et tailwindcss avec la commande pnpm ci-dessus, puis enregistrer le module @nuxt/ui et pointer ~/assets/css/main.css. La page n’écrit pas d’équivalents npm/yarn ni comment importer le premier composant dans un fichier unique Vue. Vous ne pouvez donc confirmer que ces deux étapes : dépendance et enregistrement du module. Quoi écrire dans le fichier CSS, quel composant poser sur une page, dépasse cet extrait ; il faut consulter docs ou sources locales que vous avez déjà, et ne pas faire semblant que ce texte les a déjà données.

Cas 2 : Faire travailler un agent de code selon les règles du dépôt. AGENTS.md fournit un guide de contribution aux assistants IA, couvre structure des composants, motifs de thème, conventions de test et indications de doc, et est ramassé automatiquement. La tâche doit être une comparaison en lecture seule, par exemple « selon AGENTS.md, voir si structure/thème/tests de ce composant dévient ». Il n’écrit pas de commandes de test concrètes ni comment publier un site de doc. Donc la première fois, ne pas faire réécrire la doc en lot ni ajouter des fichiers de test ; d’abord lui faire désigner les paragraphes d’appui et les chemins qu’il changerait.

Limites d’usage

Vous regardez maintenant la branche v4. Nuxt UI v3 est à

https://github.com/nuxt/ui/tree/v3

v2 à

https://github.com/nuxt/ui/tree/v2

Ne pas appliquer à v4 les noms de modules, répertoires ou écritures de thème d’anciennes branches. La page n’écrit pas de tableau de migration v4 vers v3.

Le chemin d’installation est pnpm add @nuxt/ui tailwindcss. Ne pas mettre à côté une autre commande de gestionnaire de paquets. Reka UI et Tailwind Variants sont écrits comme sources de capacité, pas un second installeur.

La première fois, s’arrêter à installer les dépendances, enregistrer le module, ou seulement lire AGENTS.md. Tout changement de source de composant, tests ajoutés, thème modifié ou réécriture de l’entrée CSS doit d’abord faire reformuler à l’Agent les fichiers qu’il va changer ; vous confirmez, puis continuez.