Nuxt Pre-Hydrate

Safely run pre-hydration steps on the client with Nuxt 3

• ✨  Changelog
• ▶️  Online playground

Features

• 💪 Prevents hydration mismatch on client
• 🏁 Fully configurable
• ⚠️ Experimental and under developemnt

Installation

Install and add nuxt-pre-hydrate to your nuxt.config.

# Whichever matches your package manager
pnpm add -D nuxt-pre-hydrate
npm install -D nuxt-pre-hydrate
yarn add -D nuxt-pre-hydrate

export default defineNuxtConfig({
  modules: ['nuxt-pre-hydrate'],
})

Usage

To use, you can use the <PreHydrate> component anywhere in your app.

<script setup lang="ts">
const contentRenderer = (renderProps) => /* return a string of the HTML meant to be rendered on the client */
</script>

<template>
  <PreHydrate tag="div" :renderContent="contentRenderer" strategy-name="test" v-bind="renderProps">
    {{ contentRenderer() }}
  </PreHydrate>
</template>

💻 Development

• Clone this repository
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Install dependencies using pnpm install
• Stub module with pnpm dev:prepare
• Run pnpm dev to start playground in development mode

License

Made with ❤️

Published under the MIT License.