Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-29 17:07:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: hydration event callback example

Browse Source
This commit is contained in:
Michael Brevard 2024-09-14 21:54:02 +03:00 committed by GitHub
parent c0844b902e
commit bf131a2173
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 0 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

@ -268,6 +268,24 @@ This also means you would need to explicitly add the prefix to those components
For example, if you have a component named `IdleBar` and you'd like it to be delayed based on network idle time, you would need to use it like `<LazyIdleIdleBar>` and not `<LazyIdleBar>` to make it a delayed hydration component. Otherwise, it would be treated as a regular [dynamic import](/docs/guide/directory-structure/components#dynamic-imports) For example, if you have a component named `IdleBar` and you'd like it to be delayed based on network idle time, you would need to use it like `<LazyIdleIdleBar>` and not `<LazyIdleBar>` to make it a delayed hydration component. Otherwise, it would be treated as a regular [dynamic import](/docs/guide/directory-structure/components#dynamic-imports)
:: ::
### Listening to hydration events
All delayed hydration components have a `@hydrated` event that is fired whenever they are hydrated. You can listen to this event to trigger some action that depends on the component:
```vue [pages/index.vue]
<template>
<div>
<LazyVisibleMyComponent @hydrated="onHydrate" />
</div>
</template>
<script setup lang="ts">
function onHydrate() {
console.log("Component has been hydrated!")
}
</script>
```
### Caveats and best practices ### Caveats and best practices
Delayed hydration has many performance benefits, but in order to gain the most out of it, it's important to use it correctly: Delayed hydration has many performance benefits, but in order to gain the most out of it, it's important to use it correctly: