Safely run pre-hydration steps on the client with Nuxt 3
MIT License
Safely run pre-hydration steps on the client with Nuxt 3
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'],
})
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>
corepack enable
pnpm install
pnpm dev:prepare
pnpm dev
to start playground in development modeMade with ❤️
Published under the MIT License.