# defineLazyHydrationComponent > Define a lazy hydration component with a specific strategy. `defineLazyHydrationComponent` is a compiler macro that helps you create a component with a specific lazy hydration strategy. Lazy hydration defers hydration until components become visible or until the browser has completed more critical tasks. This can significantly reduce the initial performance cost, especially for non-essential components. ## Usage ### Visibility Strategy Hydrates the component when it becomes visible in the viewport. ```vue ``` The `hydrateOnVisible` prop is optional. You can pass an object to customize the behavior of the `IntersectionObserver` under the hood. Read more about the options for `hydrate-on-visible`. Under the hood, this uses Vue's built-in [`hydrateOnVisible` strategy](https://vuejs.org/guide/components/async#hydrate-on-visible). ### Idle Strategy Hydrates the component when the browser is idle. This is suitable if you need the component to load as soon as possible, but not block the critical rendering path. ```vue ``` The `hydrateOnIdle` prop is optional. You can pass a positive number to specify the maximum timeout. Idle strategy is for components that can be hydrated when the browser is idle. Under the hood, this uses Vue's built-in [`hydrateOnIdle` strategy](https://vuejs.org/guide/components/async#hydrate-on-idle). ### Interaction Strategy Hydrates the component after a specified interaction (e.g., click, mouseover). ```vue ``` The `hydrateOnInteraction` prop is optional. If you do not pass an event or a list of events, it defaults to hydrating on `pointerenter`, `click`, and `focus`. Under the hood, this uses Vue's built-in [`hydrateOnInteraction` strategy](https://vuejs.org/guide/components/async#hydrate-on-interaction). ### Media Query Strategy Hydrates the component when the window matches a media query. ```vue ``` Under the hood, this uses Vue's built-in [`hydrateOnMediaQuery` strategy](https://vuejs.org/guide/components/async#hydrate-on-media-query). ### Time Strategy Hydrates the component after a specified delay (in milliseconds). ```vue ``` Time strategy is for components that can wait a specific amount of time. ### If Strategy Hydrates the component based on a boolean condition. ```vue ``` If strategy is best for components that might not always need to be hydrated. ### Never Hydrate Never hydrates the component. ```vue ``` ### Listening to Hydration Events All delayed hydration components emit a `@hydrated` event when they are hydrated. ```vue ``` ## Parameters To ensure that the compiler correctly recognizes this macro, avoid using external variables. The following approach will prevent the macro from being properly recognized: ```vue ``` ### `strategy` - **Type**: `'visible' | 'idle' | 'interaction' | 'mediaQuery' | 'if' | 'time' | 'never'` - **Required**: `true`

Strategy	Description
`visible`	Hydrates when the component becomes visible in the viewport.
`idle`	Hydrates when the browser is idle or after a delay.
`interaction`	Hydrates upon user interaction (e.g., click, hover).
`mediaQuery`	Hydrates when the specified media query condition is met.
`if`	Hydrates when a specified boolean condition is met.
`time`	Hydrates after a specified time delay.
`never`	Prevents Vue from hydrating the component.

### `source` - **Type**: `() => Promise` - **Required**: `true` --- - [Source](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/components/plugins/lazy-hydration-macro-transform.ts)