Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-15 18:34:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
9456f3f12e
Nuxt/docs/3.api/3.utils/create-visible-loader.md
Michael Brevard 38fabb56e6
docs: update component prefix for visible
2024-06-17 17:19:35 +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 :loader="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. ::