vue3-lazy-hydration

> Lazy Hydration of Server-Side Rendered Vue.js v3 Components

Inspired by vue-lazy-hydration, this library brings a renderless component, composables and import wrappers to delay the hydration of pre-rendered HTML.

Installation

Use yarn v1, npm or pnpm package manager to install vue3-lazy-hydration.

``bash


install with yarn

yarn add vue3-lazy-hydration

install with npm

npm install vue3-lazy-hydration

install with pnpm

pnpm add vue3-lazy-hydration
`

$3

If you want to use the renderless component you can either import it directly inside your Vue SFCs (see examples below) or make it available globally.

#### Global import for Vue

`js
import { createSSRApp } from 'vue';
import { LazyHydrationWrapper } from 'vue3-lazy-hydration';

const app = createSSRApp({});

app.component('LazyHydrationWrapper', LazyHydrationWrapper);

// or, you can use a custom registered name:
// use instead of
app.component('LazyHydrate', LazyHydrationWrapper);
`

#### Global import for Nuxt 3

Create a Nuxt 3 plugin inside the plugins directory. The filename doesn't matter as Nuxt auto-imports all top-level files of this directory.

`js
// plugins/lazy-hydration.ts
import { LazyHydrationWrapper } from 'vue3-lazy-hydration';

export default defineNuxtPlugin((nuxtApp) => {
// for custom registered name see Vue example above
nuxtApp.vueApp.component('LazyHydrationWrapper', LazyHydrationWrapper);
});
`

Usage

$3

- Never hydrate.

`html



`

- Delays hydration until the browser is idle.

`html


`

- Delays hydration until one of the root elements is visible.

`html



`

- Delays hydration until one of the elements triggers a DOM event (focus by default).

`html



`

- Delays hydration until manually triggered.

`html



`

#### Props declaration

`js
props: {

/* Number type refers to the timeout option passed to the requestIdleCallback API
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
*/
whenIdle: {
default: false,
type: [Boolean, Number],
},

/* Object type refers to the options passed to the IntersectionObserver API
* @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
*/
whenVisible: {
default: false,
type: [Boolean, Object],
},

/*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element#events
*/
onInteraction: {
default: false,
type: [Array, Boolean, String],
},

/*
* Object type refers to a ref object
* @see https://vuejs.org/api/reactivity-core.html#ref
*/
whenTriggered: {
default: undefined,
type: [Boolean, Object],
},
}
`

$3

#### useLazyHydration()

`html

`

#### useHydrateWhenIdle({ willPerformHydration, hydrate, onCleanup }, timeout = 2000)

`html

`

#### useHydrateWhenVisible({ hydrate, onCleanup }, observerOpts = {})

`html

`

#### useHydrateOnInteraction({ hydrate, onCleanup }, events = ['focus'])

`html

`

#### useHydrateWhenTriggered({ willPerformHydration, hydrate, onCleanup }, trigger)

`html

`

$3

#### hydrateNever(source)

Wrap a component in a renderless component that will never be hydrated.

`html



`

#### hydrateWhenIdle(source, timeout = 2000)

Wrap a component in a renderless component that will be hydrated when browser is idle.

`html



`

#### hydrateWhenVisible(source, observerOpts = {})

Wrap a component in a renderless component that will be hydrated when one of the root elements is visible.

`html



`

#### hydrateOnInteraction(source, events = ['focus'])

Wrap a component in a renderless component that will be hydrated when one of the elements trigger one of the events in the events parameter.

`html



`

#### hydrateWhenTriggered(source, trigger)

Wrap a component in a renderless component that will be hydrated when the trigger parameter changes to true.

`html



`

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update unit tests as appropriate.

$3

Use the pnpm package manager to install vue3-lazy-hydration.

1. Clone the repository

`bash
git clone https://github.com/freddy38510/vue3-lazy-hydration.git

cd vue3-lazy-hydration
`

2. Install dependencies

`bash
pnpm i
`

3. Start the development server which hosts a demo application to help develop the library

`bash
pnpm dev
``

Credits

Many thanks to Markus Oberlehner, the author of the package
vue-lazy-hydration.

License

MIT