Nuxt•4mo ago

How to use Lazy component with render function

I'm trying to Lazy Hydrate components with h

import {
    LazyComponent
} from '#components'
...
h(LazyComponent, {
    hydrateOnIdle: true
})

import {
    LazyComponent
} from '#components'
...
h(LazyComponent, {
    hydrateOnIdle: true
})

But I get an warning:

Extraneous non-props attributes (hydrateOnIdle) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.

Shouldn't the hydrateOnIdle not passed to actual component?

3 Replies

kapa.ai•4mo ago

Hi @Frox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When using Nuxt's lazy hydration strategies, such as hydrate-on-idle, the expected usage is via template syntax in single-file components (SFCs), not via render functions or direct imports from #components. The documentation explicitly states that Nuxt's built-in lazy hydration only works in SFCs and requires you to define the prop in the template, not via v-bind or render functions. It also does not work with direct imports from #components in render functions:

Currently Nuxt's built-in lazy hydration only works in single-file components (SFCs), and requires you to define the prop in the template (rather than spreading an object of props via v-bind). It also does not work with direct imports from #components.Docs: Delayed (or Lazy) Hydration

This means that when you use a render function and pass hydrateOnIdle as a prop, it is not recognized as a valid prop by the component, resulting in the warning you see:

Extraneous non-props attributes (hydrateOnIdle) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.

So, to use lazy hydration, you should use the template syntax in SFCs like this:

<template>
  <LazyComponent hydrate-on-idle />
</template>

<template>
  <LazyComponent hydrate-on-idle />
</template>

If you need to use a render function or direct import, Nuxt's current lazy hydration strategies will not work as intended. There is no documented way to use these hydration props with render functions or direct imports at this time. Summary:
The warning is expected because Nuxt's lazy hydration strategies are not supported via render functions or direct imports. Use SFC template syntax for lazy hydration features to work properly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@252212996334551040> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

matamune•2mo ago

this my code

<template>
  <div>
    <LazyListMovieStyleA />
  </div>
</template>

<script setup>
const LazyListMovieStyleA = defineLazyHydrationComponent('visible', () =>
  import('@/components/page-comp/home/ListMovieStyleA.vue')
)
</script>

<template>
  <div>
    <LazyListMovieStyleA />
  </div>
</template>

<script setup>
const LazyListMovieStyleA = defineLazyHydrationComponent('visible', () =>
  import('@/components/page-comp/home/ListMovieStyleA.vue')
)
</script>

and i make error LazyListMovieStyleA is not defined but I am sure the path is correct

Gaming

Programming

How to use Lazy component with render function

Did you find this page helpful?