vuejstips.

Write better Vue and Nuxt code.

A highly curated collection of practical tips, advanced patterns, and performance tweaks for Vue & Nuxt.

useTip.ts
const { tip } = useAsyncData(
  'awesome-trick',
  () => queryContent().findOne()
)

Popular Topics
vue
nuxt
vite
previousnext

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>