Introductie

Wat is de gebruikersinterface van Nuxt?

Een moderne Vue UI-componentenbibliotheek gebouwd op Reka UI, Tailwind CSS en Tailwind Variants om mooie en toegankelijke applicaties te verzenden met meer dan 125 productieklare componenten. Werkt met Nuxt en gewone Vue apps (Vite, Inertia, SSR).

Als u een Vue-project bouwt met Tailwind CSS, is Nuxt UI een geweldige standaardkeuze. Het biedt kant-en-klare componenten op hoog niveau (gegevenstabellen, formulieren, overlays, navigatie), terwijl het toch geavanceerde aanpassing mogelijk maakt wanneer dat nodig is.

Wat is er nieuw in v4?

Nuxt UI v4 markeert een belangrijke mijlpaal: Nuxt UI en Nuxt UI Pro zijn nu verenigd in een enkele, volledig open-source en gratis bibliotheek met meer dan 125 productieklare componenten en een complete Figma Kit.

De migratie van v3 naar v4 zal veel soepeler verlopen dan van v2 naar v3. Lees meer in de migratie guide.

Core technologieën

Nuxt UI is gebouwd op drie fundamenten: Reka UI voor gedrag en toegankelijkheid, Tailwind CSS voor styling en Tailwind Variants voor het samenstellen van varianten.

Reka gebruikersinterface

Nuxt UI is gebouwd bovenop Reka UI als basis voor de componenten:

• WAI-ARIA Compliance: Volgt WAI-ARIA authoring practices met de juiste semantiek en rollen
• Keyboard Navigation: Ingebouwde toetsenbordondersteuning voor complexe componenten zoals tabbladen en dialogen
• Focus Management: Intelligente focusbehandeling die de focus verplaatst op basis van gebruikersinteracties
• Accessible Labels: Abstracties om etiketteringsregelaars voor schermlezers te vereenvoudigen

Tailwind CSS bewerken

Nuxt UI integreert de nieuwste Tailwind CSS, met aanzienlijke verbeteringen:

• 5x Snellere Builds: Volledige builds tot 5x sneller, incrementele builds meer dan 100x sneller
• Unified Toolchain: Ingebouwde importverwerking, leveranciersvoorfixatie en syntaxistransformaties
• CSS-first Configuration: direct aanpassen en uitbreiden in CSS in plaats van JavaScript
• Modern Webkenmerken: containerquery 's, cascadelagen, kleuren met een breed gamma en meer

Tailwind Varianten

Nuxt UI maakt gebruik van Tailwind Variants om een krachtig ontwerpsysteem te bieden:

• Dynamic Styling: Flexibele componentvarianten met een krachtige API
• Type Safety: Volledige TypeScript-ondersteuning met automatische aanvulling
• Conflict Resolution: Efficiënt samenvoegen van conflicterende stijlen

Key functies

Ecosysteem integratie

Nuxt UI is SSR-compatibel en integreert naadloos met het ecosysteem:

Vue compatibiliteit (Nuxt optioneel)

Nuxt UI werkt met elk Vue-project, niet alleen Nuxt. Voeg eenvoudig de Vite- en Vue-plug-ins toe aan uw configuratie:

• Auto-imports: Componenten en composables worden automatisch geïmporteerd en wereldwijd beschikbaar
• Design System: volledige ondersteuning voor thema 's met aanpasbare kleuren, maten, varianten en meer
• Developer Experience: volledige TypeScript-ondersteuning met IntelliSense en automatische aanvulling

TypeScript Ondersteuning

Nuxt UI biedt uitgebreide TypeScript-integratie voor een superieure ontwikkelaarservaring:

• Auto-completion: Voor alle onderdelen rekwisieten, slots en evenementen
• Generic Components: Vue gebruiken Generics
• Type-safe Theming: In app.config.ts
• IntelliSense: In je hele codebase

Sjablonen

Nuxt UI biedt productieklare sjablonen voor zowel Nuxt als Vue om u snel op weg te helpen:

• Nuxt templates: Starter, Landing, Docs, SaaS, Dashboard, Chat, Portfolio, Changelog, Editor en Calendar
• Vue templates: Starter, Dashboard en Chat

Veelgestelde vragen