https://github.com/hebilicious/dom-snapshot-nuxt
DOM Snapshot module for Nuxt
https://github.com/hebilicious/dom-snapshot-nuxt
Last synced: about 1 year ago
JSON representation
DOM Snapshot module for Nuxt
- Host: GitHub
- URL: https://github.com/hebilicious/dom-snapshot-nuxt
- Owner: Hebilicious
- License: mit
- Created: 2023-06-21T17:24:15.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-30T11:07:44.000Z (about 2 years ago)
- Last Synced: 2024-05-01T15:55:53.565Z (about 2 years ago)
- Language: TypeScript
- Size: 522 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Snapshot Dom Nuxt Module
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[](https://github.com/Hebilicious/dom-snapshot-nuxt/actions/workflows/ci.yaml)
[](https://opensource.org/licenses/MIT)
[npm-version-src]: https://img.shields.io/npm/v/@hebilicious/dom-snapshot-nuxt
[npm-version-href]: https://npmjs.com/package/@hebilicious/dom-snapshot-nuxt
[npm-downloads-src]: https://img.shields.io/npm/dm/@hebilicious/dom-snapshot-nuxt
[npm-downloads-href]: https://npmjs.com/package/@hebilicious/dom-snapshot-nuxt
🚀 Welcome to __Hebilicious Snapshot Dom Nuxt Module__!
Inspired by [SvelteKit's](https://kit.svelte.dev/docs/snapshots) same feature.
Ephemeral DOM state — like scroll positions on sidebars, the content of elements and so on — is discarded when you navigate from one page to another.
For example, if the user fills out a form but clicks a link before submitting, then hits the browser's back button, the values they filled in will be lost. In cases where it's valuable to preserve that input, you can take a snapshot of DOM state, which can then be restored if the user navigates back.
## 📦 Installation
Install this module from NPM :
```bash
npm i @hebilicious/snapshot-dom-nuxt-module
```
Add it to your `nuxt.config.ts` file:
```ts
export default defineNuxtConfig({
modules: [
"@hebilicious/snapshot-dom-nuxt-module"
]
})
```
## 🚀 Usage
```vue
const comment = ref("") // This will be restored on nav and refresh
const another = ref("") // This will be restored on nav
const no = ref("") // This won't be
// auto imported
useSnapshot([
{ capture: comment, restore: (v) => { comment.value = v } },
{ capture: another, restore: (v) => { another.value = v }, persist: false }
])
```
- The restoration will work after a navigation and a hard reload, like hitting the refresh button or navigating to another site and coming back.
- The restore function will run when the route path is matched
- The hard reload feature works with the sessionStorage
- The captured data must be serializable with `JSON.stringify` for the sessionStorage.
- The captured data is kept in memory for the client side routing.
- Browser ession storage is limited, so don't use something too large.
## 📦 Contributing
Contributions, issues and feature requests are welcome!
1. Fork this repo
2. Install `node` and `pnpm` _Use `corepack enable && corepack prepare pnpm@latest --activate` to install pnpm easily_
3. Use `pnpm i` at the mono-repo root.
4. Make modifications and follow conventional commits.
5. Open a PR 🚀🚀🚀