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
:
- 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
- the
dynamic
prop (<UIcon />
component) and theui.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.
nuxtIcon
option has been renamed toicon
(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 incolumns
(#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 sohelp
slot can render (#1888) (99c52e5) - InputMenu/SelectMenu: invalid
label
withvalue-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