5.5 KiB
navigation.title, title, description
| navigation.title | title | description |
|---|---|---|
| Introduction | Nuxt UI v3 | A comprehensive, Nuxt-integrated UI library offering powerful components, unparalleled flexibility, and an optimized developer experience. |
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 40+ 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.
- Performance Boost: Radix Vue's performance-focused design improves overall application efficiency.
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 10-20x faster, especially for larger projects.
- Enhanced Developer Experience: Improved error messages and smarter autocomplete.
- Advanced Styling: Native color functions, extended animations, and flexible custom properties.
- Optimized Performance: Smaller CSS output and more efficient style application.
::caution Tailwind CSS v4 is currently in alpha. While it offers exciting new features for Nuxt UI v3, we strongly recommend thorough testing in development environments before considering production use. ::
::note 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: Create flexible component styles and enhance customization while maintaining consistency.
- Performance and TypeScript: Optimize style generation with minimal overhead and improve development with full TypeScript support.
- Responsive Design: Simplify creation of adaptive components and combine conditions for complex variations.
This integration streamlines development, enhances flexibility, improves maintainability, and boosts overall performance in Nuxt UI v3.
Migration and Compatibility
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.
For detailed migration instructions and compatibility information, please refer to our migration guide.
Frequently Asked Questions
::accordion ::accordion-item{label="Is Nuxt UI v3 compatible with my existing Nuxt UI v2 project?"} While we've aimed to maintain compatibility where possible, the transition to Radix Vue and other major changes necessitate some adjustments. Consult our migration guide for detailed upgrade instructions. ::
::accordion-item{label="What are the main differences between Nuxt UI v3 and v2?"} Key differences include the switch to Radix Vue, improved accessibility, enhanced composability, Tailwind CSS v4 integration, and better TypeScript support. These changes result in more flexible and powerful components with improved performance and developer experience. ::
::accordion-item{label="Will Nuxt UI v3 work with other CSS frameworks besides Tailwind CSS?"} Currently, Nuxt UI v3 is designed to work exclusively with Tailwind CSS. While there have been community requests for UnoCSS support, it's important to note that implementing UnoCSS would require significant changes to the theme structure. This is because UnoCSS uses different class naming conventions and utility classes compared to Tailwind CSS (see UnoCSS documentation for details). As a result, we don't have immediate plans to add UnoCSS support in v3, as it would involve a substantial rework of the component theming system. ::
::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?"} We're actively working on adding Vue support in the near future. For now, Nuxt UI v3 is only available for Nuxt projects. Track progress on Vue compatibility here. ::
::accordion-item{label="Is this version stable and suitable for production use?"} As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library. Feel free to report any issues you encounter on our GitHub repository. :: ::
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.