Releases · nuxt/ui

21 Mar 15:27

benjamincanac

v3.0.1

05ab54d

v3.0.1 Latest

Latest

✨ Highlights

module: handle tailwindcss import without theme(static) (#3630) (ecff9ab)

You no longer need to use theme(static) when importing tailwindcss! 🎉

- @import "tailwindcss" theme(static);
+ @import "tailwindcss";

However, you might still need this when using Tailwind CSS variables in your code explicitly like this for example:

<span
  :class="`bg-(--color-light) dark:bg-(--color-dark)`"
  :style="{
    '--color-light': `var(--color-${chip}-500)`,
    '--color-dark': `var(--color-${chip}-400)`
  }"
/>

🚨 Breaking Changes

Form: drop explicit support for zod and valibot (#3617) (9a4bb34)

We now rely on standard-schema for Form validation with valibot and zod. You will need to upgrade to [email protected] / [email protected].

deps: update vaul-vue (f401766)

We've updated to [email protected] which powers the Drawer components. There's no longer a handle slot, the theme handle slot has changed a bit with some important values but you have access to a handle-only prop now: https://ui.nuxt.com/components/drawer#handle-only

🚀 Enhancements

components: handle events in content prop (5dec0e1)

🐛 Bug Fixes

Calendar: grey out days outside of displayed month (#3639) (a516866)
ContextMenu/DropdownMenu: remove any from proxySlots (#3623) (764c41a)
Modal/Slideover/Toast: prevent unnecessary close instantiation (f4c417d)
module: handle tailwindcss import without theme(static) (#3630) (ecff9ab)
module: mark functions used in exports as pure (#3604) (57efc78)
RadioGroup: handle disabled on items (fe0bd83), closes nuxt/ui-pro#911
Table: allow links to be opened when @select is used (#3580) (e80cc15)
types: add missing export for Icon (#3568) (5e62493)
unplugin: include @compodium/examples in auto-imports paths (#3585) (cc504b8)
useLocale: unique symbol to use in @nuxt/ui-pro (#3603) (dec2730)
vue: missing unhead context (#3589) (0897e9e)

🌐 Locale

locale: add Catalan language (#3550) (53cf1b4)
locale: add Central Kurdish language (#3566) (b2034cc)
locale: add Romanian language (#3587) (0229b0f)
locale: add Urdu language (#3611) (126ba23)
locale: add Uzbek language (#3548) (302e04b)

👋 New Contributors

@jwoertink made their first contribution in #3563
@NilsEvers made their first contribution in #3568
@Kheuval made their first contribution in #3580
@harlan-zw made their first contribution in #3589
@Rizwan-malek made their first contribution in #3601
@Norbiros made their first contribution in #3623
@ArbazIrshad made their first contribution in #3611
@UlugbekNG made their first contribution in #3548
@markmelnic made their first contribution in #3587
@mickaelchanrion made their first contribution in #3550
@halwesit made their first contribution in #3566
@ac-shadow made their first contribution in #3639

Full Changelog: v3.0.0...v3.0.1

Contributors

jwoertink, NilsEvers, and 10 other contributors

Assets 2

12 Mar 17:04

benjamincanac

v3.0.0

4c96909

v3.0.0

We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.

Read the blog post announcement: https://nuxt.com/blog/nuxt-ui-v3

Get started with Nuxt UI v3 →

✨ Highlights

🧩 Reka UI: A New Foundation

We've transitioned from Headless UI to Reka UI as our core component foundation, bringing:

Expanded Component Library: Access to 55+ primitives, significantly expanding our component offerings
Future-Proof Development: Benefit from Reka UI's growing popularity and continuous improvements
First-Class Accessibility: Built-in accessibility features aligned with our commitment to inclusive design

🚀 Tailwind CSS v4 Integration

Nuxt UI now leverages the latest Tailwind CSS v4, delivering:

Exceptional Performance: Full builds up to 5× faster, with incremental builds over 100× faster
Streamlined Toolchain: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript configuration

🎨 Tailwind Variants

We've adopted Tailwind Variants to power our design system, offering:

Dynamic Styling: Create flexible component variants with a powerful, intuitive API
Type Safety: Full TypeScript support with intelligent auto-completion
Smart Conflict Resolution: Efficiently merge conflicting styles with predictable results

📝 Enhanced TypeScript Integration

Nuxt UI provides significantly improved TypeScript support:

Intelligent Auto-completion for component props based on your theme configuration
Generic-based Components built using Vue 3 Generics with improved type inference for slots and events
Type-safe Theming leveraging Tailwind Variants with customizable types for extended configurations

🔄 Vue Compatibility

Use Nuxt UI in any Vue project without Nuxt by adding the Vite and Vue plugins to your configuration:

Auto-imports: Components and composables automatically imported and available globally
Complete Theming: Full theming support with customizable colors, sizes, variants, and more
Superior Developer Experience: Comprehensive TypeScript support with IntelliSense and auto-completion

Get started with Nuxt UI for Vue →

Migration from v2

We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.

To upgrade your project:

Read our detailed migration guide
Review the new documentation and components before attempting to upgrade
Report any issues on our GitHub repository

🙏 Acknowledgements

This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.

Contributors

sandros94, romhml, and hywax

Assets 2

12 Mar 13:18

benjamincanac

v3.0.0-beta.4

cc7bdf9

v3.0.0-beta.4 Pre-release

Pre-release

🚨 Breaking Changes

Nuxt UI v3.0.0-beta.4 requires Nuxt v3.16 to work, please upgrade your Nuxt to continue using @nuxt/ui:

nuxi upgrade --force

🚀 Features

Form: global errors (#3482) (6e03d9c)
Input/Textarea: allow null value in model (#3415) (cfe9b2e)
useLocale: handle generic messages (#3100) (a9c8eb3)

🐛 Bug Fixes

Button: missing import (21dbf01), closes nuxt/ui#3417
Form: input blur validation on submit (#3504) (97c8098)
vue: prevent calling useHead in colors (5ecd227)

👋 New Contributors

@Justineo made their first contribution in #3520

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

Contributors

Justineo

Assets 2

08 Mar 12:19

benjamincanac

v2.21.1

b830f63

v2.21.1

🚀 Features

Form: add standard schema support (#2880) (9c36d37)
module: add colorMode option (d2ceead), closes #3143
SelectMenu: add inputTargetForm prop to handle input validation (#3107) (feb716c)

🐛 Bug Fixes

Alert/Notification: allow description ui override (125a281), closes #2554
Table: revert #2600 to fix excessive column data slot re-renders (#3375) (23d9b51)

👋 New Contributors

@LeonidevFR made their first contribution in #3107
@coreyshuman made their first contribution in #3375

Full Changelog: v2.21.0...v2.21.1

Contributors

coreyshuman and LeonidevFR

Assets 2

07 Mar 14:39

benjamincanac

v3.0.0-beta.3

83725ac

v3.0.0-beta.3 Pre-release

Pre-release

🚀 Features

Button: handle active state (bd2d484), closes #3417
Table: add loading slot (99e531d), closes #3444

🐛 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

@HessamCheraghi made their first contribution in #3447
@Baroshem made their first contribution in #3449

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

Contributors

Baroshem and HessamCheraghi

Assets 2

28 Feb 16:27

benjamincanac

v3.0.0-beta.2

8632891

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

Assets 2

28 Feb 16:13

benjamincanac

v3.0.0-beta.1

fffbd14

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

Form: add prop to disable state transformation (#3356) (015ceac)
module: remove devtools in favor of compodium (#3380) (7a8c00c)
Table: add select event (#2822) (0668a39)
Tree: new component (#3180) (71728d3)
useOverlay: handle programmatic modals and slideovers (#3279) (108d36f)

🐛 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

@alihardan made their first contribution in #3359

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

Contributors

genu, alihardan, and romhml

Assets 2

17 Feb 13:34

benjamincanac

v3.0.0-alpha.13

be12aa4

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

@typed-sigterm made their first contribution in #3188
@VisualYuki made their first contribution in #3198
@chz made their first contribution in #3209
@who-jonson made their first contribution in #3321

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

Contributors

chz, who-jonson, and 2 other contributors

Assets 2

27 Jan 17:50

benjamincanac

v3.0.0-alpha.12

bc10a1c

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

@zAlweNy26 made their first contribution in #3087
@IsraelOrtuno made their first contribution in #3090
@sifferhans made their first contribution in #3095
@nidexingg made their first contribution in #3119
@outluch made their first contribution in #3160
@nexoscreator made their first contribution in #3170
@toto6038 made their first contribution in #3134
@nandordudas made their first contribution in #3129
@sagiv1996 made their first contribution in #3181

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

Contributors

outluch, IsraelOrtuno, and 7 other contributors

Assets 2

14 Jan 10:22

benjamincanac

v2.21.0

f2d3876

v2.21.0

🚀 Features

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

🐛 Bug Fixes

Table: v-model causing first column missing (#2890) (d573fb6)
Table: remove @select event on checkbox (#3042) (d9d4f19)
tailwind: use mjs template (#2945) (8cf9f27)

New Contributors

@stijns96 made their first contribution in #2902

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

Contributors

stijns96

Assets 2

Releases: nuxt/ui

v3.0.1

✨ Highlights

🚨 Breaking Changes

🚀 Enhancements

🐛 Bug Fixes

🌐 Locale

👋 New Contributors

Contributors

v3.0.0

✨ Highlights

🧩 Reka UI: A New Foundation

🚀 Tailwind CSS v4 Integration

🎨 Tailwind Variants

📝 Enhanced TypeScript Integration

🔄 Vue Compatibility

Migration from v2

🙏 Acknowledgements

Contributors

v3.0.0-beta.4

🚨 Breaking Changes

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

v2.21.1

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

v3.0.0-beta.3

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

v3.0.0-beta.2

🐛 Bug Fixes

v3.0.0-beta.1

✨ Highlights

🚨 Breaking Changes

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

v3.0.0-alpha.13

✨ Highlights

🎨 Tailwind CSS classes

🚨 Breaking Changes

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

v3.0.0-alpha.12

🚨 Breaking Changes

🚀 Features

🐛 Bug Fixes

👋 New Contributors

Contributors

v2.21.0

🚀 Features

🐛 Bug Fixes

New Contributors

Contributors