v4.1.0
✨ Highlights
📦 New Empty Component
A new Empty component is now available to display empty states when there's no content to show (#5200).
⚡️ Component Virtualization
Use the virtualize prop to enable virtualization for large datasets on CommandPalette, InputMenu, SelectMenu, Table and Tree components (#5162).
<template>
<UTable :data="data" :columns="columns" virtualize />
</template>
🎯 Experimental Component Detection
Enable the new experimental.componentDetection option in your nuxt.config.ts to automatically detect which components are actually used and only generate the necessary CSS for those components including their dependencies (#5222).
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
experimental: {
componentDetection: true
}
}
})
🚨 Breaking Changes
We apologize for these small breaking changes. With 110+ components in the library, we occasionally need to make corrections to maintain consistency and quality. We aim to minimize breaking changes, but sometimes they're necessary to improve the developer experience in the long run.
The trailing-icon prop is now used for the Input, and a new children-icon prop has been added to customize the icon for child items:
<template>
- <UCommandPalette :trailing-icon="i-lucide-arrow-right" />
+ <UCommandPalette :children-icon="i-lucide-arrow-right" />
</template>
- Table: consistent args order in select event (9526a1b)
The @select event now passes arguments in a consistent order: (event, row) instead of (row, event):
<template>
- <UTable @select="(row, e) => {}" />
+ <UTable @select="(e, row) => {}" />
</template>
🚀 Features
- Calendar: add
variantprop (#5138) (bb4f42c) - CommandPalette: add
children-iconprop to usetrailing-iconin input (#4397) (edda8a6) - CommandPalette: preserve group order in search results (#5197) (38647a2)
- components: expose
uiin slot props where used (#5207) (63c0a5f) - components: handle
descriptionin items (#5193) (70cf05f) - components: implement virtualization (#5162) (c744d6f)
- Empty: new component (#5200) (6a6de8d)
- InputNumber: handle
increment/decrementas booleans (#4805) (1858908) - module: add
experimental.componentDetectionoption (#5222) (f80474c) - Popover: add
closemethod in slots (#5176) (53c6508) - ProseImg: improve
zoomtransition (#4998) (d502c30) - Tree: add global event handlers and checkbox example (#5195) (84f87a5)
- Tree: expose
$elfor drag and drop example (#5239) (fcf6117) - Tree: provide additional slot props (#5194) (c8b01c9)
- useToast: handle
maxglobal configuration (#5068) (e4c6113)
🐛 Bug Fixes
- BlogPost/ChangelogVersion: allow any attrs in
imageprop (9632f99), closes #5276 - Breadcrumb: handle
activein items (cc8cbf3), closes #4771 - ChatMessage: ensure left side takes full width (af8c023)
- ChatMessage: only apply max-width on right side (a85b0e1)
- ChatMessage: reset top and bottom margin (8f9176c)
- ChatMessages: allow user scroll with
should-auto-scroll(#5252) (db73765) - ChatMessages: define user & assistant
uiprop type (#5234) (240bc1a) - CodeTree/Tree: restore item wrapper with
presentationrole (70aaf4a), closes #4945 - components: add missing
uiprop in prose proxy components (#5205) (d1afe90) - ContextMenu/DropdownMenu: allow item content class override (ab5032d), closes #5277
- Drawer/Modal/Slideover: remove close autofocus prevent (#5191) (8099440)
- Error/Main: render as
divinstead ofmain(2a09ac0), closes #4955 - FileUpload: handle disabling file delete button (08c30cf), closes #5249
- FileUpload: stuck focus while tabbing (#5128) (2477d44)
- FileUpload: use native img element for blob URLs preview (69906bc), closes #5121 #4824
- InputMenu/SelectMenu: enrich reusable template item prop (63074d6)
- InputMenu: ensure tag can be removed when number (028538a)
- Kbd: return original value and use
uppercaseclass (#5238) (4095c9a) - NavigationMenu: display trailing slot when badge not undefined (f24204f), closes #4670
- Table: consistent args order in select event (9526a1b)
- Table: expose
$elinstead ofrootRef(c019f8f), closes #5230 #5162
🌐 Locales
👋 New Contributors
- @OlegChuev made their first contribution in nuxt/ui#5136
- @victorgarciaesgi made their first contribution in nuxt/ui#5178
- @DevAdedeji made their first contribution in nuxt/ui#5169
- @KazimirPodolski made their first contribution in nuxt/ui#5176
- @Antoine-Regembal made their first contribution in nuxt/ui#5219
- @Lenni009 made their first contribution in nuxt/ui#5283
- @Ismaele-silla made their first contribution in nuxt/ui#5197
- @mbanusic made their first contribution in nuxt/ui#5293
- @brendonmatos made their first contribution in nuxt/ui#5291
Full Changelog: https://github.com/nuxt/ui/compare/v4.0.1...v4.1.0