v3.0.0-alpha.10

✨ Highlights

Reka UI

With #2448, Nuxt UI v3 is now using Reka UI v1.0.0-alpha.6: the new major of Radix Vue which brings significant improvements.

However, there are a few breaking changes:

Checkbox

• The indeterminate prop has been removed in favor of v-model / default-value: boolean | "indeterminate"

CommandPalette

• The filter field on groups has been renamed to ignoreFilter for consistency

InputMenu/SelectMenu

• The filter prop has been removed in favor of ignore-filter & filter-fields
• The create-item prop no longer assign to v-model to provide more flexibility when working with objects. You have to do it yourself in the @create event which now receive only the typed string as argument.

Tabs

• The content of inactive items is no longer rendered when unmounted by default, use :unmount-on-hide="false" to get the same result

---

You can read the Reka UI migration guide if you're interested: https://reka-ui.com/docs/guides/migration#form-component although most of the changes have been done internally.

Calendar

A new Calendar component has been introduced: https://ui3.nuxt.dev/components/calendar

ColorPicker

A new ColorPicker component has been introduced: https://ui3.nuxt.dev/components/color-picker

Stepper

A new Stepper component has been introduced: https://ui3.nuxt.dev/components/stepper

🚀 Features

• Avatar: add default slot for fallback (b741ef3)
• Calendar: add icon props (#2778) (0f64802)
• Calendar: implement component (#2618) (2e9aeb5)
• ColorPicker: implement component (#2670) (e475b64)
• CommandPalette: add active field on items for consistency (3765537)
• css: use color-scheme utilities on body (a2512f6)
• i18n: add Dutch locale (#2728) (3baddfd)
• i18n: add Turkish locale (#2716) (de8228e)
• locale: add Brazilian Portuguese language (#2825) (b7ff7d8)
• locale: add Japanese language (#2794) (ecc4755)
• locale: add Portuguese language (#2855) (8b5d412)
• locale: add Slovak language (#2821) (68a10f0)
• locale: translate Korean (#2703) (2cbf83e)
• module: migrate to reka-ui (#2448) (81ac076)
• NavigationMenu: handle item.trailingIcon display (4b653ef)
• Stepper: new component (#2733) (6484d01)
• Table: handle meta.class on th and td (#2790) (004a577)

🐛 Bug Fixes

• Breadcrumb: missing aria-hidden on presentation items (a7a1227), closes #2725
• Calendar: handle icons in RTL mode (#2770) (e7b69b7)
• Calendar: omit as / asChild props (9478fc0)
• ColorPicker: handle RTL mode (#2858) (f98b91c)
• CommandPalette: keep ignoreFilter groups at their place (#2833) (3b9ca22)
• components: apply class on trigger instead of content when present (a6ecef0), closes #2132
• components: specify collisionPadding to all menus (148b024)
• defineShortcuts: return useEventListener to unregister the listener (80befc1), closes #2031
• devtools: error with renderer when colorMode is disabled (#2792) (f06fbaf)
• Form: resolve async validation in yup & issue directly mutate state (#2702) (c9806da)
• icons: make loading icon clockwise (#2797) (bc2bcb3)
• Link: partial query match for Vue (#2787) (a6c2205)
• locale: improve German translation (#2826) (c440c91)
• Modal: prevent from going out of screen (b7ba2c7), closes #2711
• NavigationMenu: wrong badge class (86f2b48), closes #2766
• Progress: handle horizontal animation in RTL mode (#2723) (0baa3a0)
• Stepper: handle RTL mode (#2844) (198d04d)
• Stepper: missing import (816bb69)
• Table: handle loading animation in RTL mode (#2771) (b1550d5)
• Tabs: prevent hover on disabled (a938d24)
• Tabs: truncate not working (c1ff978)
• types: handle array of strings in AppConfig (#2854) (4b241ba)
• useLocale: update locale import to enable tree shaking (#2735) (3bccb67)

👋 New Contributors

• @hasanmumin made their first contribution in #2716
• @Arcitezz made their first contribution in #2728
• @AnOrdinaryPeople made their first contribution in #2735
• @kotering made their first contribution in #2794
• @jakubkoje made their first contribution in #2821
• @phbe made their first contribution in #2826
• @ChristopheCVB made their first contribution in #2854

Full Changelog: v3.0.0-alpha.9...v3.0.0-alpha.10

v2.20.0

⚠️ Breaking Changes

• Form: resolve async validation in yup & issue directly mutate state (#2701)

🚀 Features

• Accordion: add close event (#2750) (419a24f)
• Badge: handle icon prop (#2594) (0d1a76e)
• InputMenu/SelectMenu: add support for dot notation in by prop (#2607) (53df9d9)
• Link: allow partial query match for activeClass (#2663) (03e24f4)
• Notification: add pauseTimeoutOnHover prop (#2661) (11b8c3d)
• Table: add contextmenu handling to table rows (#2283) (c9e6256)
• Table: add custom @select:all event (#2581) (ac323c4)
• Table: allow dynamically render checkbox (#2549) (d6daf46)

🐛 Bug Fixes

• AvatarGroup/ButtonGroup/MeterGroup: allow deeply partial ui config (#2542) (bf58086)
• Carousel: wrong ui type with strategy (07ef771)
• components: replace as const with correct type in config (#2652) (51c8b8e)
• DatePicker: undefined dayIndex (#2545) (ce955d2)
• Form: resolve async validation in yup & issue directly mutate state (#2701) (f3632dd)
• Form: use parsed value from joi instead of original state (#2587) (acecff4)
• InputMenu/SelectMenu: use by prop to compare objects & support dot notation in value-attribute (#2566) (7154254)
• Link: exactQuery prop type (#2781) (4cde571)
• Notification: element renders even when no notification is present (#2561) (d4e408c)
• Table: data outdated when rows change (#2600) (b23f2de)
• Table: missing type on props loadingState (#2551) (6e66990)
• Table: prevent onClick while blocking element (#2592) (9703786)
• types: improve DeepPartial type for App Config (#2621) (976b03f)

👋 New Contributors

• @Snack-X made their first contribution in #2542
• @nfpocket made their first contribution in #2283
• @julien1619 made their first contribution in #2621
• @jcahal made their first contribution in #2653
• @gioboa made their first contribution in #2652
• @Jevin0 made their first contribution in #2714
• @hansemannn made their first contribution in #2750
• @HarshPatel5940 made their first contribution in #2661

Full Changelog: v2.19.2...v2.20.0

v3.0.0-alpha.9

This release is based on latest [email protected] and [email protected].

✨ Highlights

Internationalization (i18n)

Nuxt UI v3 now supports internationalization for Nuxt and Vue with automatic direction (ltr / rtl) and already 12 locales translated.

You can read more on https://ui3.nuxt.dev/getting-started/i18n/nuxt

InputNumber

A new InputNumber component based on https://www.radix-vue.com/components/number-field.html.

You can read more on https://ui3.nuxt.dev/components/input-number

PinInput

A new PinInput component based on https://www.radix-vue.com/components/pin-input.html

You can read more on https://ui3.nuxt.dev/components/pin-input

🚀 Features

• css: add --ui-bg-muted / --ui-border-muted variables (7f6db45)
• Form: apply transformations (#2550) (75c5e87)
• FormField: add error-pattern prop (#2601) (143612e)
• InputMenu/SelectMenu: add create-item prop (#2472) (f516d7b)
• InputNumber: implement component (#2577) (bd2f077)
• Link: allow partial query match for its active state (#2664) (7329900)
• locale: add Persian language (#2682) (14fb21b)
• locale: add Polish language (#2678) (2fc36c8)
• locale: add support for Arabic (#2582) (602a667)
• locale: add support for Czech (#2593) (4889d30)
• locale: add support for Italian (#2583) (4fbbb25)
• locale: translate Chinese (#2580) (febda5c)
• locale: translate Spanish (#2644) (8ed434c)
• module: support i18n in components (#2553) (2636240)
• NavigationMenu: control items open & defaultOpen on vertical (30218f1), closes #2608
• PinInput: implement component (#2570) (95aa6f6)
• Popover: add prevent-close prop (ea97759), closes #2245
• SelectMenu: use UInput in search to handle props like icon (ff1e079), closes #2021
• Table: add caption prop (446f9c1)

🐛 Bug Fixes

• App: missing vue imports (ddb4690)
• App: remove dir prop (#2630) (7cc26d0)
• Breadcrumb/Carousel/Pagination: handle icons in RTL mode (#2633) (e5119a9)
• Breadcrumb: render as nav (756f791), closes #2649
• Button: improve neutral solid variant hover (8d85498)
• Carousel: use dir from locale (#2647) (1fbbfe8)
• ContextMenu/DropdownMenu: relative imports with prefix (47f58f5)
• css: --font-family-sans renamed to --font-sans (#2680) (b2fa657)
• css: remove useless spacing override (8d00265)
• FormField: missing conditions to apply container classes (#2631) (9241ba1)
• Form: match error-pattern on input validation (#2606) (3584a33)
• InputMenu/SelectMenu: init filter with labelKey (18931ac)
• InputMenu/SelectMenu: look in items only with value-attribute (0ceafe1), closes #2464
• InputMenu/SelectMenu: multiple not working with generic boolean casting (503f701), closes #2541
• InputMenu/SelectMenu: use isEqual from ohash (f943f88)
• Link: missing relative import (#2588) (95a0bbc)
• Modal/Slideover: prevent esc with prevent-close prop (9e2cc5b), closes #2501
• module: remove fast-deep-equal in favor of custom isEqual (37a3597)
• module: skip devtools renderer page injection if router integration is disabled (#2571) (afe4003)
• Textarea: autoresize does not work when initializing modelValue (#2681) (d3a079a)
• Toaster: teleport to body (b0be26d), closes #2404
• Toast: unreachable behind overlays (#2650) (0daac5b)

👋 New Contributors

• @BlackWhite2000 made their first contribution in #2580
• @yeonjulee1005 made their first contribution in #2588
• @adamkasper made their first contribution in #2593
• @Akryum made their first contribution in #2631
• @AaronDewes made their first contribution in #2676
• @tkmcc made their first contribution in #2680
• @mehotkhan made their first contribution in #2682

Full Changelog: v3.0.0-alpha.8...v3.0.0-alpha.9

v3.0.0-alpha.8

✨ Highlights

Vue compatibility

In #2416 by @danielroe, you can now use Nuxt UI in any Vue project without Nuxt: https://ui3.nuxt.dev/getting-started/installation/vue

Nuxt Devtools

In #2196 by @romhml, you can now preview the Nuxt UI components in the Nuxt Devtools, edit their props and copy the code to use in your app.

Lucide Icons

We migrated from heroicons to lucide icons in #2540, you can configure all your icons at once if you want to switch back: https://ui3.nuxt.dev/getting-started/icons#theme

🚀 Features

• Avatar: infer width / height on <img> based on size prop (c9adf33)
• Avatar: use NuxtImg component when available (f1a14dd), closes nuxt/ui#2078
• Badge: handle icon and avatar props (#2497) (2d52834)
• components: improve RTL support (#2433) (94c4918)
• DropdownMenu/ContextMenu: handle color field in items (#2510) (f66c96e)
• InputMenu/Select/SelectMenu: arrow prop implementation (#2503) (f26f6c8)
• Kbd: special keys for macOS and other systems (#2494) (332c6c0)
• module: add support for vue using unplugin (#2416) (d4a943e)
• module: devtools integration (#2196) (701c75a)
• NavigationMenu: add item-content slot (b5ca0d9)
• Table: customize header and cell through slots (#2457) (ef561e7)
• theme: migrate from heroicons to lucide (#2540) (a6c1a6c)

🐛 Bug Fixes

• ButtonGroup: merge class with theme (d980115), closes nuxt/ui#2498
• Carousel: add missing aria-label on dots (#2489) (03dd1eb)
• Chip: proxy attrs to slot (8669553), closes nuxt/ui#2484
• components: missing relative imports (1a93d13), closes nuxt/ui#2515
• InputMenu/Select/SelectMenu: improve types (#2471) (db8111d)
• InputMenu/SelectMenu: fast-deep-equal import (309e52f), closes nuxt/ui#2488
• module: add fast-deep-equal in optimizeDeps (0bfe2b6)
• module: define #build/app.config (12ae20d), closes nuxt/ui#2532
• NavigationMenu: add missing min-w-0 to make truncate work (#2476) (1402436)
• NavigationMenu: enforce data-orientation (64ad4b6)
• NavigationMenu: improve generic types (#2482) (fc2015b)
• Table: types in undeclared slots (#2544) (f821e66)
• Tabs: same behaviour between pill and link variants (e592da2), closes #2338
• templates: type error in app config (77d18d8), closes nuxt/ui#2481
• useKbd: hydration issue (845f85a), closes #2494
• utils: improve escapeRegExp function (a97c511)

👋 New Contributors

• @yassilah made their first contribution in #2471
• @madebyfabian made their first contribution in #2489
• @hywax made their first contribution in #2457

Full Changelog: v3.0.0-alpha.7...v3.0.0-alpha.8

v2.19.1

🐛 Bug Fixes

• InputMenu/SelectMenu: regex breaks build (cb6f5f2)

Full Changelog: v2.19.0...v2.19.1

v2.19.0

Read our updated documentation on https://ui.nuxt.com/.

🚨 Breaking Changes

In #2485, the expandable feature of the Table component has changed. You should use v-model:expand to achieve the functionality that was previously implemented using the #expand slot.

🚀 Features

• Form: add superstruct validation (#2357) (3cda6c6)
• Form: apply transformations (#2460) (ceecb60)
• Input/Textarea: nullify model modifier (#2309) (9dd7e61)
• InputMenu: allows to customize labels (#2295) (ddf67a0)
• Pagination: improve slot props (#2522) (c71fdc8)
• SelectMenu: allows to customize labels (#2266) (54e713d)
• Table: improve expanded row (#2485) (1acd01a)

🐛 Bug Fixes

• Accordion: improve items type (#2487) (25378df)
• Button: wrong to type (8ab4a14), closes #1253
• Divider: default type from app config (7846ca3), closes nuxt/ui#2398
• HorizontalNavigation/VerticalNavigation: handle badge in RTL mode (#2420) (4bf81be)
• InputMenu/SelectMenu: allow access nested object in option-attribute (#2465) (ff18061)
• InputMenu/SelectMenu: escape regexp before search (c68ba76), closes nuxt/ui#2308
• InputMenu/SelectMenu: prevent unnecessary updates when modelValue is unchanged (#2507) (1a94b55)
• module: missing types in ui config (#2467) (23971ef)
• Progress: handle carousel and carousel-inverse animations in RTL mode (#2400) (20fb46a)
• RadioGroup: rendering empty slots (#2456) (b6ed1c5)
• Table: checkbox not checked while using props by (#2401) (1b7e36c)
• Table: indeterminate checkbox with pagination (#2439) (070d2f8)
• Table: export TableRow and TableColumn types (c36964b), closes nuxt/ui#2373
• Table: handle dot nation with by prop (#2413) (b72d343)
• Tabs: allow aria-label on items (3cf19ea), closes nuxt/ui#1934

👋 New Contributors

• @nikneym made their first contribution in #2397
• @mateusbellei made their first contribution in #2487
• @hacknug made their first contribution in #2456
• @edersoares made their first contribution in #2266
• @offich made their first contribution in #2522
• @ersankarimi made their first contribution in #2507
• @cjboy76 made their first contribution in #2467

Full Changelog: v2.18.7...v2.19.0

v3.0.0-alpha.7

🚀 Features

• Accordion/Breadcrumb/CommandPalette/ContextMenu/DropdownMenu/NavigationMenu/Tabs: add labelKey prop (acfc6ce)
• Button: handle avatar prop (a54c3e4)
• CommandPalette: handle loading field in items (49abad2)
• ContextMenu/DropdownMenu: handle checkbox items type (8ef6e71), closes #2144
• ContextMenu/DropdownMenu: handle loading field in items (b975235)
• Form: add superstruct validation (#2363) (5385944)
• Input/InputMenu/Select/SelectMenu: handle avatar prop (53a3796)
• InputMenu/RadioGroup/Select/SelectMenu: handle labelKey and use get to support dot notation (f6f9823)
• NavigationMenu: handle children on vertical orientation (#2384) (34bddd4)
• Table: implement component (#2364) (b54950e)

🐛 Bug Fixes

• AvatarGroup: wrong ring on big sizes (61b2323)
• Button: invalid hover on link variant (df2013c)
• Checkbox: indeterminate prop not working (f6631ff)
• components: rename select to onSelect on items (b39c4d1)
• css: font-sans already applied on (9e03da4)
• css: make @theme default (a2bad2e)
• Drawer/Modal/Slideover: no need for z-index since its isolated (bcfa4b7), closes nuxt/ui#2347
• Input/InputMenu/Select/SelectMenu: uniformize placeholder color (f59844b)
• InputMenu/SelectMenu: escape regexp before search (7c21dde)
• InputMenu/SelectMenu: improve displayed value (0f9ac87), closes nuxt/ui#2353
• InputMenu: emit focus event (#2386) (7802aac)
• module: stop using tailwind's shorthand arbitrary variable syntax (#2366) (dcce571)
• Slideover: set max height on top / bottom positions (a68016e), closes nuxt/ui#2388

New Contributors

• @tomykho made their first contribution in #2386

Full Changelog: v3.0.0-alpha.6...v3.0.0-alpha.7

v3.0.0-alpha.6

✨ Highlights

Introduced in #2298 , Nuxt UI v3 now embraces a full design system for its components. It brings more breaking changes but will let you customize your entire app at once through CSS variables.

I'd recommend reading the pull request and the updated documentation on https://ui3.nuxt.dev/getting-started/theme#design-system.

🚀 Features

• Carousel: implement component (#2288) (68ee3f1)
• Form: add Standard Schema support (#2303) (0955c07)
• module: implement --ui-radius CSS variable (#2341) (057e86c)
• module: implement design system with CSS variables (#2298)
• module: set disableTransition option on @nuxtjs/color-mode (b82af02)

🐛 Bug Fixes

• Accordion: use text-left break-words instead of truncate on label (6c7c2f0)
• Alert: default variant to solid for consistency (3a7c5c2)
• Button: center text with block prop (3cf5535), closes nuxt/ui#2317

👋 New Contributors

• @sandros94 made their first contribution in #2341

Full Changelog: v3.0.0-alpha.5...v3.0.0-alpha.6

v2.18.7

🚀 Enhancements

• forms: allow null as initial value (#2275) (474accb)

🐛 Bug Fixes

• Carousel: arrows & indicators are broken in RTL (#2251) (db5e5c4)
• Carousel: pages calculation (#2345) (5cf24fa)
• Dropdown/Popover: conflict in toggle for touch devices (#2272) (4ae9654)
• Link: allow title field (0aa3909), closes #1439
• Tooltip: hide when text prop & slot are empty (#2232) (5ed5c57)

👋 New Contributors

• @DanielQolami made their first contribution in #2272
• @Gerbuuun made their first contribution in #2275
• @abolix made their first contribution in #2232
• @asokawotulo made their first contribution in #2296
• @OrbisK made their first contribution in #2307
• @EdmundChaplin made their first contribution in #2345

Full Changelog: v2.18.6...v2.18.7

v3.0.0-alpha.5

🚀 Features

• module: enable @nuxtjs/color-mode (9dcf903)
• module: override dark variant with class strategy (0f86b87)

🐛 Bug Fixes

• Button: props specified more than once (66a04ad)

Full Changelog: v3.0.0-alpha.4...v3.0.0-alpha.5