
Vibe Coding a Collaborative Editor with Comment Support with Nuxt UI and Jazz
VueSchool
A new InputRating component lets you display and collect ratings, with support for half-steps, custom length, clearing, hover preview and any icon:
<script setup lang="ts">
const value = shallowRef(3.5)
</script>
<template>
<UInputRating v-model="value" :step="0.5" hoverable />
</template>
Nuxt UI now embeds the icons it uses into your build, so they render straight away during SSR and work fully offline instead of being fetched from the Iconify API at runtime. As long as the collection is installed locally, this happens automatically for Nuxt UI's own icons (the lucide collection by default), on both Nuxt and pure Vue/Vite.
On Nuxt this rides on @nuxt/icon's existing client bundle. On Vue the @nuxt/ui/vite plugin gains an icon.clientBundle option to bring the same bundling to Vite, either by listing icons or by scanning your source. This is powered by the standalone Vite plugin and utils added in @nuxt/icon v2.3.0:
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
ui({
icon: {
clientBundle: {
// list them explicitly...
icons: ['lucide:heart', 'simple-icons:github'],
// ...or scan your whole app
scan: true
}
}
})
]
})
[!TIP]
Install each collection you use with@iconify-json/{collection_name}so its icons can be bundled. See the Icons integration for the details.
unmountOnHideThe Modal and Slideover components now accept the unmountOnHide prop. Set it to false to keep their content mounted while closed so form state, scroll position and expensive children survive open/close cycles:
<template>
<UModal :unmount-on-hide="false">
<UButton label="Open" />
<template #content>
<!-- kept alive when the modal is closed -->
</template>
</UModal>
</template>
actions prop for tool approval (#6694) (1a3a9dc)unmountOnHide prop (#6523) (f03f98b)close and closeIcon props (#6669) (53e88a4)loading and loadingIcon props (#6707) (86cd25c)unmountOnHide prop (#6626) (4deb61b), closes #5839 #3605@nuxt/icon client bundle (#6633) (8d46034)enableTouch prop (#6626) (54125f3), closes #2346claude action (#6693) (7bdcb13)getScrollElement virtualize option (#6650) (a84de85)getScrollElement virtualize option (#6657) (7e6d0f7)$attrs to root element when to prop is absent (#6628) (d3b5f1d)data-slot to component root (#6643) (c9c5232)prefers-reduced-motion in animations (#6723) (f951529)arrowdown to shiftable keys (#6702) (2128414)aria-disabled attribute when disabled (#6653) (c3b2996)useRoute().fullPath reactive across navigations (#6696) (c256997)rel prop to internal links (#6677) (276302e)localePath fails (#6637) (906e8fd)hookOnce in colors plugin (#6658) (e4ca579)create-item (#6689) (a71dece)defaultVariants override withDefaults (#6686) (f5e58fb)sideEffects for barrel tree-shaking (#6729) (2cc2849)useComponentProps from the component-types barrel (#6648) (6576fb8)Full Changelog: https://github.com/nuxt/ui/compare/v4.9.0...v4.10.0
