useHydration

Control SSR hydration timing to prevent mismatches and optimize client-side rendering.

Installation

Install the Hydration plugin in your app’s entry point:

import { createApp } from 'vue'
import { createHydrationPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(createHydrationPlugin())

app.mount('#app')

Usage

Once the plugin is installed, use the useHydration composable in any component. Destructure the properties for automatic ref unwrapping in templates:

<script setup lang="ts">
  import { useHydration } from '@vuetify/v0'

  const { isHydrated, isSettled } = useHydration()

  // In script, access .value
  if (isHydrated.value) {
    console.log('Hydration complete')
  }
</script>

<template>
  <div>
    <!-- Destructured refs auto-unwrap in templates -->
    <p v-if="isHydrated">
      Application is hydrated - browser features available
    </p>
    <p v-else>
      Rendering on server or waiting for hydration
    </p>
  </div>
</template>

Architecture

useHydration uses the plugin pattern with a simple boolean state:

Reactivity

All properties are Readonly<ShallowRef> and update when the root component mounts. Use .value in script; destructure for template auto-unwrapping.

Fallback Hydration

When useHydration() is called without the plugin installed (no createHydrationPlugin in your app), it returns a fallback context where isHydrated and isSettled are immediately true. This means components that conditionally render based on isHydrated work correctly in client-only apps without any plugin setup.

// Without plugin: isHydrated.value === true immediately
// With plugin:    isHydrated.value starts false, becomes true after mount
const { isHydrated } = useHydration()

Examples