Description
The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.
A lot has changed since @nuxt/ui was made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config.
I'll post regular updates on this issue and on https://twitter.com/benjamincanac.
Documentation
Roadmap (Nov 20, 2024)
- Finish the migration to
reka-ui@alphaon@nuxt/ui&@nuxt/ui-profeat(module)!: migrate toreka-ui#2448 - Write the docs for implemented
@nuxt/ui-procomponents - Finish
@nuxt/ui-procomponents - Make Nuxt UI Pro v3 work with Vue like Nuxt UI https://github.com/nuxt/ui-pro/pull/742
- Implement new components in
@nuxt/uilike - Migrate all the Nuxt UI Pro templates
- Starter
- Landing
- Docs
- SaaS feat: migrate to
@nuxt/ui-proand@nuxt/contentv3 nuxt-ui-pro/saas#86 - Dashboard feat: migrate to
@nuxt/ui-prov3 nuxt-ui-pro/dashboard#86
- Build the Nuxt UI docs marketing pages
- Landing
- Figma
- Pro -> Landing
- Pro -> Pricing
- Pro -> Templates
- Pro -> Activate
- Releases
- Write migration guide https://ui3.nuxt.dev/getting-started/migration
- Release
@nuxt/ui&@nuxt/ui-proofficially oncetailwindcssandreka-uiare released - Migrate all the Nuxt apps (nuxt.com, image.nuxt.com, eslint.nuxt.com, devtools.nuxt.com, fonts.nuxt.com, hub.nuxt.com, nuxt.studio, etc.)
- Implement new
@nuxt/ui&@nuxt/ui-procomponents - Create new templates like Changelog, Portfolio, etc.
Breaking Changes
The biggest change is the switch to tailwind-variants, this will cause lots of breaking changes if you've used the ui prop or app.config.ts to override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.
At the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced
tailwind-mergewhich now allows us to group those keys together, this is a good opportunity to clean the whole thing.
The config will now have a slots amongst other keys that will specifically target dom nodes. The ui prop will only allow you to target those slots.
These changes alongside the refactor of all components will also improve the types, the app.config.ts and ui props are now perfectly typed, as well as all components props, slots, emits and expose.
Feel free to comment on this if you have any ideas for the next major.
### Components
- [x] Accordion
- [x] Alert
- [x] Avatar
- [x] AvatarGroup
- [x] Badge
- [x] Breadcrumb
- [x] Button
- [x] ButtonGroup
- [x] Card
- [x] Carousel
- [x] Checkbox
- [x] Chip
- [x] Collapsible
- [x] CommandPalette
- [x] Container
- [x] ContextMenu
- [x] Drawer
- [x] DropdownMenu (Dropdown)
- [x] Form
- [x] FormField (FormGroup)
- [x] Icon
- [x] Input
- [x] InputMenu
- [x] Kbd
- [x] Link
- [x] Modal
- [x] NavigationMenu (HorizontalNavigation/VerticalNavigation)
- [x] Pagination
- [x] Popover
- [x] Progress
- [x] Provider
- [x] RadioGroup
- [x] Select
- [x] SelectMenu
- [x] Separator (Divider)
- [x] Skeleton
- [x] Slideover
- [x] Slider (Range)
- [x] Table
- [x] Tabs
- [x] Textarea
- [x] Toast (Notification)
- [x] Switch (Toggle)
- [x] Tooltip