Installationen

Template Bearbeiten
Erfahren Sie, wie Sie die Nuxt-Benutzeroberfläche in Ihrer Nuxt-Anwendung installieren und konfigurieren.

setup (englisch)

Zu einem Nuxt-Projekt hinzufügen

Installieren Sie das Nuxt-UI-Paket

pnpm add @nuxt/ui tailwindcss

Füge das Nuxt UI-Modul in deinem nuxt.config.ts hinzu.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
Es ist nicht notwendig, @nuxt/icon, @nuxt/fonts oder @nuxtjs/color-mode zu Ihrem modules-Array hinzuzufügen, da Nuxt UI sie automatisch registriert.

Importieren Sie Tailwind CSS und Nuxt UI in Ihr CSS

@import "tailwindcss";
@import "@nuxt/ui";
Wenn Sie Nuxt Layers verwenden, generiert das Modul automatisch @source-Direktiven für jedes Layer-Verzeichnis, um sicherzustellen, dass Tailwind CSS alle Layer-Quelldateien nach Utility-Klassen durchsucht.
Es wird empfohlen, die Tailwind CSS IntelliSense Erweiterung für VSCode zu installieren und folgende Einstellungen hinzuzufügen:
.vscode/settings.json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.classFunctions": ["defineAppConfig"]
}

Wickeln Sie Ihre App mit App-Komponente

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
Die App-Komponente richtet die globale Konfiguration ein und wird für Toast, Tooltip und programmatic overlays benötigt.

Use a Nuxt template (Für Deutschland)

Beginnen Sie mit einem unserer official Templates, indem Sie die Use this template-Schaltfläche auf GitHub oder in der CLI verwenden:

npm create nuxt@latest -- -t ui

Starter

Eine minimale Vorlage, um mit der Nuxt UI zu beginnen.

Landing

Eine moderne Landingpage-Vorlage, die von Nuxt Content unterstützt wird.

Docs

Eine Dokumentationsvorlage, die von Nuxt Content bereitgestellt wird.

SaaS

Ein SaaS-Template mit Landing, Pricing, Docs und Blog, das von Nuxt Content unterstützt wird.

Dashboard

Eine Dashboard-Vorlage mit mehrspaltigem Layout zum Erstellen anspruchsvoller Admin-Schnittstellen.

Chat

Eine KI-Chatbot-Vorlage zum Erstellen eines eigenen Chatbot mit Vercel AI SDK.

Portfolio

Eine schlanke Portfolio-Vorlage, um Ihre Arbeit, Ihre Fähigkeiten und Ihren Blog zu präsentieren, der von Nuxt Content unterstützt wird.

Changelog

Eine Changelog-Vorlage zur Anzeige Ihres Repositorys veröffentlicht Notizen von GitHub powered by Comark.

Editor

Eine Rich-Text-Editor-Vorlage, die von TipTap mit Unterstützung für Markdown-, HTML-und JSON-Inhaltstypen unterstützt wird.

Calendar

Eine von Apple Kalender inspirierte Vorlage mit Tages-, Wochen-und Monatsansichten, Drag & Drop und optimistischen Updates.

Options (englisch)

Sie können Nuxt UI anpassen, indem Sie Optionen in Ihrem nuxt.config.ts bereitstellen.

prefix (nicht)

Verwenden Sie die Option prefix, um den Präfix der Komponenten zu ändern.

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

fonts nicht

Verwenden Sie die fonts-Option, um das @nuxt/fonts-Modul zu aktivieren oder zu deaktivieren.

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

colorMode Übersetzung

Verwenden Sie die colorMode-Option, um das Modul @nuxt/color-mode zu aktivieren oder zu deaktivieren.

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

theme.colors Übersetzung

Verwenden Sie die theme.colors-Option, um die dynamischen Farbaliase zu definieren, die zum Generieren des Komponentendesigns verwendet werden.

  • Standard: ['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']
    }
  }
})
Jeder Alias generiert einen vollständigen Satz von --ui-color-*-Schattierungen und-Varianten in den Komponententhemen mit Farbvarianten, unabhängig davon, ob Ihre App sie verwendet oder nicht. Trimmen Sie die Liste auf die tatsächlich verwendeten Aliase und behalten Sie error bei, wenn Sie Formulare verwenden, da Validierungsstile darauf angewiesen sind.
Erfahren Sie mehr über die Farbanpassung und das Thema im Themenbereich.

theme.transitions Übersetzung

Verwenden Sie die theme.transitions-Option, um Übergänge auf Komponenten zu aktivieren oder zu deaktivieren.

  • Standard: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
Diese Option fügt die transition-colors-Klasse für Komponenten mit hover-oder aktiven Zuständen hinzu.

theme.unstyled: badge{label="4.9+" class="align-text-top"} (englisch)

Verwenden Sie die Option theme.unstyled, um alle Standardtheme-Klassen aus Komponenten zu entfernen und nur deren Struktur und die Klassen beizubehalten, die Sie über class, ui oder app.config.ui bereitstellen.

  • Standard: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      unstyled: true
    }
  }
})
Dies entfernt auch structural-Klassen (Positionierung, Übergänge, Flex/Grid), nicht nur kosmetische. Layout-schwere Komponenten wie Modal, Drawer oder Calendar müssen Sie ihr Layout erneut bereitstellen, ähnlich wie im unstyled mode von PrimeVue.

theme.defaultVariants Bearbeiten

Verwenden Sie die Option theme.defaultVariants, um die Standardvarianten color und size für Komponenten außer Kraft zu setzen.

Nur Standardwerte, die genau primary oder md sind, werden ersetzt, sodass Avatar color: 'neutral' und Separator size: 'xs' behält.

  • Standard: { 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'
      }
    }
  }
})

theme.prefix: badge{label="4.2+" class="align-text-top"} (englisch)

Verwenden Sie die Option theme.prefix, um das gleiche Präfix zu konfigurieren, das Sie beim Tailwind CSS-Import festgelegt haben. Dadurch wird sichergestellt, dass die Nuxt-UI-Komponenten die richtigen vordefinierten Hilfsklassen und CSS-Variablen verwenden.

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})
Möglicherweise müssen Sie fonts.processCSSVariables aktivieren, um die Präfixoption mit dem @nuxt/fonts-Modul zu verwenden:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  },
  fonts: {
    processCSSVariables: true
  }
})

Dadurch werden automatisch alle Tailwind-Utility-Klassen und CSS-Variablen in Nuxt UI-Komponententhemen vorangestellt:

<!-- 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>
Weitere Informationen zur Verwendung eines Präfixes finden Sie in der Tailwind CSS-Dokumentation.

prose nicht

Verwenden Sie die prose-Option, um den Import von Nuxt UI Prose components zu erzwingen, auch wenn @nuxtjs/mdc, @nuxt/content oder @comark/nuxt nicht installiert ist.

  • Standard: 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"} (englisch)

Verwenden Sie stattdessen die prose-Option.

content nicht

Verwenden Sie die Option content, um den Import der Nuxt UI-Prosa-und Inhaltskomponenten zu erzwingen, auch wenn @nuxt/content nicht installiert ist.

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

experimental.componentDetection: badge{label="4.1+" class="align-text-top"} (englisch)

Diese Funktion scannt Ihren Quellcode, um zu erkennen, welche Komponenten tatsächlich verwendet werden, und generiert nur das erforderliche CSS für diese Komponenten (einschließlich ihrer Abhängigkeiten).

  • Standard: false
  • Type: boolean | string[] (englisch)

**Enable automatische Erkennung: **

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

**Fügen Sie zusätzliche Komponenten für die dynamische Nutzung hinzu: **

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: ['Modal', 'DropdownMenu', 'Popover']
    }
  }
})
Bei der Bereitstellung eines Arrays von Komponentennamen ist die automatische Erkennung aktiviert und diese Komponenten (zusammen mit ihren Abhängigkeiten) werden garantiert einbezogen. Dies ist nützlich für dynamische Komponenten wie <component :is="..." />, die nicht statisch analysiert werden können.

Continuous Releases (Kontinuierliche Releases)

Die Benutzeroberfläche von Nuxt verwendet pkg.pr.new für kontinuierliche Vorschauversionen und bietet Entwicklern sofortigen Zugriff auf die neuesten Funktionen und Fehlerbehebungen, ohne auf offizielle Veröffentlichungen warten zu müssen.

Automatische Vorschau-Releases werden für alle Commits und PRs im v4-Zweig erstellt. Verwenden Sie sie, indem Sie Ihre Paketversion durch den spezifischen Commit-Hash oder die PR-Nummer ersetzen.

package.json
{
  "dependencies": {
-   "@nuxt/ui": "^4.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}
pkg.pr.new kommentiert PRs automatisch mit der Installations-URL, sodass Änderungen einfach getestet werden können.

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.