nuxt-lazy-hydrate
This module is a wrapper around Vue 3 Lazy Hydration Plugin for Nuxt 3.
Huge kudos to the package author and also to Markus Oberleihner for developing this amazing idea.
Make sure to give a star to both of these projects:
Setup
yarn add nuxt-lazy-hydrate
npm i nuxt-lazy-hydrate
Usage
The only thing you need to do to use the module in the default configuration is to register the module in the modules
array in nuxt.config.ts
:
{
modules: ["nuxt-lazy-hydrate"],
}
And that's it! You can now use the LazyHydrate
component in your Nuxt app:
<template>
<div>
<NuxtLazyHydrate when-idle>
<p>Nuxt module playground!</p>
</NuxtLazyHydrate>
</div>
</template>
For all configuration options of this component, please head out to Vue 3 Lazy Hydration Package
Development
- Run
npm run dev:prepare
to generate type stubs. - Use
npm run dev
to start playground in development mode.