Installation

Le template
Découvrez comment installer et configurer l

Réseau

Ajouter à un projet Nuxt

Installer le package Nuxt UI

pnpm add @nuxt/ui tailwindcss

Ajouter le module Nuxt UI dans votre nuxt.config.ts

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
Il n'est pas nécessaire d'ajouter @nuxt/icon, @nuxt/fonts ou @nuxtjs/color-mode à votre tableau modules car Nuxt UI les enregistre automatiquement. Vous pouvez toujours configurer ces modules dans votre nuxt.config.ts à l'aide des touches icon, fonts et colorMode.

Import Tailwind CSS et Nuxt UI dans votre CSS

@import "tailwindcss";
@import "@nuxt/ui";
Lorsque vous utilisez Nuxt Layers, le module génère automatiquement des directives xph044 pour chaque répertoire de couche, ce qui garantit que Tailwind CSS analyse tous vos fichiers sources de couche pour les classes d'utilitaires.
Il est recommandé d'installer l'extension Tailwind CSS IntelliSense pour VSCode et d'ajouter les paramètres suivants:
.vscode/settings.json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.classFunctions": ["defineAppConfig"]
}

Enveloppez votre application avec le composant App

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
Le composant App configure la configuration globale et est nécessaire pour Toast, Tooltip et programmatic overlays.

Utiliser un modèle Nuxt

Commencez avec l'un de nos templates officiels [x/templates) en utilisant le bouton Use this template sur GitHub ou la CLI:

npm create nuxt@latest -- -t ui

Starter

Un modèle minimal pour démarrer avec Nuxt UI.

Landing

Un modèle de page de destination moderne optimisé par Nuxt Content.

Docs

Un modèle de documentation optimisé par Nuxt Content.

SaaS

Un modèle SaaS avec atterrissage, tarification, documents et blog alimenté par Nuxt Content.

Dashboard

Un modèle de tableau de bord avec une disposition multi-colonnes pour créer des interfaces d'administration sophistiquées.

Chat

Un modèle de chatbot AI pour créer votre propre chatbot alimenté par Vercel AI SDK.

Portfolio

Un modèle de portfolio élégant pour présenter votre travail, vos compétences et votre blog alimenté par Nuxt Content.

Changelog

Un modèle de journal des modifications pour afficher vos notes de publication de dépôt de GitHub alimenté par Comark.

Editor

Un modèle d'éditeur de texte riche optimisé par TipTap avec prise en charge des types de contenu Markdown, HTML et JSON.

Calendar

Un modèle inspiré d'Apple Calendar avec des vues de jour, de semaine et de mois, des glisser-déposer et des mises à jour optimistes.

options

Vous pouvez personnaliser l'interface utilisateur de Nuxt en fournissant des options dans votre nuxt.config.ts.

Xph192xxprefix

Utilisez l'option prefix pour modifier le préfixe des composants.

Par défaut: U

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

xfonts

Utilisez l'option fonts pour activer ou désactiver le module @nuxt/fonts.

  • Par défaut: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    fonts: false
  }
})

xcolorMode

Utilisez l'option colorMode pour activer ou désactiver le module @nuxt/color-mode.

  • Par défaut: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

xtheme.colors

Utilisez l'option theme.colors pour définir les alias de couleurs dynamiques utilisés pour générer le thème des composants.

Par défaut: ['primary', 'secondary', 'success', 'info', 'warning', 'error']

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})
Chaque alias génère un ensemble complet de nuances et de variantes --ui-color-* dans les thèmes de composants qui ont des variantes de couleur, que votre application l'utilise ou non. Coupez la liste aux alias que vous utilisez réellement et conservez error si vous utilisez des formulaires, car les styles de validation en dépendent.
En savoir plus sur la personnalisation des couleurs et la thématisation dans la section Thème.

xtheme.transitions

Utilisez l'option theme.transitions pour activer ou désactiver les transitions sur les composants.

  • Par défaut: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
Cette option ajoute la classe transition-colors sur les composants avec des états stationnaires ou actifs.

xtheme.unstyled: badge{label="4.9+" class="align-text-top"}

Utilisez l'option theme.unstyled pour supprimer toutes les classes de thème par défaut des composants, en ne conservant que leur structure et les classes que vous fournissez via class, ui ou app.config.ui.

Par défaut: false

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      unstyled: true
    }
  }
})
Cela supprime également les classes structural (positionnement, transitions, flex/grille), pas seulement celles cosmétiques. Les composants lourds en termes de mise en page comme Modal, Drawer ou Calendar auront besoin de vous pour réapprovisionner leur mise en page, similaire au mode non stylé de PrimeVue.

xtheme.defaultVariants

Utilisez l'option theme.defaultVariants pour remplacer les variantes color et size par défaut pour les composants.

Seuls les paramètres par défaut qui sont exactement primary ou md sont remplacés, donc Avatar conserve color: 'neutral' et Separator conserve size: 'xs'.

Par défaut: { color: 'primary', size: 'md' }

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

xtheme.prefix: badge{label="4.2+" class="align-text-top"}

Utilisez l'option theme.prefix pour configurer le même préfixe que celui que vous avez défini sur votre importation CSS Tailwind. Cela garantit que les composants de l'interface utilisateur Nuxt utilisent les classes utilitaires et les variables CSS préfixées correctes.

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})
Vous devrez peut-être activer fonts.processCSSVariables pour utiliser l'option de préfixe avec le module @nuxt/fonts:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  },
  fonts: {
    processCSSVariables: true
  }
})

Cela préfixe automatiquement toutes les classes d'utilitaires Tailwind et les variables CSS dans les thèmes de composants Nuxt UI:

<!-- Without prefix -->
<button class="px-2 py-1 text-xs hover:bg-primary/75">Button</button>

<!-- With prefix: tw -->
<button class="tw:px-2 tw:py-1 tw:text-xs tw:hover:bg-primary/75">Button</button>
En savoir plus sur l'utilisation d'un préfixe dans la documentation CSS Tailwind.

xprose

Utilisez l'option prose pour forcer l'importation des composants Nuxt UI [Prose)) même si @nuxtjs/mdc, @nuxt/content ou @comark/nuxt n'est pas installé.

Par défaut: false

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

mdc: badge{label="Deprecated" color="warning" class="align-text-top"}

Utilisez l'option prose à la place.

xcontent

Utilisez l'option content pour forcer l'importation des composants de prose et de contenu de l'interface utilisateur Nuxt, même si @nuxt/content n'est pas installé.

Par défaut: false

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

xexperimental.componentDetection: badge{label="4.1+" class="align-text-top"}

Utilisez l'option experimental.componentDetection pour activer la détection automatique des composants pour le tree-shaking. Cette fonctionnalité analyse votre code source pour détecter les composants réellement utilisés et génère uniquement le CSS nécessaire pour ces composants (y compris leurs dépendances).

  • Par défaut: false Type de fichier: boolean | string[]

**Activer la détection automatique: **

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

**Inclure des composants supplémentaires pour une utilisation dynamique: **

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: ['Modal', 'DropdownMenu', 'Popover']
    }
  }
})
Lorsque vous fournissez un tableau de noms de composants, la détection automatique est activée et ces composants (ainsi que leurs dépendances) sont garantis d'être inclus. Ceci est utile pour les composants dynamiques comme <component :is="..." /> qui ne peuvent pas être analysés statiquement.

Libération continue

Nuxt UI utilise pkg.pr.new pour les versions d'aperçu continues, offrant aux développeurs un accès instantané aux dernières fonctionnalités et corrections de bogues sans attendre les versions officielles.

Les versions d'aperçu automatiques sont créées pour tous les commits et les PR de la branche v4.Utilisez-les en remplaçant la version de votre paquet par le hachage de commit ou le numéro de PR.

package.json
{
  "dependencies": {
-   "@nuxt/ui": "^4.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}
pkg.pr.new commentera automatiquement les RP avec l'URL d'installation, ce qui facilite le test des modifications.

Introduction

Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.

Migration

A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.