@vercube/vue-lazy-hydration

Lazy Hydration of Server-Side Rendered for Vue 3

👉 Demo with Nuxt on StackBlitz

Installation

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

For Vue applications, you can register LazyHydration either globally or locally within your components.

Global Registration

You can register LazyHydration globally as follows:

import { createSSRApp } from 'vue';
import { LazyHydration } from '@vercube/vue-lazy-hydration';

const app = createSSRApp({});

app.component('LazyHydration', LazyHydration);

Local Registration

Alternatively, you can import LazyHydration directly into your Vue components like this:

<script setup lang="ts">
  import { LazyHydration } from '@vercube/vue-lazy-hydration';
</script>

Usage

To use LazyHydration just wrap your component with wrapper.

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

You can also use it with composable

<template>
  <NeverHydratedComponent/>
</template>

<script lang="ts" setup>
  import { useLazyHydration } from '@vercube/vue-lazy-hydration';

  const NeverHydratedComponent = useLazyHydration(
    () => import('./SomeComponent.vue'),
    { ssrOnly: true },
  );

</script>

Props

You can find all possible props here

License

MIT