Installatie

Sjabloon
Leer hoe u Nuxt UI installeert en configureert in uw Nuxt-applicatie.

Opstelling

Toevoegen aan een Nuxt-project

Installeer het Nuxt UI-pakket

pnpm add @nuxt/ui tailwindcss

Voeg de Nuxt UI module toe aan uw nuxt.config.ts

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
Het is niet nodig om @nuxt/icon, @nuxt/fonts of @nuxtjs/color-mode aan uw modules array toe te voegen, aangezien Nuxt UI ze automatisch registreert. U kunt deze modules nog steeds configureren in uw nuxt.config.ts met behulp van de icon, fonts en colorMode toetsen.

Importeer Tailwind CSS en Nuxt UI in uw CSS

@import "tailwindcss";
@import "@nuxt/ui";
Wanneer u Nuxt Layers gebruikt, genereert de module automatisch @source richtlijnen voor elke laagmap, zodat Tailwind CSS al uw laagbronbestanden scant op hulpprogramma-klassen.
Het wordt aanbevolen om de Tailwind CSS IntelliSense extensie voor VSCode te installeren en de volgende instellingen toe te voegen:
.vscode/settings.json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.classFunctions": ["defineAppConfig"]
}

Wikkel uw app met App-component

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
De App-component stelt globale configuratie in en is vereist voor Toast, Tooltip en programmatic overlays.

Een Nuxt-sjabloon gebruiken

Ga aan de slag met een van onze official templates met behulp van de Use this template knop op GitHub of de CLI:

npm create nuxt@latest -- -t ui

Starter

Een minimale sjabloon om aan de slag te gaan met Nuxt UI.

Landing

Een moderne sjabloon voor bestemmingspagina 's, mogelijk gemaakt door Nuxt Content.

Docs

Een documentatiesjabloon aangedreven door Nuxt Content.

SaaS

Een SaaS-sjabloon met landing, prijzen, documenten en blog aangedreven door Nuxt Content.

Dashboard

Een dashboardsjabloon met lay-out met meerdere kolommen voor het bouwen van geavanceerde beheerdersinterfaces.

Chat

Een AI-chatbot-sjabloon om uw eigen chatbot te bouwen, mogelijk gemaakt door Vercel AI SDK.

Portfolio

Een gestroomlijnd portfoliosjabloon om uw werk, vaardigheden en blog te laten zien, mogelijk gemaakt door Nuxt Content.

Changelog

Een changelog-sjabloon om uw repository weer te geven, geeft notities vrij van GitHub, mogelijk gemaakt door Comark.

Editor

Een rich text editor-sjabloon aangedreven door TipTap met ondersteuning voor markdown, HTML en JSON-inhoudstypen.

Calendar

Een op Apple Agenda geïnspireerde sjabloon met dag-, week- en maandweergaven, slepen en neerzetten en optimistische updates.

Opties

U kunt Nuxt UI aanpassen door opties aan te bieden in uw nuxt.config.ts.

prefix

Gebruik de optie prefix om het voorvoegsel van de componenten te wijzigen.

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

fonts

Gebruik de optie fonts om de @nuxt/fonts in of uit te schakelen.

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

colorMode

Gebruik de optie colorMode om de @nuxt/color-mode module in of uit te schakelen.

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

theme.colors

Gebruik de optie theme.colors om de dynamische kleuraliassen te definiëren die worden gebruikt om het componententhema te genereren.

  • Standaard: ['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']
    }
  }
})
Elke alias genereert een volledige set --ui-color-*-tinten en varianten in de componentthema 's met kleurvarianten, of uw app deze nu gebruikt of niet. Knip de lijst bij naar de aliassen die u daadwerkelijk gebruikt en bewaar error als u formulieren gebruikt, aangezien validatiestijlen erop vertrouwen.
Lees meer over kleuraanpassing en thema 's in de sectie Thema.

theme.transitions

Gebruik de optie theme.transitions om overgangen op componenten in of uit te schakelen.

  • Standaard: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
Deze optie voegt de klasse transition-colors toe aan componenten met zweef- of actieve toestanden.

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

Gebruik de optie theme.unstyled om alle standaard themaklassen uit componenten te verwijderen, waarbij alleen de structuur en de klassen die u via class, ui of app.config.ui aanbiedt behouden blijven.

  • Standaard: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      unstyled: true
    }
  }
})
Dit verwijdert ook structural klassen (positionering, overgangen, flex / grid), niet alleen cosmetische. Lay-out-zware componenten zoals Modal, Drawer of Calendar hebben je nodig om hun lay-out opnieuw te leveren, vergelijkbaar met de ongestyleerde modus van PrimeVue.

theme.defaultVariants

Gebruik de optie theme.defaultVariants om de standaard color- en size-varianten voor componenten te overschrijven.

Alleen defaults die exact primary of md zijn worden vervangen, dus Avatar houdt color: 'neutral' en Separator houdt size: 'xs'.

  • Standaard: { 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"}

Gebruik de optie theme.prefix om hetzelfde voorvoegsel te configureren dat u hebt ingesteld op uw Tailwind CSS-import. Dit zorgt ervoor dat Nuxt UI-componenten de juiste voorgeprogrammeerde hulpprogramma-klassen en CSS-variabelen gebruiken.

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})
Mogelijk moet u fonts.processCSSVariables inschakelen om de prefix-optie met de @nuxt/fonts-module te gebruiken:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  },
  fonts: {
    processCSSVariables: true
  }
})

Dit zal automatisch alle Tailwind-nutsklassen en CSS-variabelen in Nuxt UI-componentthema 's prefixeren:

<!-- 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>
Lees meer over het gebruik van een voorvoegsel in de Tailwind CSS-documentatie.

prose

Gebruik de optie prose om de import van Nuxt UI Prose te forceren components zelfs als @nuxtjs/mdc, @nuxt/content of @comark/nuxt niet is geïnstalleerd.

  • Standaard: 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"}

Gebruik in plaats daarvan de prose optie.

content

Gebruik de content optie om de import van de Nuxt UI proza en content componenten te forceren, zelfs als @nuxt/content niet is geïnstalleerd.

  • Standaard: 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"}

Gebruik de optie experimental.componentDetection om automatische componentdetectie in te schakelen voor het schudden van bomen. Deze functie scant uw broncode om te detecteren welke componenten daadwerkelijk worden gebruikt en genereert alleen de benodigde CSS voor die componenten (inclusief hun afhankelijkheden).

  • Standaard: false
  • Type: boolean | string[]

**Automatische detectie inschakelen: **

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

**Inclusief extra componenten voor dynamisch gebruik: **

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: ['Modal', 'DropdownMenu', 'Popover']
    }
  }
})
Bij het verstrekken van een reeks componentnamen is automatische detectie ingeschakeld en worden deze componenten (samen met hun afhankelijkheden) gegarandeerd opgenomen. Dit is handig voor dynamische componenten zoals <component :is="..." /> die niet statisch kunnen worden geanalyseerd.

Continue versies

Nuxt UI gebruikt pkg.pr.new voor continue preview-releases, waardoor ontwikkelaars direct toegang hebben tot de nieuwste functies en bugfixes zonder te wachten op officiële releases.

Automatische preview-releases worden gemaakt voor alle commits en PR 's naar de v4-branch. Gebruik ze door uw pakketversie te vervangen door de specifieke commit-hash of PR-nummer.

package.json
{
  "dependencies": {
-   "@nuxt/ui": "^4.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}
pkg.pr.new zal automatisch reageren op PR 's met de installatie-URL, waardoor het gemakkelijk is om wijzigingen te testen.

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.