Nuxt UI

Bibliothèque de composants Vue construite sur Reka UI + Tailwind CSS + Tailwind Variants. Fonctionne avec Nuxt, Vue (Vite), Laravel (Vite + Inertia), et AdonisJS (Vite + Inertia).

Serveur MCP

Pour les détails de l'API des composants (props, slots, événements, documentation complète, exemples), utilisez le serveur MCP Nuxt UI. S'il n'est pas encore configuré, ajoutez-le :

Cursor — .cursor/mcp.json :

{ "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } }

Claude Code :

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

Outils MCP clés :

• search_components — trouver des composants par nom, description ou catégorie (pas de paramètres = lister tous)
• search_composables — trouver des composables par nom ou description (pas de paramètres = lister tous)
• search_icons — rechercher des icônes Iconify (par défaut lucide), retourne des noms au format i-{prefix}-{name}
• get_component — documentation complète du composant avec exemples d'utilisation
• get_component_metadata — props, slots, événements (léger, sans contenu de documentation)
• get_example — exemples de code du monde réel

Quand vous avez besoin de savoir ce qu'un composant accepte ou comment son API fonctionne, utilisez le MCP. Cette skill vous apprend quand utiliser quel composant et comment bien construire.

Règles fondamentales (toujours appliquer)

1. Toujours envelopper l'app dans UApp — requis pour les toasts, tooltips et overlays programmatiques. Accepte une prop locale pour l'i18n.
2. Toujours utiliser des couleurs sémantiques — text-default, bg-elevated, border-muted, etc. Ne jamais utiliser les couleurs brutes de la palette Tailwind comme text-gray-500.
3. Lire les fichiers de thème générés pour les noms de slots — Nuxt : .nuxt/ui/<component>.ts, Vue : node_modules/.nuxt-ui/ui/<component>.ts. Ils montrent chaque slot, variante et classe par défaut pour n'importe quel composant.
4. Priorité d'override (le plus haut gagne) : prop ui / prop class → config globale → defaults du thème.
5. Les icônes utilisent le format i-{collection}-{name} — lucide est la collection par défaut. Utilisez l'outil MCP search_icons pour trouver des icônes, ou consultez icones.js.org.

Comment utiliser cette skill

En fonction de la tâche, chargez les fichiers de référence pertinents avant d'écrire du code. Ne chargez pas tout — uniquement ce qui est nécessaire.

Fichiers de référence

Guidelines — décisions de design et conventions :

• design-system — couleurs sémantiques, theming, personnalisation de marque, variantes, la prop ui
• component-selection — matrices de décision : quand utiliser Modal vs Slideover, Select vs SelectMenu, Toast vs Alert, etc.
• conventions — motifs de codage, nommage de slots, tableaux d'items, composables, raccourcis clavier
• forms — validation de formulaires, layout de champs, gestion d'erreurs, Standard Schema

Layouts — motifs de structure de page complète :

• landing — pages d'accueil, blog, changelog, pricing
• dashboard — UI d'admin avec sidebar et panneaux
• docs — sites de documentation avec navigation et TOC
• chat — chat IA avec Vercel AI SDK
• editor — éditeur de texte enrichi avec toolbars

Recipes — motifs complets pour les tâches courantes :

• data-tables — tableaux avec filtres, pagination, tri, sélection
• auth — formulaires de login, signup, mot de passe oublié
• overlays — modals, slideovers, drawers, command palette
• navigation — headers, sidebars, breadcrumbs, tabs

Référence rapide :

• components — index des composants par catégorie pour trouver le bon nom de composant

Tableau de routage

Installation

Nuxt

pnpm add @nuxt/ui tailwindcss

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

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

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

Vue (Vite)

pnpm add @nuxt/ui tailwindcss

// 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()
  ]
})

// src/main.ts
import './assets/css/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)
const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)
app.mount('#app')

/* src/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

<!-- src/App.vue -->
<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

Ajoutez class="isolate" à votre <div id="app"> racine dans index.html. Pour Inertia : utilisez ui({ router: 'inertia' }) dans vite.config.ts.