Releases: nuxt/ui
v3.1.0
✨ Highlights
🎨 Improved Utility Classes
We've enhanced the utility class system to make it more intuitive and easier to use. While CSS variables provided flexibility, writing classes like text-(--ui-text-muted) proved cumbersome. We've introduced three major improvements:
- Default Color Shades (#3916): New utility classes for default color shades that automatically map to our design system variables. These shades automatically adapt to your color scheme and can be configured for both light and dark modes: https://ui.nuxt.com/getting-started/theme#colors
- <div class="text-(--ui-primary)">
+ <div class="text-primary">
- <div class="bg-(--ui-error)">
+ <div class="bg-error">- Neutral Color Utilities (#3629): New utility classes for text, background, border, ring, divide and outline colors that map to our design system variables. These utilities work with opacity modifiers and automatically adapt to your color mode: https://ui.nuxt.com/getting-started/theme#neutral
- <div class="text-(--ui-text-muted)">
+ <div class="text-muted">
- <div class="border-(--ui-border)">
+ <div class="border-default">
- <div class="bg-(--ui-bg-elevated)/50">
+ <div class="bg-elevated/50">- Dynamic Border Radius Utilities (#3906): Override default Tailwind CSS
rounded-*utilities to use our--ui-radiusCSS variable, making it easier to maintain consistent border radius across your application: https://ui.nuxt.com/getting-started/theme#radius
- <div class="rounded-(--ui-radius)">
+ <div class="rounded-sm">
- <div class="rounded-[calc(var(--ui-radius)*1.5)]">
+ <div class="rounded-md">
- <div class="rounded-[calc(var(--ui-radius)*2)]">
+ <div class="rounded-lg">These changes are fully backward compatible - existing CSS variable-based classes will continue to work while providing a more ergonomic alternative for new code.
🧩 New Components and Features
- CheckboxGroup (#3862): A new component for managing groups of checkboxes with built-in form integration and validation: https://ui.nuxt.com/components/checkbox-group
<script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@nuxt/ui'
const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<CheckboxGroupValue[]>(['System'])
</script>
<template>
<UCheckboxGroup v-model="value" :items="items" />
</template>- RadioGroup (#3178): Enhanced with new
cardandtablevariants for more flexible layouts: https://ui.nuxt.com/components/radio-group#variant
<script setup lang="ts">
import type { RadioGroupItem, RadioGroupValue } from '@nuxt/ui'
const items = ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<RadioGroupValue>('System')
</script>
<template>
<URadioGroup v-model="value" variant="table" :items="items" />
</template>🌉 Inertia.js Integration
The Vue version now includes built-in support for Inertia.js. Enable it with the inertia: true option in your vite.config.ts:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
inertia: true
})
]
})This automatically replaces RouterLink with InertiaLink in all components, providing seamless integration with your Inertia.js applications: https://ui.nuxt.com/getting-started/installation/vue#inertia
⚡ Module Builder Update
The module has been updated to use nuxt/[email protected], bringing improved build performance and better TypeScript support.
Following this change, we've refactored how component types are handled which brings full HMR support with app.config.ts changes, this was only working when reloading the page previously.
🚨 Breaking Changes
This PR changes .open() to return an overlay instance with a result promise property instead of returning the promise directly, providing more flexibility:
<script setup lang="ts>
const modal = useOverlay()
- const result = await modal.open({ count: count.value })
+ const instance = modal.open({ count: count.value })
+ const result = await instance.result
</script>🚀 Features
- App: add global
portalprop (#3688) (29fa462) - Carousel: add
selectevent (#3678) (22edfd7) - CheckboxGroup: new component (#3862) (9c3d53a)
- components: add new
content-topandcontent-bottomslots (#3886) (1a46394) - Form: add
attachprop to opt-out of nested form attachement (#3939) (1a0d7a3) - Form: export loading state (#3861) (fdee252)
- InputMenu/SelectMenu: handle
resetSearchTermOnSelect(cea881a), closes #3782 - InputNumber: add support for
stepSnapping&disableWheelChangeprops (#3731) (f5e6284) - Modal/Popover/Slideover: add
close:preventevent (#3958) (f486423) - module: define default color shades (#3916) (7ac7aa9)
- module: define neutral utilities (#3629) (d49e0da)
- module: dynamic
rounded-*utilities (#3906) (f9737c8) - OverlayProvider: return an overlay instance from
.open()(#3829) (f3098df) - PinInput: add
autofocus/autofocus-delayprops (0456670), closes #3717 - RadioGroup: add
cardandtablevariants (#3178) (4d138ad) - Select: handle
onSelectfield in items (8640831) - Table: conditionally apply classes to
trandtd(#3866) (80dfa88) - Tabs: add
list-leadingandlist-trailingslots (#3837) (3447a06) - Textarea: add
autoresize-delayprop (06414d3), closes #3730 - Textarea: add
icon,loading, etc. props to match Input (cb193f1) - Textarea: add
resize-noneclass withautoresizeprop (ffafd81) - unplugin: routing support for inertia (#3845) (d059efc)
🐛 Bug Fixes
- Accordion: use
divinstead ofh3for header tag (75e4792), closes #3963 - Alert/Toast: display actions when using slots (5086363), closes #3950
- Carousel: move arrows inside container on mobile (d339dcb), closes #3813
- CommandPalette: consistent alignement with other components (d25265c)
- CommandPalette: increase input font size to avoid zoom (d227a10)
- CommandPalette: prevent hover background on disabled items ([ba534f1](https://github.co...
Contributors
Assets 2
v2.22.0
✨ Highlights
- deps: update
@nuxt/module-builderto v1 (#3801)
The module has been updated to use nuxt/[email protected]!
🚨 Breaking Changes
- Form: drop explicit support for
zodandvalibot(#3618)
We now rely on standard-schema for Form validation with valibot and zod. Make sure to upgrade to [email protected] / [email protected] if you use them in your app.
🐛 Bug Fixes
- Link: properly pick all
aria-*&data-*attrs (2bef1e2), closes #3007 - Table: checkbox still emit
@selectevent (#3269) (c0e14d0) - Table: remove type annotation in template (4e96dcc), closes #3146
Full Changelog: v2.21.1...v2.22.0
v3.0.2
🚀 Features
🐛 Bug Fixes
- Avatar: proxy
$attrsto default slot (#3712) (88f349d) - Button: use
focus:outline-noneinstead offocus:outline-hidden(c231fe5), closes #3658 - CommandPalette: use
group.idas key (bc61d29) - components: improve generic types (#3331) (b998354)
- Container: add
w-fullclass (df00149) - defineShortcuts: remove
@__NO_SIDE_EFFECTS__(82e2665) - Drawer: remove
fadeFromIndexprop proxy (f7604e5) - Form: clear dirty state after submit (#3692) (3dd88ba)
- FormField: add
helptoaria-describedbyattribute (#3691) (20c3392) - InputMenu/SelectMenu: empty search results (94b6e52)
- InputMenu: reset
searchTermonupdate:open(3074632), closes #3620 - Link: handle
aria-currentlikeNuxtLink/RouterLink(c531d02) - Link: prevent
active="true"binding on html (d73768b) - Link: properly pick all
aria-*&data-*attrs (ade16b7) - Link: proxy
onClick(370054b), closes #3631 - NavigationMenu: add
z-indexon viewport (0095d89), closes #3654 - Switch: prevent transition on focus outline (68787b2)
- Table: wrong condition on
captionslot (4ebb94c) - Tabs: remove
focus:outline-hiddenclass (1769d5e) - types: add missing export for ButtonGroup (#3709) (e7e6745)
- useOverlay: refine
openmethod type to infer close emit return type (#3716) (bd99c2d) - vue: mock
nuxtApp.hooks&useRuntimeHook(23bfeb9)
🌐 Locales
👋 New Contributors
- @w33bvGL made their first contribution in #3664
- @BobbieGoede made their first contribution in #3675
- @Lionad-Morotar made their first contribution in #3712
Full Changelog: v3.0.1...v3.0.2
Contributors
Assets 2
v3.0.1
✨ Highlights
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
We now rely on standard-schema for Form validation with valibot and zod. Make sure to upgrade to [email protected] / [email protected] if you use them in your app.
- deps: update
vaul-vue(f401766)
We've updated to [email protected] which powers the Drawer component. 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
🚀 Features
- components: handle events in
contentprop (5dec0e1)
🐛 Bug Fixes
- Calendar: grey out days outside of displayed month (#3639) (a516866)
- ContextMenu/DropdownMenu: remove
anyfromproxySlots(#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
disabledon items (fe0bd83), closes nuxt/ui-pro#911 - Table: allow links to be opened when
@selectis used (#3580) (e80cc15) - types: add missing export for Icon (#3568) (5e62493)
- unplugin: include
@compodium/examplesin auto-imports paths (#3585) (cc504b8) - useLocale: unique symbol to use in
@nuxt/ui-pro(#3603) (dec2730) - vue: missing unhead context (#3589) (0897e9e)
🌐 Locales
- 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
Assets 2
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
✨ 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
Assets 2
v3.0.0-beta.4
🚨 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
nullvalue 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
useHeadin colors (5ecd227)
👋 New Contributors
Full Changelog: v3.0.0-beta.3...v3.0.0-beta.4
Contributors
Assets 2
v2.21.1
🚀 Features
- Form: add standard schema support (#2880) (9c36d37)
- module: add
colorModeoption (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
Assets 2
v3.0.0-beta.3
🚀 Features
🐛 Bug Fixes
- InputMenu/SelectMenu: proxy
requiredin root props (60b7e2d) - InputMenu: wrong
requiredin 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
Assets 2
v3.0.0-beta.2
🐛 Bug Fixes
Full Changelog: v3.0.0-beta.1...v3.0.0-beta.2
v3.0.0-beta.1
✨ Highlights
- Tree: new component (#3180)
🚨 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
selectevent (#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
$attrsbind (#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
dvhunit (aefa09c) - module: use key when merging modules options (9821894)
- Tooltip: bind
$attrson trigger (637f5d3), closes #3339 #2897 - vite: exclude
@nuxt/uifrom 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
