Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-12-04 19:37:18 +00:00
Code Issues Packages Projects Releases Wiki Activity
c0844b902e
Nuxt/docs/3.api/3.utils/create-visible-loader.md
tbitw2549 70789a0631 chore: rename loader to hydrate
2024-06-22 00:20:01 +03:00

1.1 KiB
Raw 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. ::