nuxt / nuxt/ui

Support vue vapor mode

Open
#6,395 5 comments 17 reactions 0 assignees View on GitHub

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:

  1. Acknowledge this feature request for eventual Vapor mode compatibility.
  2. Provide guidance if there are recommended ways to "wrap" or shim VDOM components for Vapor interop in the interim.
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.