v2.16.0

Read our updated documentation on https://ui.nuxt.com/.

⚠️ Breaking Changes

• Input: redesign file type without absolute positioning (#1712)

🚀 Features

• InputMenu/SelectMenu: allow lazy search (#1705) (7e6ba78)
• module: HMR support with @nuxtjs/tailwindcss (#1665) (821e15b)
• Table: allow providing a <caption> (#1680) (3fca668)
• useToast: allow clearing all notifications (#1695) (82d619b)

🐛 Bug Fixes

• Breadcrumb: pass click event to ULink (5481dab)
• Input: redesign file type without absolute positioning (#1712) (ed5c74d)
• Notification: update timer when timeout prop changes (#1673) (cba9ad7)
• Slideover: export and clean types (#1692) (bd3fa86)
• Table: provide aria-sort for sortable table headings (#1675) (6f60fa9)

👋 New Contributors

• @DamianGlowala made their first contribution in #1659
• @MoritzBru made their first contribution in #1695
• @guylil made their first contribution in #1749

Full Changelog: v2.15.2...v2.16.0

v2.15.2

🚀 Enhancements

• Accordion: add unmount prop to allow lazy mounting for heavy components (#1590) (91e5002)
• Table: add checkbox ui config (#1409) (8b54660)

🐛 Bug Fixes

• Breadcrumb: missing min-w-0 on wrapper to truncate (9f01145), closes #1650
• Carousel: next and prev buttons disabled (#1619) (e909884)
• Popover/Dropdown: prevent unintended closure on touchstart in mobile devices (#1609) (2392b4a)
• Modal: wait for transition to complete to reset state (#1618) (2bdb5d2)
• Slideover: remove dynamic component when closing (#1615) (58faa10)
• Slideover: wait for transition to complete to reset state (#1624) (07a4d13)

👋 New Contributors

• @vahid-bagheri made their first contribution in #1609
• @kshitijsubedi made their first contribution in #1619

Full Changelog: v2.15.1...v2.15.2

v2.15.1

🚀 Enhancements

• Avatar: add as prop to use NuxtImg underneath (49b73aa), closes #1577

🐛 Bug Fixes

• Checkbox: @change event value (#1580) (c98d6e3)
• Divider: add w-full only on horizontal wrapper (#1565) (bd8b737)
• Dropdown: missing mouseenter event on container (7288953)
• Input/SelectMenu: handle file type and change events (#1570) (878f707)
• Popover: missing mouseenter event on container (8517897), closes #1564

👋 New Contributors

• @qin-guan made their first contribution in #1571
• @shahabbasian made their first contribution in #1565
• @simoncdn made their first contribution in #1580

Full Changelog: v2.15.0...v2.15.1

v2.15.0

Read our updated documentation on https://ui.nuxt.com/.

⚠️ Breaking Changes

• forms: normalize input emits (#1560)

This PR includes a small breaking change on the URange, USelect and UCheckbox components: the @change event's payload is now the input's value instead of the HTML event to match other inputs.

🚀 Features

• Accordion: emit open event with index (#1559) (224ec3c)
• Alert: add icon & avatar slots (#1401) (cee3e12)
• Slideover: open programmatically (#1465) (e769759)
• Toggle: add loading prop (#1546) (e1e05af)

🐛 Bug Fixes

• ButtonGroup: nested group elements (#1530) (7658211)
• Carousel: add tab-based ARIA roles (#1516) (e736eca)
• Checkbox: bind data-n-ids to root element (#1495) (a2b8b70)
• forms: normalize input emits (#1560) (92e7362)
• InputMenu: trigger alignement on safari (f4a48f6), closes #1505
• module: opt in to import.meta.* properties (#1561) (cc62e34)
• Popover/Dropdown: use @touchstart.passive instead of @touchstart.prevent (#1520) (a563d8f)
• SelectMenu: filteredOptions might be undefined (#1541) (b0ecac5)
• SelectMenu: handle Boolean type as model value (#1550) (c49f899)

👋 New Contributors

• @nmggithub made their first contribution in #1516
• @danielohling made their first contribution in #1520
• @angsanley made their first contribution in #1541
• @genu made their first contribution in #1465
• @YIngChenIt made their first contribution in #1549
• @aminmokhtari94 made their first contribution in #1546

Full Changelog: v2.14.2...v2.15.0

v2.14.2

🐛 Bug Fixes

• Alert: improve description alignment when no title provided (ca4f06a), closes #1408
• Checkbox: label interaction without FormGroup (#1427) (6e77f1d)
• Dropdown: active/inactive dropdown links (#1407) (6a1142b)
• Dropdown: improve hover mode on touch devices (70bf4a7)
• HorizontalNavigation: add relative class to icon (0a4a9e3)
• Modal: remove overflow-hidden (#1460) (002129c)
• Notification: improve description alignment when no title provided (9cce445)
• Popover: improve hover mode on touch devices (b50fbcf)
• RadioGroup: add missing fieldset config (2d64b50), closes #1472
• SelectMenu: check null model value (4b6e80e), closes #1421
• Tooltip: arrow not hidden on mobile (272c19d), closes #1470
• VerticalNavigation: add relative class to icon (0b29dd4), closes #1245

👋 New Contributors

• @sdezza made their first contribution in #1423
• @moshetanzer made their first contribution in #1434
• @roiLeo made their first contribution in #1453
• @lammerfalcon made their first contribution in #1451
• @davidparys made their first contribution in #1442
• @mukundshah made their first contribution in #1449
• @kmilogp8496 made their first contribution in #1460
• @zoobzio made their first contribution in #1407

Full Changelog: v2.14.1...v2.14.2

v2.14.1

🐛 Bug Fixes

• module: revert tailwind config from #1272 (#1404) (ba15add)

Full Changelog: v2.14.0...v2.14.1

v2.14.0

Read our updated documentation on https://ui.nuxt.com.

🚀 Features

• Carousel: expose methods to allow autoplay (41ecd2a), closes #1300
• Divider: handle size prop (#1307) (cbeede6)
• Form: use nuxt useId to bind input labels (#1211) (27c71fa)
• Input: handle type file (946a39c), closes #563
• Modal: open programmatically (#1319) (6f29c62)
• Table: display progress bar when loading (#1362) (3fe3521)
• Tabs: add unmount prop as false by default (843a978), closes #663
• Textarea: add maxrows prop to restrict autoresize (#1302) (f643e7b)

🐛 Bug Fixes

• Alert: remove required title to prevent warning when using slot (e545b6f)
• Card: prevent body padding without default slot (f682905)
• components: hydration attribute mismatch with vue 3.4 (#1199) (10db144)
• Form: improve validate path type (#1370) (5266591)
• Form: return false when silent validation fails (#1371) (d4b6147)
• Link: check disabled prop before navigating (#1321) (ac42ec1)
• Meter: missing import of Icon component (f8b296f), closes #1328
• module: prevent tailwind warn with bun (bb40c31), closes #809
• module: put back all option in icons plugin (412cd75), closes #1237
• Notification: remove required title to prevent warning when using slot (aa2b1ca)
• Progress: prevent NaN percent display when indeterminate (a55a08a)
• RadioGroup: pass help prop to radio children (5a5b284), closes #1313
• utils: prevent merge of popper key (9f35297), closes #1393

👋 New Contributors

• @JakeIsMeh made their first contribution in #1297
• @pedraal made their first contribution in #1302
• @solamichealolawale made their first contribution in #1321
• @noook made their first contribution in #1319
• @rvdriest made their first contribution in #1340
• @dalirnet made their first contribution in #1370

Full Changelog: v2.13.0...v2.14.0

v2.13.0

Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

Carousel component

The Carousel component allows you to display images or content in a scrollable area and comes with drag to scroll support, navigation buttons, indicators, etc.

HorizontalNavigation component

Much like the VerticalNavigation, the HorizontalNavigation component comes in handy when you need to display a list of horizontal links.

🎨 Design consistency

We've updated the Breadcrumb, CommandPalette, Dropdown, InputMenu, SelectMenu and VerticalNavigation components config to be consistent with the Button default sm size.

If you take a look at this example with many components, you can see that everything is now perfectly aligned and has the same size:

<template>
  <UContainer class="min-h-screen flex items-center">
    <div class="w-80 space-y-2">
      <UCommandPalette :groups="[{ key: 'links', commands: links }]" :searchable="false" class="-mx-2" />
      <UVerticalNavigation :links="links" />
      <UHorizontalNavigation :links="links" />
      <UInput :icon="selected.icon" :options="links" :placeholder="selected.label" />
      <UInputMenu v-model="selected" :icon="selected.icon" :options="links" />
      <USelect :icon="selected.icon" :options="links" :placeholder="selected.label" />
      <USelectMenu v-model="selected" :icon="selected.icon" :options="links" />
      <UDropdown :items="[links]" :popper="{ placement: 'bottom-start' }" class="w-full">
        <UButton color="white" :icon="selected.icon" :label="selected.label" class="w-full" />
      </UDropdown>
      <UBreadcrumb :links="links" class="ml-2.5" />
      <UAccordion :items="links" color="gray" variant="ghost" />
    </div>
  </UContainer>
</template>

<script setup>
const links = [{
  label: 'Installation',
  icon: 'i-heroicons-home',
  to: '/getting-started/installation'
}, {
  label: 'Vertical Navigation',
  icon: 'i-heroicons-chart-bar',
  to: '/navigation/vertical-navigation'
}, {
  label: 'Command Palette',
  icon: 'i-heroicons-command-line',
  to: '/navigation/command-palette'
}]
const selected = ref(links[0])
</script>

It is not shown by the screenshot but labels and icons inside the Dropdown / InputMenu / SelectMenu menus now also match.

Here's the list of commits if you want to know exactly what changed:

• 8c568b1
• d2481a0
• a3f253f
• edf70b1
• b5b97f3
• fc91e90
• 3e81eee

There are still some improvements left to reflect the size prop on the actual menus as mentioned in #446.

📖 Docs revamp

Since the first release of @nuxt/ui and the launch of @nuxt/ui-pro, more and more components have been added to the docs. There are now at least 90+ components if you combine the two packages.

To ease the navigation between all these components, we removed all the categories like Elements, Forms, Landing, etc. for both @nuxt/ui and @nuxt/ui-pro to group everything under Components. This should remove a lot of clicks to find the component you're looking for.

We also removed the Pro popover in the header to access Nuxt UI Pro, you can now use the Docs and Pro links instead to switch between the two or use the top left dropdown to switch between @nuxt/ui, @nuxt/ui-edge and @nuxt/ui-pro packages.

The Nuxt UI Pro landing page has been merged at the bottom of https://ui.nuxt.com, and new Pricing and Templates pages are now available in the header.

🚀 Features

• Carousel: new component (#927) (f37b043)
• Dropdown: default delay from config (c4a1c04)
• Form: handle multiple paths in validate (#1273) (20ac4b3)
• HorizontalNavigation: new component (#1279) (b8007ba)
• InputMenu: handle nullable prop when clearing input (5e49fb8)
• Modal/Slideover: emit close-prevented event (#1207) (6faf15b)
• module: add option to disable global css styles (#1266) (f96eb5e)
• Popover: default delay from config (7f5711b)
• Tooltip: default delay from config (3400b56)
• VerticalNavigation: use Badge component for consistency (3e81eee)

🐛 Bug Fixes

• Breadrumb: handle truncate (5d3a962)
• Link: propagate active prop to slot as isActive (b76e761)
• Select: consistent placeholder with input and textarea (2cb41db), closes #1276
• Slideover: handle translate in RTL mode (#1259) (ea58c88)

👋 New Contributors

• @Youhan made their first contribution in #1207
• @FADL285 made their first contribution in #1259
• @Gobler made their first contribution in #927
• @CernyMatej made their first contribution in #1266
• @AnthonySendra made their first contribution in #1273

Full Changelog: v2.12.3...v2.13.0

v2.12.3

🐛 Bug Fixes

• link: import type from #vue-router (79ec3fd), closes #1253

Full Changelog: v2.12.2...v2.12.3

v2.12.2

🐛 Bug Fixes

• link: improve nuxt link rel type (05e90aa)

Full Changelog: v2.12.1...v2.12.2