https://github.com/danielroe/nuxt-pre-hydrate
https://github.com/danielroe/nuxt-pre-hydrate
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/danielroe/nuxt-pre-hydrate
- Owner: danielroe
- License: mit
- Created: 2023-02-13T17:20:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T17:47:56.000Z (about 2 years ago)
- Last Synced: 2024-04-13T17:53:46.373Z (about 2 years ago)
- Language: TypeScript
- Size: 596 KB
- Stars: 46
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> [!IMPORTANT]
> A new `onPrehydrate` hook was added to Nuxt core in v3.12.0 which replaces this module - see https://github.com/nuxt/nuxt/pull/27037.
---
# Nuxt Pre-Hydrate
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions][github-actions-src]][github-actions-href]
[![Codecov][codecov-src]][codecov-href]
> Safely run pre-hydration steps on the client with [Nuxt 3](https://nuxt.com)
- [✨ Changelog](https://github.com/danielroe/nuxt-pre-hydrate/blob/main/CHANGELOG.md)
- [▶️ Online playground](https://stackblitz.com/github/danielroe/nuxt-pre-hydrate/tree/main/playground)
## Features
- 💪 Prevents hydration mismatch on client
- 🏁 Fully configurable
- ⚠️ Experimental and under developemnt
## Installation
Install and add `nuxt-pre-hydrate` to your `nuxt.config`.
```bash
# Whichever matches your package manager
pnpm add -D nuxt-pre-hydrate
npm install -D nuxt-pre-hydrate
yarn add -D nuxt-pre-hydrate
```
```js
export default defineNuxtConfig({
modules: ['nuxt-pre-hydrate'],
})
```
## Usage
To use, you can use the `` component anywhere in your app.
```vue
const contentRenderer = (renderProps) => /* return a string of the HTML meant to be rendered on the client */
{{ contentRenderer() }}
```
## 💻 Development
- Clone this repository
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Stub module with `pnpm dev:prepare`
- Run `pnpm dev` to start [playground](./playground) in development mode
## License
Made with ❤️
Published under the [MIT License](./LICENCE).
[npm-version-src]: https://img.shields.io/npm/v/nuxt-pre-hydrate?style=flat-square
[npm-version-href]: https://npmjs.com/package/nuxt-pre-hydrate
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-pre-hydrate?style=flat-square
[npm-downloads-href]: https://npm.chart.dev/nuxt-pre-hydrate
[github-actions-src]: https://img.shields.io/github/actions/workflow/status/danielroe/nuxt-pre-hydrate/ci.yml?branch=main
[github-actions-href]: https://github.com/danielroe/nuxt-pre-hydrate/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/gh/danielroe/nuxt-pre-hydrate/main?style=flat-square
[codecov-href]: https://codecov.io/gh/danielroe/nuxt-pre-hydrate