Nuxt/docs/3.api/3.utils/create-event-loader.md

34 lines
954 B
Markdown
Raw Normal View History

2024-06-14 22:06:47 +00:00
---
title: 'createEventLoader'
description: A utility function to select the events used for event-based delayed hydration.
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 set specific events that would trigger hydration in event-based delayed hydration components.
## Parameters
- `options`: An array of valid HTML events.
## Example
If you would like to trigger hydration when the element is either clicked or has the mouse over it:
```vue [pages/index.vue]
<template>
<div>
2024-06-21 21:20:01 +00:00
<LazyEventMyComponent :hydrate="createEventLoader(['click','mouseover'])"/>
2024-06-14 22:06:47 +00:00
</div>
<template>
```
::read-more{to="/docs/guide/directory-structure/components#delayed-hydration"}
::
::read-more{to="https://developer.mozilla.org/en-US/docs/Web/API/Element#events"}
Read more on the possible events that can be used.
::