Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Nuxt/docs/3.api/3.utils/create-visible-loader.md

1.1 KiB
Raw Permalink Blame History

title description links
createVisibleLoader A utility function to customize delayed hydration based on visibility properties.
label icon to size
Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/hydrate.ts xs

You can use this utility to customize the conditions through which delayed hydration components would hydrate, based on their visiblity status and properties.

Parameters

  • options: { root, rootMargin, threshold }

Example

If you would like to change the threshold of the element:

<template>
  <div>
    <LazyVisibleMyComponent :hydrate="createVisibleLoader({threshold: 0.2})"/>
  </div>
<template>

::read-more{to="/docs/guide/directory-structure/components#delayed-hydration"} ::

::read-more{to="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API"} This is based on the IntersectionObserver web API, and therefore only accepts the API's properties. You can specify only part of the properties, while the rest will default to the web API's defaults. ::