Support vue vapor mode
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the reported renderVaporSlot path in runtime-vapor.esm-bundler.js and the affected components, including UButton, UInput, UCheckbox, and UInputNumber. Determine whether Nuxt UI can address the VDOM/Vapor interop failure or whether it depends on Vue core; done would mean Vapor components can render these slot-using components without the reported runtime error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100