Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-15 10:24:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
06096dcc0c
Nuxt/docs/3.api/3.utils/create-visible-loader.md
tbitw2549 1cb243ed08 feat: auto-import loaders and update docs
2024-06-14 23:27:22 +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>
    <LazyIdleMyComponent :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. ::