Skip to content

Releases: nuxt/ui

v3.0.0-beta.3

07 Mar 14:39
@benjamincanac benjamincanac
v3.0.0-beta.3
83725ac

Choose a tag to compare

View all tags
v3.0.0-beta.3 Pre-release
Pre-release

🚀 Features

🐛 Bug Fixes

  • InputMenu/SelectMenu: proxy required in root props (60b7e2d)
  • InputMenu: wrong required in multiple mode (01fa230), closes #2741
  • Pagination: add missing slots (a47c5ff), closes #3441
  • Pagination: wrong next link (e823022), closes #3008
  • templates: prevent overriding existing colors (ccbd89c), closes #3426

👋 New Contributors

Full Changelog: v3.0.0-beta.2...v3.0.0-beta.3

Contributors

Baroshem and HessamCheraghi
Loading

v3.0.0-beta.2

28 Feb 16:27
@benjamincanac benjamincanac
v3.0.0-beta.2
8632891

Choose a tag to compare

View all tags
v3.0.0-beta.2 Pre-release
Pre-release

🐛 Bug Fixes

  • OverlayProvider: missing import (c555c16)
  • useOverlay: missing imports (0e3c63e)

Full Changelog: v3.0.0-beta.1...v3.0.0-beta.2

Loading

v3.0.0-beta.1

28 Feb 16:13
@benjamincanac benjamincanac
v3.0.0-beta.1
fffbd14

Choose a tag to compare

View all tags
v3.0.0-beta.1 Pre-release
Pre-release

✨ Highlights

  • Tree: new component (#3180)

https://ui3.nuxt.dev/components/tree

🚨 Breaking Changes

  • deps: update tailwindcss to ^4.0.8 (#3373)

Tailwind CSS made some breaking changes in 4.0.8 where they don't rely on the module graph to discover classes anymore and where they remove unused CSS variables.

The first issue has been fixed internally in #3373 but for the second you now need to use theme(static) when importing tailwindcss: https://ui3.nuxt.dev/getting-started/theme#theme

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

You can read more about this in #3374

  • module: remove devtools in favor of compodium (#3380)

@romhml who initially created the Nuxt UI devtools, moved all the logic into a separate compodium module in #3380 to avoid polluting the @nuxt/ui package with 7MB+ of component metas.

This module now works for any component in your app, not just Nuxt UI ones which gives way more flexibility.

You can install the module in your Nuxt application with one command:

npx nuxi module add compodium
  • useOverlay: handle programmatic modals and slideovers (#3279)

@genu who initially created the useModal and useSlideover composables in Nuxt UI v2 made a significant refactor in #3279 which merges the two composables into a single useOverlay composable. This is a big breaking change but brings lots of improvements as you can read in the PR.

🚀 Features

🐛 Bug Fixes

  • Avatar: render on SSR (67e5465)
  • CommandPalette: wrong ellipsis color (ada04f6)
  • components: missing $attrs bind (#3152) (fb36df5)
  • Drawer/Modal/Slideover: disable close autofocus (ae30f94), closes #3227
  • Form: ensure loading state resets to false after an error (#3359) (19d76c8)
  • Link: improve external links handling in vue (b53f77b)
  • Modal/Slideover: add wrapper around title & description (bc01136)
  • Modal/Slideover: fixed header height (d33a83e), closes #3333
  • Modal: use dvh unit (aefa09c)
  • module: use key when merging modules options (9821894)
  • Tooltip: bind $attrs on trigger (637f5d3), closes #3339 #2897
  • vite: exclude @nuxt/ui from vite pre-optimization (#3352) (09492f7)

👋 New Contributors

Full Changelog: v3.0.0-alpha.13...v3.0.0-beta.1

Contributors

genu, alihardan, and romhml
Loading

v3.0.0-alpha.13

17 Feb 13:34
@benjamincanac benjamincanac
v3.0.0-alpha.13
be12aa4

Choose a tag to compare

View all tags
v3.0.0-alpha.13 Pre-release
Pre-release

✨ Highlights

🎨 Tailwind CSS classes

Thanks to #2967, you can now use classes like text-primary dark:text-primary-400 like in Nuxt UI v2. We dynamically write into the @theme directive of Tailwind CSS to define the Nuxt UI design system colors (theme.colors) as Tailwind CSS colors.

🚨 Breaking Changes

  • useToast: don't return a promise on add
  • Toast: rename click to onClick for consistency
  • Alert/Toast: add orientation prop

🚀 Features

  • Alert/Toast: add orientation prop (2c192ac)
  • Badge: add support within button groups (#3224) (10fb843)
  • Card: add variant prop (847d4aa)
  • CommandPalette: support link props in items (e2b78a7), closes #3190
  • ContextMenu/DropdownMenu/NavigationMenu: add external-icon prop (5846c1e), closes #2996
  • Drawer: add inset prop (6d9b9ed), closes #2994
  • locale: add Azerbaijani language (#3209) (0fb6753)
  • locale: add Bengali (বাংলা) language (#3321) (1d09a2a)
  • module: generate tailwindcss theme colors (#2967) (443a0be)
  • Table: extends core options and support other options like pagination (#3177) (4aa3179)
  • Toast: handle vnodes in title and description (abd2be1), closes #3226
  • unplugin: expose options for embedded plugins, throw warnings for duplication (#3207) (6c20f8a)
  • useToast: proxy emits (089185f)

🐛 Bug Fixes

  • App: wrap ModalProvider / SlideoverProvider inside TooltipProvider (cd0a9d3), closes #3236
  • Badge: missing UAvatar import (49dd088), closes #3203
  • Calendar/InputMenu/Textarea: add missing PartialString type on ui prop (9d29e0b), closes #3299
  • Card: remove shadow-sm for consistency (8097fff)
  • Link: allow usage without vue-router in vue (f55e869), closes #3001
  • locale: export km (#3201) (995e07d)
  • Modal/Slideover: improve title & description accessibility (e419dcb), closes #3267 #3215
  • Modal: always fullscreen on mobile (#2637) (7641d89)
  • NavigationMenu: disable collapsible with collapsed prop (07e1b4f)
  • NavigationMenu: remove negative mb causing overflow issues (0e46c3e)
  • NavigationMenu: wrong level compute on vertical orientation (c1c9da4)
  • SelectMenu: wrap content with FocusScope (e7e7585), closes #2657
  • Table: proxy props without useForwardProps (f0553eb)
  • Toast: rename click to onClick for consistency (533e889)
  • useToast: don't return a promise on add (153f341)

👋 New Contributors

Full Changelog: v3.0.0-alpha.12...v3.0.0-alpha.13

Contributors

chz, who-jonson, and 2 other contributors
Loading

v3.0.0-alpha.12

27 Jan 17:50
@benjamincanac benjamincanac
v3.0.0-alpha.12
bc10a1c

Choose a tag to compare

View all tags
v3.0.0-alpha.12 Pre-release
Pre-release

🚨 Breaking Changes

  • ColorPicker: migrate from color to colortranslator (#3097)
  • Form: include nested state in submit data (#3028)
  • locale: remove emoji fallback for Chinese (#3134) (1a95104)

🚀 Features

  • css: add light variant to reverse colors (75f7064)
  • FormField: set aria-describedby and aria-invalid attributes (#3123) (b95b913)
  • Form: form validation properties (#3137) (c0b485d)
  • locale: add Hebrew language (#3181) (f395877)
  • locale: add Hindi language (#3170) (8e96daa)
  • locale: add Hungarian language (#3129) (891ba1f)
  • locale: add Khmer language (#3119) (64421a1)
  • locale: add Norwegian Bokmål language (#3095) (9ccfe8f)
  • NavigationMenu: add collapsed prop (3fc2210)
  • NavigationMenu: add contentOrientation prop (ac86ee0)
  • NavigationMenu: handle label type in items (27fdc8e), closes #2993

🐛 Bug Fixes

  • Alert: allow actions wrap (#3083) (e7c10bc)
  • Avatar: handle loading manually to support @nuxt/image (00c5f26), closes nuxt/ui-pro#727
  • Avatar: hide fallback when image is loaded (36d7402), closes nuxt/ui-pro#727
  • Button: wrong avatar size with block prop (ba1dd13)
  • colors: move css variables to base layer (533ccec), closes #3075
  • components: prevent multiple appConfig identifier import (#3186) (cd16b95)
  • ContextMenu/DropdownMenu: remove unnecessary bindings in html (9b5a957)
  • Form: include nested state in submit data (#3028) (de9ecb1)
  • Form: standard schema validation no longer wrapped in value object (#3104) (8f7f579)
  • locale: remove emoji fallback for Chinese (#3134) (1a95104)
  • locale: year translation missing ñ in es (#3090) (1bf370e)
  • NavigationMenu: handle children recursively in vertical orientation (2b7ff3e), closes #3128
  • NavigationMenu: highlight open items on horizontal orientation only (931211a)
  • useToast: add in queue and improve unique ids (aafddd8), closes #2686

👋 New Contributors

Full Changelog: v3.0.0-alpha.11...v3.0.0-alpha.12

Contributors

outluch, IsraelOrtuno, and 7 other contributors
Loading

v2.21.0

14 Jan 10:22
@benjamincanac benjamincanac
v2.21.0
f2d3876

Choose a tag to compare

View all tags
v2.21.0

🚀 Features

  • module: handle tailwindMerge config from app.config (#2902) (ea15e21)

🐛 Bug Fixes

New Contributors

Full Changelog: v2.20.0...v2.21.0

Contributors

stijns96
Loading

v3.0.0-alpha.11

13 Jan 10:57
@benjamincanac benjamincanac
v3.0.0-alpha.11
1d54fd3

Choose a tag to compare

View all tags
v3.0.0-alpha.11 Pre-release
Pre-release

🚨 Breaking Changes

  • Modal/Popover/Slideover: rename prevent-close to dismissible

🚀 Features

🐛 Bug Fixes

  • Accordion/Collapsible/NavigationMenu/Tabs: define unmountOnHide default (4344e36)
  • Avatar: bind $attrs on AvatarFallback (#2933) (7f64198)
  • Badge: reduce radius on sm size (f97d2e3)
  • CommandPalette/SelectMenu: missing translations (#3057) (d5dba0e)
  • components: enable pointer events on menus (#2881) (f85b098)
  • defineShortcuts: handle extract when using onSelect or onClick (#2896) (2e17fb6)
  • DropdownMenu/ContextMenu: correct bindings of checkbox items (#2921) (4c5a4fb)
  • FormField: restore eager-validation prop behavior (#3031) (41dc11c)
  • InputMenu: removing tag does not change modelValue (#3054) (5a44394)
  • locale: improve Traditional Chinese translation (#3051) (5c2c55f)
  • Modal/Popover/Slideover: rename prevent-close to dismissible + uniformize docs (6fb426f)
  • NavigationMenu: arrow styles after reka-ui migration (9759320)
  • NavigationMenu: highlight border on children only with vertical orientation (e931880)
  • NavigationMenu: remove w-full on root slot (ef7ecd2), closes #3000
  • NavigationMenu: unbind link on collapsible trigger with vertical orientation (82d6344)
  • SelectMenu: handle resetSearchTermOnBlur manually (#3082) (c902a40)
  • Stepper: correct item value type (4f05b1a)
  • Stepper: wrong item in title & description slots (473194f), closes #2888
  • templates: allow any string in colors autocomplete (5183582), closes #2143
  • templates: infer variants types in generated theme (2c99bb8)
  • unplugin: invalid url schema on windows (#2899) (9b4694f)
  • vue: head injection (#2929) (7302a84)

👋 New Contributors

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

Contributors

corydeppen, Pwntus, and 12 other contributors
Loading

v3.0.0-alpha.10

09 Dec 10:22
@benjamincanac benjamincanac
v3.0.0-alpha.10
83c2b70

Choose a tag to compare

View all tags
v3.0.0-alpha.10 Pre-release
Pre-release

✨ 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

CleanShot 2024-12-09 at 11 20 55@2x

ColorPicker

A new ColorPicker component has been introduced: https://ui3.nuxt.dev/components/color-picker
CleanShot 2024-12-09 at 11 21 05@2x

Stepper

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

CleanShot 2024-12-09 at 11 21 20@2x

🚀 Features

🐛 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

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

Contributors

ChristopheCVB, kotering, and 5 other contributors
Loading

v2.20.0

09 Dec 11:32
@benjamincanac benjamincanac
v2.20.0
b654c93

Choose a tag to compare

View all tags
v2.20.0

🚨 Breaking Changes

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

🚀 Features

🐛 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

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

Contributors

Snack-X, julien1619, and 6 other contributors
Loading

v3.0.0-alpha.9

19 Nov 15:13
@benjamincanac benjamincanac
v3.0.0-alpha.9
21d8c35

Choose a tag to compare

View all tags
v3.0.0-alpha.9 Pre-release
Pre-release

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

🐛 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

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

Contributors

Akryum, tkmcc, and 5 other contributors
Loading