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

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

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

• @murichristopher made their first contribution in #1877
• @biering made their first contribution in #1922
• @Trobyss made their first contribution in #1913
• @RihanArfan made their first contribution in #1942
• @davestewart made their first contribution in #1870
• @aautcq made their first contribution in #1953
• @vratier made their first contribution in #1853
• @abeldotam made their first contribution in #1798
• @galexrt made their first contribution in #1632
• @EvertonWingert made their first contribution in #1036

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