v3.0.0-alpha.9

Nuxt UI v3

A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

We're thrilled to introduce this major update to our UI library, bringing significant improvements and powerful new features. Nuxt UI v3 represents a leap forward in creating robust, accessible, and highly customizable user interfaces for Nuxt applications.

What's New in v3?

Radix Vue

We've transitioned from Headless UI to Radix Vue as our core component foundation. This shift brings several key advantages:

  • Extensive Component Library: With 55+ primitives, Radix Vue significantly expands our component offerings.
  • Active Development: Radix Vue's growing popularity ensures ongoing improvements and updates.
  • Enhanced Accessibility: Built-in accessibility features align with our commitment to inclusive design.
  • Vue 3 Optimization: Seamless integration with Vue 3 and the Composition API.

This transition empowers Nuxt UI to become a more comprehensive and flexible UI library, offering developers greater power and customization options.

Tailwind CSS v4

Nuxt UI v3 integrates the latest Tailwind CSS v4 alpha (announced March 6, 2024), bringing significant improvements:

  • Faster Builds: Up to 10x faster, especially for larger projects.
  • Unified Toolchain: Built-in features like vendor prefixing, nesting support, and modern CSS transforms.
  • CSS-First Configuration: New @theme directive for easy customization without JavaScript.
  • Optimized Performance: Smaller engine footprint and more efficient processing.
For a comprehensive overview of Tailwind CSS v4 alpha features, visit the official announcement.

Tailwind Variants

We've adopted Tailwind Variants to manage our design system, offering:

  • Dynamic Styling: Flexible component variants with a powerful API
  • Type Safety: Full TypeScript support with auto-completion
  • Conflict Resolution: Efficient merging of conflicting styles

This integration unifies the styling of components, ensuring consistency and code maintainability.

TypeScript Integration

Nuxt UI v3 offers significantly improved TypeScript integration, providing a superior developer experience:

  • Enhanced Auto-completion:
    • Full auto-completion for component props based on your theme
    • Intelligent suggestions for app.config.ts theme configuration
  • Generic-based Components:
    • Built using Vue 3 Generics
    • Improved type inference for slots and events
  • Type-safe Theming:
    • Leveraging Tailwind Variants for type-safe styling options
    • Customizable types for extended theme configurations
Check out an example of the Accordion component with auto-completion for props and slots.

Vue compatibility

You can now use Nuxt UI in any Vue project without Nuxt by adding the Vite and Vue plugins to your configuration. This provides:

  • Auto-imports: Components and composables are automatically imported and available globally
  • Theming System: Full theming support with customizable colors, sizes, variants and more
  • Developer Experience: Complete TypeScript support with IntelliSense and auto-completion
Learn how to install and configure Nuxt UI in a Vue project in the Vue installation guide.

Migration

We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities.

Key points to consider:

  • A comprehensive migration guide will be available in the coming weeks.
  • Review the new documentation and components carefully before attempting to upgrade.
  • If you encounter any issues, please report them on our GitHub repository.

FAQ

We're excited about the possibilities Nuxt UI v3 brings to your projects. Explore our documentation to learn more about new features, components, and best practices for building powerful, accessible user interfaces with Nuxt UI v3.

 

Introduction

A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.