Hydration Directives 🏝

You can define which components should remain interactive in the production build by using client: directives in your components.

Any JS required for these components will be automatically inferred and optimized to perform partial hydration in the final build.

Performance

No JS is shipped unless you use a hydration strategy!

You can use these directives inside your Vue components. In the following example, the Download link is rendered statically, while the <Audio> component is interactive and will be hydrated when visible.

<template>
  <div class="audio-player">
    <Audio client:visible :src="audio" :initialDuration="initialDuration"/>

    <div>
      <a :href="audio" :download="`${title}.mp3`">
        Download the Song
      </a>
    </div>
  </div>
</template>

The following hydration strategies are available:

client:load

Hydrates the component immediately as the page loads.

<DarkModeSwitch client:load />

client:idle

Hydrate the component as soon as the main thread is free.

<TimeAgo :date="date" client:idle />

client:visible

Hydrates the component as soon as the element enters the viewport.

<AudioPlayer :src="/example.mp3" client:visible />

client:only

Does not prerender the component during build.

<Comments :items="comments" client:only />

CLS warning

Because it’s not pre-rendered it could cause layout shift and affect the user experience.

Prefer one of the previous strategies whenever possible.