Skip to content

Releases: nuxt/ui

v2.18.0

25 Jul 08:53
@benjamincanac benjamincanac
v2.18.0
635b0f4
Compare
Choose a tag to compare
v2.18.0

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

✨ Nuxt Icon

In the last couple of weeks, nuxt-icon went through a complete rewrite made by @antfu and is now officially called @nuxt/icon.
It now works much better with SSR (no flicking on the client side) so we no longer need to rely on Tailwind CSS (@egoist/tailwindcss-icons) to bundle icons. You can check nuxt/icon#154 for more details.

This implies a few breaking changes but is a big step towards v3:

  1. the ui.icons module option (nuxt.config.ts) is removed

You no longer need to specify which Iconify collection you want to use as @nuxt/icon discovers them automatically. You can remove it safely if you used it with an array of collection or with all. Nuxt Icon will also automatically warn you if you didn't install a @iconify-json collection.

If you used it as an object to provide custom collections, you can now use the icon key in your nuxt.config.ts: https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections

  1. the dynamic prop (<UIcon /> component) and the ui.icons.dynamic option (app.config.ts) are removed

The dynamic prop was introduced in https://github.com/nuxt/ui/releases/tag/v2.11.0 to use nuxt-icon instead of the default behaviour with @egoist/tailwindcss-icons. It was useful when using dynamic class names or for icons coming from a database for example.

You no longer need this as @nuxt/icon will automatically fallback to Iconify API when the requested icon is not bundled.

  1. nuxtIcon option has been renamed to icon (app.config.ts)

When using the dynamic mode (nuxt-icon), you might have used the nuxtIcon key in your app.config.ts. In Nuxt Icon v1, this has been renamed to icon: https://github.com/nuxt/icon?tab=readme-ov-file#configuration-%EF%B8%8F

🚀 Features

  • Checkbox/Radio/RadioGroup: add help slot (c3122f7), closes #1957
  • CommandPalette: handle static groups (#1458) (b264ad2)
  • Icon: migrate from @egoist/tailwindcss-icons to new @nuxt/icon (#1789) (c904604)
  • module: improve app config types autocomplete (#1870) (3f8ea5d)
  • RadioGroup: add selected to label slot props (#1587) (d18477d)
  • SelectMenu: add selected to label / leading / trailing slots props (#1349) (6b216ca)
  • SelectMenu: handle function in showCreateOptionWhen prop (#1853) (7e974b5)
  • Skeleton: add as prop (#1955) (bce94db)
  • Table: expand row (#1036) (7155318)
  • Table: handle rowClass property in columns (#1632) (748e491)
  • Tabs: handle icon in items (#1798) (e8eb394)

🐛 Bug Fixes

  • Accordion: truncate buttons (5db18c0), closes #1909
  • Alert/Notification: missing margin on description (2c55fb6), closes #1959
  • Breadcrumb: use rotate on rtl icon (53003fc)
  • ButtonGroup/FormGroup: pass default sizes to children (#1875) (6b6b03d)
  • Carousel: remove mix-blend-overlay on indicators (#1714) (f74f1df)
  • FormGroup: don't check for error slot so help slot can render (#1888) (99c52e5)
  • InputMenu/SelectMenu: invalid label with value-attribute and async search (4d5f250), closes #1780
  • InputMenu/SelectMenu: prevent double filter with async search (e2881d3), closes #1966
  • Link: allow ariaLabel to be picked (720c44d), closes #1934
  • Progress: pass down attrs to <progress> to improve accessibility (#1881) (abd13f1)
  • RadioGroup: allow boolean in modelValue prop (#1913) (8eca5a0)

👋 New Contributors

Full Changelog: v2.17.0...v2.18.0

Contributors

davestewart, biering, and 9 other contributors
Assets 2
Loading

v2.17.0

13 Jun 09:32
@benjamincanac benjamincanac
v2.17.0
b6736d1
Compare
Choose a tag to compare
v2.17.0

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

🚀 Features

  • Alert: add actions slot (#1785) (c8dd71c)
  • Form: update and migrate valibot to v0.31.0 (#1848) (1d5bd89)
  • Notification: allow ring customization with {color} (#1830) (3ebff4d)
  • Slideover: handle top and bottom side (#1834) (50ad14f)
  • Tabs: add content prop to avoid the render of the HTML markup (#1831) (6e2678d)

🐛 Bug Fixes

  • Alert/Notification: use div for description (e8898d1), closes #1551
  • Alert: base style not applied on icon (#1859) (f65aefb)
  • Breadcrumb: allow aria-current to be overrideable (ebfb835), closes #1856
  • Carousel: prevent mouse click when dragging (#1781) (4f0d00f)
  • CommandPalette: hide empty-state when null (249bbd4), closes #1787
  • Form: maintain other errors when using setErrors with a path (#1818) (06990be)
  • Input: hide wrapper when type is hidden (#1797) (e7c2f78)
  • Link: typo in exactHash type (581b470), closes #1767
  • SelectMenu: wrong placeholder color when modelValue is an empty string (9b9ccdb), closes #1862
  • Select: remove defaults for value and text (6c124bb), closes #1702

👋 New Contributors

Full Changelog: v2.16.0...v2.17.0

Contributors

ThibaultVlacich, eduardo-faith, and 5 other contributors
Assets 2
Loading

v2.16.0

07 May 12:23
@benjamincanac benjamincanac
v2.16.0
cc52bff
Compare
Choose a tag to compare
v2.16.0

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

⚠️ Breaking Changes

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

🚀 Features

🐛 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

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

Contributors

MoritzBru, guylil, and DamianGlowala
Assets 2
Loading

v2.15.2

12 Apr 12:24
@benjamincanac benjamincanac
v2.15.2
c75c015
Compare
Choose a tag to compare
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

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

Contributors

kshitijsubedi and vahid-bagheri
Assets 2
Loading

v2.15.1

02 Apr 11:09
@benjamincanac benjamincanac
v2.15.1
36055ba
Compare
Choose a tag to compare
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

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

Contributors

qin-guan, shahabbasian, and simoncdn
Assets 2
Loading

v2.15.0

26 Mar 12:58
@benjamincanac benjamincanac
v2.15.0
3d5ffe7
Compare
Choose a tag to compare
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

🐛 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

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

Contributors

genu, angsanley, and 4 other contributors
Assets 2
Loading

v2.14.2

05 Mar 11:22
@benjamincanac benjamincanac
v2.14.2
17a9641
Compare
Choose a tag to compare
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

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

Contributors

roiLeo, sdezza, and 6 other contributors
Assets 2
Loading

v2.14.1

23 Feb 16:27
@benjamincanac benjamincanac
v2.14.1
5af9da4
Compare
Choose a tag to compare
v2.14.1

🐛 Bug Fixes

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

Assets 2
Loading

v2.14.0

22 Feb 11:09
@benjamincanac benjamincanac
v2.14.0
df32b31
Compare
Choose a tag to compare
v2.14.0

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

🚀 Features

🐛 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

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

Contributors

dalirnet, solamichealolawale, and 4 other contributors
Assets 2
Loading

v2.13.0

30 Jan 11:25
@benjamincanac benjamincanac
v2.13.0
e78a035
Compare
Choose a tag to compare
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.

CleanShot 2024-01-29 at 21 15 00@2x

HorizontalNavigation component

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

CleanShot 2024-01-29 at 21 14 41@2x

🎨 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>

Release v2.13

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:

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

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

Contributors

Youhan, Gobler, and 3 other contributors
Assets 2
Loading