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@alpha
on@nuxt/ui
&@nuxt/ui-pro
feat(module)!: migrate toreka-ui
#2448 - Write the docs for implemented
@nuxt/ui-pro
components - Finish
@nuxt/ui-pro
components - Make Nuxt UI Pro v3 work with Vue like Nuxt UI https://github.com/nuxt/ui-pro/pull/742
- Implement new components in
@nuxt/ui
like - Migrate all the Nuxt UI Pro templates
- Starter
- Landing
- Docs
- SaaS feat: migrate to
@nuxt/ui-pro
and@nuxt/content
v3 nuxt-ui-pro/saas#86 - Dashboard feat: migrate to
@nuxt/ui-pro
v3 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-pro
officially oncetailwindcss
andreka-ui
are 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-pro
components - 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-merge
which 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