@hebilicious/dom-snapshot-nuxt
v0.0.3
Published
π Welcome to __Hebilicious Snapshot Dom Nuxt Module__!
Downloads
1
Readme
βοΈ Snapshot Dom Nuxt Module
π Welcome to Hebilicious Snapshot Dom Nuxt Module!
Inspired by SvelteKit 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 :
npm i @hebilicious/snapshot-dom-nuxt-module
Add it to your nuxt.config.ts
file:
export default defineNuxtConfig({
modules: [
"@hebilicious/snapshot-dom-nuxt-module"
]
})
π Usage
<script setup lang="ts">
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
useSnapshot([
{ capture: comment, restore: (v) => { comment.value = toValue(v) } },
{ capture: another, restore: (v) => { another.value = toValue(v) }, persist: false }
])
</script>
<template>
<input v-model="comment" type="text">
<input v-model="another" type="text">
<input v-model="no" type="text">
</template>
- 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 captured data must be serialized with
JSON.stringify
- The captured data is kept in memory, so don't capture too much data.
- If the data is too large, the session storage won't work.
π¦ Contributing
Contributions, issues and feature requests are welcome!
Fork this repo
Install
node
andpnpm
Usecorepack enable && corepack prepare pnpm@latest --activate
to install pnpm easilyUse
pnpm i
at the mono-repo root.Make modifications and follow conventional commits.
Open a PR πππ