0.0.1 • Published 1 year ago
nuxt-pre-hydrate v0.0.1
Nuxt Pre-Hydrate
Safely run pre-hydration steps on the client with Nuxt 3
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
(usenpm 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.
0.0.1
1 year ago