Support vue vapor mode
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 [email protected] 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
Source: nuxt/ui