@nuxt/ui 4.1.0 on Node.js NPM

✨ 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.

CommandPalette: add children-icon prop to use trailing-icon in input (#4397) (edda8a6)

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 variant prop (#5138) (bb4f42c)
CommandPalette: add children-icon prop to use trailing-icon in input (#4397) (edda8a6)
CommandPalette: preserve group order in search results (#5197) (38647a2)
components: expose ui in slot props where used (#5207) (63c0a5f)
components: handle description in items (#5193) (70cf05f)
components: implement virtualization (#5162) (c744d6f)
Empty: new component (#5200) (6a6de8d)
InputNumber: handle increment / decrement as booleans (#4805) (1858908)
module: add experimental.componentDetection option (#5222) (f80474c)
Popover: add close method in slots (#5176) (53c6508)
ProseImg: improve zoom transition (#4998) (d502c30)
Tree: add global event handlers and checkbox example (#5195) (84f87a5)
Tree: expose $el for drag and drop example (#5239) (fcf6117)
Tree: provide additional slot props (#5194) (c8b01c9)
useToast: handle max global configuration (#5068) (e4c6113)

🐛 Bug Fixes

BlogPost/ChangelogVersion: allow any attrs inimage prop (9632f99), closes #5276
Breadcrumb: handle active in 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 ui prop type (#5234) (240bc1a)
CodeTree/Tree: restore item wrapper with presentation role (70aaf4a), closes #4945
components: add missing ui prop 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 div instead of main (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 uppercase class (#5238) (4095c9a)
NavigationMenu: display trailing slot when badge not undefined (f24204f), closes #4670
Table: consistent args order in select event (9526a1b)
Table: expose $el instead of rootRef (c019f8f), closes #5230 #5162

🌐 Locales

locale: add Croatian language (#5293) (b84d67b)

👋 New Contributors

@OlegChuev made their first contribution in #5136
@victorgarciaesgi made their first contribution in #5178
@DevAdedeji made their first contribution in #5169
@KazimirPodolski made their first contribution in #5176
@Antoine-Regembal made their first contribution in #5219
@Lenni009 made their first contribution in #5283
@Ismaele-silla made their first contribution in #5197
@mbanusic made their first contribution in #5293
@brendonmatos made their first contribution in #5291

Full Changelog: v4.0.1...v4.1.0

@nuxt/ui 4.1.0 v4.1.0 on Node.js NPM