composables/lazy-hydration

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineLazyHydrationComponent macro overview

defineLazyHydrationComponent is a compiler macro that creates 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, which significantly reduces initial performance cost for non-essential components.

defineLazyHydrationComponent signature and parameters

defineLazyHydrationComponent strategy parameter options

The strategy parameter accepts seven values: '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 like click or 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.

visible strategy with hydrate-on-visible prop

The visible strategy hydrates a component when it becomes visible in the viewport. The hydrateOnVisible prop is optional and accepts an object to customize IntersectionObserver behavior. By default, hydration is triggered when the element is 100px away from entering the viewport, which can be customized via the rootMargin option.

visible strategy example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'visible', () => import('./components/MyComponent.vue'), ) // In template: <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" /> This example shows how to create a component that hydrates when it becomes visible in the viewport, with a 100px margin before the element enters the viewport.

idle strategy with hydrate-on-idle prop

The idle strategy hydrates the component when the browser is idle. This is suitable for components that need to load as soon as possible but should not block the critical rendering path. The hydrateOnIdle prop is optional and accepts a positive number to specify the maximum timeout in milliseconds.

idle strategy example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'idle', () => import('./components/MyComponent.vue'), ) // In template: <LazyHydrationMyComponent :hydrate-on-idle="2000" /> This example shows how to create a component that hydrates when the browser is idle, with a maximum timeout of 2000ms.

interaction strategy with hydrate-on-interaction prop

The interaction strategy hydrates the component after a specified user interaction. The hydrateOnInteraction prop is optional and accepts an event name or list of event names. If no event is passed, it defaults to hydrating on 'pointerenter', 'click', and 'focus' events.

interaction strategy example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'interaction', () => import('./components/MyComponent.vue'), ) // In template: <LazyHydrationMyComponent hydrate-on-interaction="mouseover" /> This example shows how to create a component that hydrates when hovered over by the pointer.

mediaQuery strategy with hydrate-on-media-query prop

The mediaQuery strategy hydrates the component when the window matches a specified media query. The hydrateOnMediaQuery prop accepts a CSS media query string.

mediaQuery strategy example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'mediaQuery', () => import('./components/MyComponent.vue'), ) // In template: <LazyHydrationMyComponent hydrate-on-media-query="(min-width: 768px)" /> This example shows how to create a component that hydrates when the window width is greater than or equal to 768px.

time strategy with hydrate-after prop

The time strategy hydrates the component after a specified delay in milliseconds. The hydrateAfter prop accepts a positive number representing the delay.

time strategy example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'time', () => import('./components/MyComponent.vue'), ) // In template: <LazyHydrationMyComponent :hydrate-after="1000" /> This example shows how to create a component that hydrates after a 1000ms delay.

if strategy with hydrate-when prop

The if strategy hydrates the component based on a boolean condition. The hydrateWhen prop accepts a boolean ref or value that determines when hydration should occur. This strategy is best for components that might not always need to be hydrated.

if strategy example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'if', () => import('./components/MyComponent.vue'), ) const isReady = ref(false) function myFunction () { isReady.value = true } // In template: <LazyHydrationMyComponent :hydrate-when="isReady" /> This example shows how to create a component that hydrates when a boolean condition becomes true.

never strategy

The never strategy prevents Vue from hydrating the component entirely. The component will remain static and never be hydrated.

never strategy example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'never', () => import('./components/MyComponent.vue'), ) // In template: <LazyHydrationMyComponent /> This example shows how to create a component that will never be hydrated by Vue.

hydrated event example

const LazyHydrationMyComponent = defineLazyHydrationComponent( 'visible', () => import('./components/MyComponent.vue'), ) function onHydrated () { console.log('Component has been hydrated!') } // In template: <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" @hydrated="onHydrated" /> This example shows how to listen to the @hydrated event emitted when a lazy hydration component is hydrated.

defineLazyHydrationComponent compiler macro recognition

To ensure the compiler correctly recognizes defineLazyHydrationComponent, avoid using external variables. The strategy and source parameters must be passed as literal values directly in the function call, not as variables assigned before the call.

defineLazyHydrationComponent minimum Nuxt version

defineLazyHydrationComponent requires Nuxt version 3.18 or higher.

Give your agent this brain