🐛 UTree Checkbox Cascade: Official Demo Workaround :as="{ link: 'div' }" Causes Runtime Error in @nuxt/ui@^4.0.1 #5246
Description
Environment
- Package Manager:
yarn@1.22.22 - Nuxt Version:
^4.1.2 - @nuxt/ui Version:
^4.0.1 - Vue Version:
^3.5.13
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
4.1.2
Reproduction
https://codesandbox.io/p/devbox/nervous-stallman-xc4dzv
Description
Thank you for the recent updates.
I am using UTree for cascaded checkbox selection (via item-leading slot, multiple, propagate-select, and bubble-select). The functionality is inconsistent in the latest version.
In previous versions, a known, albeit undocumented, workaround was necessary to prevent the checkbox from conflicting with the default item click behavior: using the prop :as="{ link: 'div' }".
This workaround is now broken in the latest stable release, leading to a critical Vue rendering error.
💥 Breaking Change / Bug
When applying the necessary workaround for checkbox selection, the component fails to render:
Non-Standard Prop that Causes Error:
<UTree :as="{ link: 'div' }" ... >
</UTree>
Runtime Vue Warning / Error:
[Vue warn]: Component is missing template or render function: {link: 'div'}
at <TreeRoot as= {link: 'div'} ... >
🎯 Expected Behavior & Regression
- The component should provide a documented, standard method to disable the default item click action
when the item-leading slot is used for custom selection elements like UCheckbox. - Alternatively, the internal event handling should be adjusted so that a UCheckbox in the item-leading slot automatically takes precedence over the default item click/select event, ensuring the cascading selection works out-of-the-box when the item is marked as a link/button.
Additional context
No response
Logs
virtual:nuxt:/project/workspace/.nuxt/routes.mjs:16 [Vue warn]: Component is missing template or render function: {link: 'div'}
at <Anonymous onSelect=fn<onSelect> class="relative isolate" tabindex=-1 ... >
at <Primitive onSelect=fn<onSelect> class="relative isolate" tabindex=-1 ... >
at <PrimitiveSlot onSelect=fn<onSelect> class="relative isolate" tabindex=-1 ... >
at <Primitive onSelect=fn<onSelect> class="relative isolate" tabindex=-1 ... >
at <PrimitiveSlot ref=Ref< undefined > onSelect=fn<onSelect> class="relative isolate" >
at <CollectionSlot onSelect=fn<onSelect> class="relative isolate" >
at <RovingFocusGroup ref_key="rovingFocusGroupRef" ref=Ref< undefined > as-child="" ... >
at <TreeRoot as= {link: 'div'} items= (3) [{…}, {…}, {…}] multiple=true ... >
at <UTree modelValue= [] onUpdate:modelValue=fn as= {link: 'div'} ... >
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouteProvider key="/" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …} ... >
at <RouterView name=undefined route=undefined >
at <NuxtPage >
at <Primitive as="main" class="min-h-[calc(100vh-var(--ui-header-height))]" >
at <UMain >
at <ToastProvider swipe-direction="right" duration=5000 >
at <Toaster key=0 >
at <TooltipProvider >
at <ConfigProvider use-id=fn<use-id> dir=undefined locale=undefined >
at <App >
at <App key=4 >
at <NuxtRoot>