mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-19 15:10:58 +00:00
Delete docs/3.api/3.utils/create-visible-loader.md
This commit is contained in:
parent
725727f397
commit
d81740d439
@ -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.
|
|
||||||
::
|
|
Loading…
Reference in New Issue
Block a user