Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-16 21:58:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Delete docs/3.api/3.utils/create-visible-loader.md

Browse Source
This commit is contained in:
Michael Brevard 2024-10-09 10:29:54 +03:00 committed by GitHub
parent 725727f397
commit d81740d439
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 0 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/3.api/3.utils/create-visible-loader.md
View File

@ -1,33 +0,0 @@
---
title: 'createVisibleLoader'
description: A utility function to customize delayed hydration based on visibility properties.
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/hydrate.ts
size: 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:
```vue [pages/index.vue]
<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.
::