Package
v4.x
Description
As the Vue ecosystem moves toward the stability of Vapor Mode, I am writing to track and discuss the roadmap for supporting Nuxt UI components within Vapor-compiled components.
Currently, attempting to utilize Nuxt UI components (e.g., UButton, UInput, UCheckbox) inside a Vue Vapor SFC results in runtime errors due to VDOM/Vapor interop limitations.
The Blocker
We have identified a consistent runtime error occurring when a Vapor component renders a VDOM-based Nuxt UI component as a child.
Error: TypeError: Cannot destructure property 'fallback' of 'vnode.vs' as it is undefined.
Technical Context:
This occurs within renderVaporSlot (in runtime-vapor.esm-bundler.js). When a Vapor parent does not pass an explicit slots object to a Nuxt UI component, the interop layer sets vnode.vs = undefined. The subsequent destructuring of { fallback } on vnode.vs then throws.
This effectively breaks any Nuxt UI component that relies on slot rendering (e.g., UButton, UCheckbox, UInputNumber) when placed inside a Vapor template.
Relevant Context
We acknowledge that vue@3.6.0-beta.10 is still not yet fully stable regarding VDOM/Vapor interop.
While this bug is technically "below the level" of the Nuxt UI codebase (residing in the underlying Vue core interop logic), it currently acts as a hard blocker for adopting Vapor mode within projects relying on Nuxt UI.
Proposed Path Forward
We would appreciate it if the maintainers could:
- Acknowledge this feature request for eventual Vapor mode compatibility.
- Provide guidance if there are recommended ways to "wrap" or shim VDOM components for Vapor interop in the interim.
- Let us know if there is a tracking issue or specific milestone where Vapor/VDOM interop stability will be evaluated.
Thank you for your hard work on Nuxt UI and for your time in considering this request.
Additional context
No response
Package
v4.x
Description
As the Vue ecosystem moves toward the stability of Vapor Mode, I am writing to track and discuss the roadmap for supporting Nuxt UI components within Vapor-compiled components.
Currently, attempting to utilize Nuxt UI components (e.g.,
UButton,UInput,UCheckbox) inside a Vue Vapor SFC results in runtime errors due to VDOM/Vapor interop limitations.The Blocker
We have identified a consistent runtime error occurring when a Vapor component renders a VDOM-based Nuxt UI component as a child.
Error:
TypeError: Cannot destructure property 'fallback' of 'vnode.vs' as it is undefined.Technical Context:
This occurs within
renderVaporSlot(inruntime-vapor.esm-bundler.js). When a Vapor parent does not pass an explicitslotsobject to a Nuxt UI component, the interop layer setsvnode.vs = undefined. The subsequent destructuring of{ fallback }onvnode.vsthen throws.This effectively breaks any Nuxt UI component that relies on slot rendering (e.g.,
UButton,UCheckbox,UInputNumber) when placed inside a Vapor template.Relevant Context
We acknowledge that vue@3.6.0-beta.10 is still not yet fully stable regarding VDOM/Vapor interop.
While this bug is technically "below the level" of the Nuxt UI codebase (residing in the underlying Vue core interop logic), it currently acts as a hard blocker for adopting Vapor mode within projects relying on Nuxt UI.
Proposed Path Forward
We would appreciate it if the maintainers could:
Thank you for your hard work on Nuxt UI and for your time in considering this request.
Additional context
No response