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

First, install the hydration plugin in your application:

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:

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

const hydration = useHydration()
</script>

<template>
  <div>
    <p v-if="hydration.isHydrated.value">
      Application is hydrated - browser features available
    </p>
    <p v-else>
      Rendering on server or waiting for hydration
    </p>
  </div>
</template>

API

Hydration Context

The useHydration() composable returns a context with the following properties and methods:

interface HydrationContext {
  isHydrated: Readonly<ShallowRef<boolean>>
  hydrate: () => void
}

• isHydrated: Reactive boolean indicating whether the application has been hydrated
• hydrate(): Manually trigger hydration (typically called automatically by the plugin)

How Hydration Works

The hydration plugin automatically detects when the root component has mounted and marks the application as hydrated:

1. During SSR, isHydrated is false
2. When the root component mounts on the client, the plugin calls hydrate()
3. isHydrated becomes true, signaling that browser APIs are safe to use
4. Components that depend on hydration state can now activate browser-only features

The plugin uses a Vue mixin to detect the root component mount:

app.mixin({
  mounted() {
    if (this.$parent !== null) return // Skip child components
    context.hydrate() // Only hydrate on root mount
  }
})