Skip to content

resolveComponent and Lazy Hydration in Nuxt 3 #31663

@jakubm95

Description

@jakubm95

Environment

Environment
Operating System: MacOS
Node Version: v22.13.0
Nuxt Version: 3.16.2
CLI Version: 3.23.1
Nitro Version: 2.11.8
Package Manager: pnpm@9.15.4
Builder: -
User Config: compatibilityDate, devtools, experimental
Runtime Modules: -
Build Modules: -

Reproduction

When trying to dynamically resolve a component with resolveComponent("LazyComponentName"), lazy hydration doesn't seem to work correctly. However, when using the component directly in the template, lazy hydration functions as expected.

  1. Register the component dynamically using resolveComponent:
const Components = {
  ComponentSectionsHeader: resolveComponent("LazySectionsHeader"),
};
  1. Use it in the template:
3. Observe that lazy hydration is not applied. 4. Now, test it by adding the component directly in the template:

<LazySectionsHeader hydrate-never />
5. Notice that lazy hydration works correctly in this case.

Describe the bug

When I try to use resolveComponent with the Lazy prefix, lazy hydration doesn't work correctly:

const Components = { ComponentSectionsHeader: resolveComponent("LazySectionsHeader"), };

For testing, I added the component directly like this:
<LazySectionsHeader hydrate-never />

And in this case, it works as expected.

Is there a solution for this?

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions