-
Notifications
You must be signed in to change notification settings - Fork 586
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cf92c5f
commit ea8a083
Showing
1 changed file
with
41 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,80 @@ | ||
| --- | ||
| title: Introduction | ||
| description: Nuxt UI v3 - A powerful, Nuxt-integrated design system with enhanced components, flexibility, and developer experience. | ||
| navigation.title: Introduction | ||
| title: Nuxt UI v3 | ||
| description: A comprehensive, Nuxt-integrated UI library offering powerful components, unparalleled flexibility, and an optimized developer experience. | ||
| --- | ||
|
|
||
| Welcome to Nuxt UI v3 beta! We're thrilled to introduce this major update to our UI library, bringing significant improvements and powerful new features tailored specifically for Nuxt 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? | ||
|
|
||
| ### Migration from Headless UI to Radix Vue | ||
| In v3, we've transitioned from Headless UI to Radix Vue as our core component foundation. This change brings several benefits: | ||
| ### Radix Vue | ||
|
|
||
| - **Improved Accessibility**: WAI-ARIA compliant components with built-in keyboard navigation and focus management. | ||
| - **Enhanced Composability**: Unstyled, primitive components for greater flexibility and customization. | ||
| - **Vue and Nuxt Compatibility**: Seamless integration with Vue and Nuxt ecosystems. | ||
| - **Consistent API**: Enjoy a more unified and intuitive API across all components. | ||
| - **Active Development**: Benefit from ongoing improvements and new features in the Radix Vue ecosystem. | ||
| We've transitioned from [Headless UI](https://headlessui.com/) to [Radix Vue](https://www.radix-vue.com/) as our core component foundation. This shift brings several key advantages: | ||
|
|
||
| While this change may require some adjustments in your existing code, it significantly enhances the overall quality and capabilities of Nuxt UI. | ||
| - **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. | ||
|
|
||
| ### Tailwind CSS v4 Integration | ||
| Leverage the latest Tailwind CSS features for efficient styling and a streamlined development process. | ||
| This transition empowers Nuxt UI to become a more comprehensive and flexible UI library, offering developers greater power and customization options. | ||
|
|
||
| ### Tailwind Variants Support | ||
| Create dynamic variants easily, allowing for more expressive and flexible component styling. | ||
| ### Tailwind CSS v4 | ||
|
|
||
| ### Enhanced TypeScript Support | ||
| Enjoy improved type safety and an enhanced developer experience with our Nuxt-specific TypeScript optimizations. | ||
| Nuxt UI v3 integrates the latest Tailwind CSS v4 alpha (announced March 6, 2024), bringing significant improvements: | ||
|
|
||
| ## Why Choose Nuxt UI v3? | ||
| - **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. | ||
|
|
||
| Nuxt UI v3 offers several advantages over using Radix Vue or Shadcn-vue directly: | ||
|
|
||
| - **Nuxt-Specific Integration**: Seamless compatibility with Nuxt features like auto-imports and server-side rendering. | ||
| - **Pre-Styled, Customizable Components**: A complete set of components adhering to a cohesive design system, ready for use and customization. | ||
| - **Dark Mode Support**: Built-in, easy-to-implement dark mode for your entire application. | ||
| - **Nuxt Ecosystem Alignment**: Regular updates in sync with Nuxt releases, ensuring long-term compatibility. | ||
| - **Comprehensive Nuxt Documentation**: Detailed guides and examples specifically for Nuxt developers. | ||
|
|
||
| ## Upcoming Vue Support | ||
| ::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. | ||
| :: | ||
|
|
||
| We're excited to announce that in the near future, Nuxt UI v3 will also support Vue applications! This expansion will allow Vue developers to leverage the power and flexibility of Nuxt UI components in their projects, regardless of whether they're using Nuxt or standalone Vue. | ||
| ::note | ||
| For a comprehensive overview of Tailwind CSS v4 alpha features, visit the [official announcement](https://tailwindcss.com/blog/tailwindcss-v4-alpha). | ||
| :: | ||
|
|
||
| Key points about the upcoming Vue support: | ||
| ### Tailwind Variants | ||
|
|
||
| - **Seamless Integration**: Use Nuxt UI components in your Vue projects with the same ease as in Nuxt applications. | ||
| - **Consistent API**: Enjoy the same intuitive API and component structure across both Vue and Nuxt projects. | ||
| - **Performance Optimizations**: Benefit from performance enhancements tailored for Vue applications. | ||
| - **Expanded Ecosystem**: Join a larger community of developers using Nuxt UI across different Vue-based projects. | ||
| We've adopted [Tailwind Variants](https://github.com/nextui-org/tailwind-variants) to manage our design system, offering: | ||
|
|
||
| Stay tuned for updates on the release of Vue support! | ||
| - **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. | ||
|
|
||
| ## Key Features | ||
| This integration streamlines development, enhances flexibility, improves maintainability, and boosts overall performance in Nuxt UI v3. | ||
|
|
||
| - **Fully Customizable**: Tailor components to fit your brand and design needs. | ||
| - **Responsive Design**: Create adaptive UIs across various device sizes. | ||
| - **Accessibility Focus**: Ensure your applications are usable by everyone. | ||
| - **TypeScript Support**: Enhanced type safety for Nuxt projects. | ||
| ## Migration and Compatibility | ||
|
|
||
| ## Getting Started | ||
| 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. | ||
|
|
||
| Ready to dive in? Follow our [installation guide](/getting-started/installation) to start using Nuxt UI v3 in your project. If you're upgrading from v2, check out our [migration guide](/getting-started/migration). | ||
| For detailed migration instructions and compatibility information, please refer to our [migration guide](/getting-started/migration). | ||
|
|
||
| ## Frequently Asked Questions | ||
|
|
||
| ::accordion | ||
| ::accordion-item{label="Is Nuxt UI v3 compatible with my existing Nuxt UI v2 project?"} | ||
| While `Nuxt UI v3` introduces significant changes, we've aimed to maintain as much compatibility as possible. However, due to the transition from Headless UI to Radix Vue, some adjustments may be necessary. Please refer to our [migration guide](/getting-started/migration) for detailed information on upgrading your 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](/getting-started/migration) for detailed upgrade instructions. | ||
| :: | ||
|
|
||
| ::accordion-item{label="What are the main differences between Nuxt UI v3 and v2?"} | ||
| The key differences include the transition from Headless UI to Radix Vue, improved accessibility, enhanced composability, Tailwind CSS v4 integration, and improved TypeScript support. These changes result in more flexible and powerful components with better performance and developer experience. | ||
| 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?"} | ||
| While Nuxt UI v3 is optimized for use with Tailwind CSS, the core components based on Radix Vue are unstyled. This means you can potentially use them with other CSS frameworks, although you may need to provide your own styling. | ||
| 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](https://unocss.dev/) 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="How does the upcoming Vue support differ from the current Nuxt support?"} | ||
| The upcoming Vue support will allow you to use Nuxt UI components in standalone Vue projects without the Nuxt framework. The core functionality and API of the components will remain the same, but some Nuxt-specific features may not be available in Vue-only projects. | ||
| ::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](https://github.com/nuxt/ui/issues/2129). | ||
| :: | ||
|
|
||
| ::accordion-item{label="Is Nuxt UI v3 suitable for production use?"} | ||
| As Nuxt UI v3 is currently in beta, we recommend thorough testing before using it in production environments. We're actively working on stabilizing the library and appreciate any feedback from early adopters. | ||
| ::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](https://github.com/nuxt/ui/issues). | ||
| :: | ||
| :: | ||
|
|
||
| ## Feedback and Contributions | ||
|
|
||
| Your input is invaluable as we refine Nuxt UI v3: | ||
|
|
||
| - Report issues or suggest improvements on our [GitHub repository](https://github.com/nuxt/ui) | ||
| - Join our [Discord community](https://discord.com/invite/nuxt) for discussions and support | ||
| - Follow us on [Twitter](https://twitter.com/nuxt_js) for the latest updates | ||
|
|
||
| Stay tuned for more exciting updates as we work towards the final release of Nuxt UI v3! | ||
| 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. |