Vue 3.5 supports built-in lazy hydration strategies for async components — hydrate only when visible, when idle, or on interaction.

<script setup>
import {
  defineAsyncComponent,
  hydrateOnVisible,
  hydrateOnIdle,
  hydrateOnInteraction,
} from 'vue'

// Hydrate when the component scrolls into view
const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  hydrate: hydrateOnVisible(),
})

// Hydrate when the browser is idle
const AdBanner = defineAsyncComponent({
  loader: () => import('./AdBanner.vue'),
  hydrate: hydrateOnIdle(5000),
})

// Hydrate on specific user interactions
const Dropdown = defineAsyncComponent({
  loader: () => import('./Dropdown.vue'),
  hydrate: hydrateOnInteraction(['click', 'mouseover']),
})
</script>

<template>
  <HeavyChart />
  <AdBanner />
  <Dropdown />
</template>

VueNuxtViteVueTips & Tricks

Vue 3.5 supports built-in lazy hydration strategies for async components — hydrate only when visible, when idle, or on interaction.