v4.12.0

[benjamincanac]

✨ Highlights

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

🌐 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

Overlays that render nothing until they open are now lazy loaded and preloaded once the browser is idle, so they no longer weigh on the entry chunk. This covers the menu of Header, Sidebar and DashboardSidebar, the command palette and Fuse.js in DashboardSearch and ContentSearch, and the toasts in Toaster.

Components also import Reka UI primitives by name instead of from reka-ui/namespaced, which grouped every primitive used anywhere in the app into a single chunk. In an app where one page renders a Popover and a DropdownMenu and another the Calendar, date and time inputs and a ContextMenu, the first page now loads:

	Before	After
JS	760 kB	510 kB
JS (gzip)	229 kB	172 kB

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)

💚 Contributors

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

Full Changelog: v4.11.3...v4.12.0

---

This discussion was created from the release v4.12.0.