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

docs: add reference to event-based lazy loading

Browse Source
This commit is contained in:
tbitw2549 2024-06-15 01:10:20 +03:00
parent 06096dcc0c
commit 76f2f5dc4a
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/2.guide/2.directory-structure/1.components.md
View File

@ -155,15 +155,26 @@ If you need the component to load as soon as possible, but not block the critica
</template>
```
If you would like the component to load after certain events occur, like a click or a mouse over, you can use the `LazyEvent` prefix, which would only trigger the hydration when those events occur.
```vue [pages/index.vue]
<template>
<div>
<LazyEventMyComponent />
</div>
</template>
```
### Custom hydration triggers
If you would like to override the default hydration triggers when dealing with delayed hydration, like changing the timeout or the options for the intersection observer, you can do so by supplying a `loader` prop to your lazy components.
If you would like to override the default hydration triggers when dealing with delayed hydration, like changing the timeout, the options for the intersection observer, or the events to trigger the hydration, you can do so by supplying a `loader` prop to your lazy components.
```vue [pages/index.vue]
<template>
<div>
<LazyIdleMyComponent :loader="createIdleLoader({timeout: 3000})"/>
<LazyVisibleMyComponent :loader="createVisibleLoader({threshold: 0.2})"/>
<LazyEventMyComponent :loader="createEventLoader(['click','mouseover'])"/>
</div>
</template>
```
@ -174,8 +185,11 @@ If you would like to override the default hydration triggers when dealing with d
::read-more{to="/docs/api/utils/create-visible-loader"}
::
::read-more{to="/docs/api/utils/create-event-loader"}
::
::important
Since Nuxt uses `LazyIdle` and `LazyVisible` to handle delayed hydration, you should avoid naming your components that, as dynamic imports will break for you. Delayed hydration would still be possible by adding the prefix, for example to a component named `IdleBar`:
Since Nuxt uses `LazyIdle`, `LazyVisible`, and `LazyEvent` to handle delayed hydration, you should avoid naming your components that, as dynamic imports will break for you. Delayed hydration would still be possible by adding the prefix, for example to a component named `IdleBar`:
`<LazyIdleIdleBar />`
::