Nuxt UI v4.12.0

✨ Highlights

:bar_chart: Chart component

A new Chart component built on TanStack Charts renders line, area, bar and donut charts as an SVG on the server. Series colors follow your theme and color mode through the new --ui-chart-* CSS variables:

<script setup lang="ts">
const data = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 }
]
</script>

<template>
  <UChart
    type="bar"
    :data="data"
    index="month"
    :categories="[{ key: 'desktop', label: 'Desktop' }, { key: 'mobile', label: 'Mobile' }]"
    stacked
  />
</template>

[!NOTE]
@tanstack/charts is an optional peer dependency, install it to use the component. When the props are not enough, the definition prop takes a full TanStack chart definition.

:globe_with_meridians: Automatic locale with @nuxtjs/i18n

When @nuxtjs/i18n is installed, the App component now follows the current i18n locale, and only the Nuxt UI locales matching your i18n.locales are bundled. You can drop the import * as locales pattern, which shipped every locale in the entry chunk:

- <script setup lang="ts">
- import * as locales from '@nuxt/ui/locale'
-
- const { locale } = useI18n()
- </script>
-
  <template>
-   <UApp :locale="locales[locale]">
+   <UApp>
      <NuxtPage />
    </UApp>
  </template>

[!TIP]
An explicit locale prop still wins, see the i18n guide.

⚡ Lighter and faster pages

Pages now load up to 27% less JavaScript. A page no longer loads the code of components only other pages use, and overlays are lazy loaded: the menu of Header, Sidebar and DashboardSidebar, the command palette of DashboardSearch and ContentSearch, and the toasts of Toaster.

[!NOTE]
UButton also mounts about 38% faster and each item of an open DropdownMenu about 30% faster, since link props are now picked without a reactive proxy.

🚀 Features

• App: follow the @nuxtjs/i18n locale (#7152) (43ba8a0)
• Calendar: add yearsPerPage prop (#7138) (cc4acae)
• Chart: new component (#7022) (8b37286)
• ChatReasoning: add autoOpen prop (#7049) (dad748e)
• CheckboxGroup: add max prop (#7145) (63a0c05)
• components: add loop prop (#7128) (a96f56f)
• components: allow controlling heading element via as prop (#7048) (623d6d2)
• ContextMenu: add open and pressOpenDelay props (#7148) (73c489b)
• FileUpload: add reject event for dropped files (#7164) (c8f5ffc)
• FileUpload: support custom file items in v-model (#6927) (a352073)
• InputMenu: add default slot (#6969) (3274113)
• InputNumber: add startingValue and allowInvalid props (#7146) (d856ec3)
• module: export prose components from @nuxt/ui/components/prose (#7143) (5c302c3)
• NavigationMenu: add viewport prop (#7123) (4a3464e)
• ProsePrompt: add prompt prop (#7172) (8c92e5f)
• Sidebar: add breakpoint prop (#7155) (2113daa)
• Toast: add closeOnClick to actions (#7147) (378873a)

🐛 Bug Fixes

• App: forward nonce prop (#7137) (9271533)
• Chart: render tooltip above center slot (5cf6b3a)
• ChatMessages/ChatPromptSubmit: add accessible names to icon buttons (#7153) (3cd30e0)
• ColorModeButton: resolve label after mount (#7167) (9a12b1f)
• components: localize hardcoded accessibility labels (#7177) (fc7137c)
• components: prevent empty trailing slot when loading (#7027) (1f46ce1)
• components: spin trailing loading icon with avatar (#7168) (2fc9ba0)
• ContentSearch/DashboardSearch: handle undefined selection when an item is toggled off (#7170) (14f13af)
• ContentToc: raise list min height (#7113) (2b535b0)
• Drawer: don't disable body pointer events with noBodyStyles (#7150) (04f253e)
• Drawer: emit after:leave and after:enter when the animation ends (#7107) (5cd317b)
• Editor: align link styles with prose (f943f20)
• FileUpload: make the dropzone prop reactive (#7055) (f4322e7)
• Form: accept empty values in state type (#7165) (a59a3a3)
• Kbd: avoid hydration mismatch for platform-specific keys (#7166) (78e72fb)
• Link: promote queued prefetch on interaction (#7124) (974cc0d)
• Listbox: add accessible name to listbox (#7193) (6bbb358)
• Pagination: localize aria-label of controls and pages (#7151) (d2d3da0)
• ProseA: hide underline on focus and around inline code (3cd61ed)
• SelectMenu: keep controls outside the listbox (#7096) (ded6848)
• SelectMenu: keep menu open when focus moves outside (#7095) (26016e8)
• Slideover: only cap width from sm breakpoint (#7156) (608a3d3)
• Table: measure virtualized rows with variable heights (#7204) (0e487d6)
• Table: respect defaultColumn cell and header (#7198) (da9125c)
• theme: remove unknown and conflicting classes (96d0a50)
• Tree: pass disabled to tree item (#7139) (db30f7f)
• useToast: skip pulse while toast is animating (#7195) (e51d3a9)
• useTour: accept any CSS selector as step target (#7144) (8a7270d)

🔥 Performances

• components: import Reka UI primitives by name instead of from reka-ui/namespaced (#7176) (896d609)
• components: pick link props without a reactive proxy (#7208) (68d0467)
• DashboardSearch/ContentSearch: lazy load modal and command palette (#7161) (6f50933)
• Header/DashboardSidebar/Sidebar: lazy load menu overlay (#7160) (691899a)
• Toaster: lazy load toast component (#7163) (1b09a26)
• useComponentProps: skip prop resolution for Vue internal flags (#7186) (c029710)

:green_heart: Contributors

• @benjamincanac
• @kazbekaskarov
• @danielroe
• @61021
• @cristianchiriac
• @derblub
• @devotee101
• @giaBaoJS
• @leo-2-ga-ha
• @MFA-G
• @minwookshin
• @rdjanuar
• @ttcchhmm
• @vachmara

Full Changelog: https://github.com/nuxt/ui/compare/v4.11.3...v4.12.0