useHydration

The useHydration composable provides SSR hydration state management, allowing you to detect when your application has been hydrated on the client side. This is essential for preventing hydration mismatches and controlling when browser-only features should activate.

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.