@vercube/nuxt-lazy-hydration

Lazy Hydration of Server-Side Rendered for Nuxt 3

👉 Demo with Nuxt on StackBlitz

Installation

# or npm / yarn
$ pnpm add @vercube/nuxt-lazy-hydration

Add to modules in nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  modules: ['@vercube/nuxt-lazy-hydration'],
});

Usage

To use NuxtLazyHydration just wrap your component with wrapper.

<template>
  <NuxtLazyHydration whenVisible>
    <p>Hydrated when component will be visible on screen<p>
  </NuxtLazyHydration>
</template>

You can also use it with composable

<template>
  <NeverHydratedComponent/>
</template>

<script lang="ts" setup>
  const NeverHydratedComponent = useLazyHydration(
    () => import('./SomeComponent.vue'),
    { ssrOnly: true },
  );

</script>

Props

You can find all possible props here

License

MIT