@hebilicious/dom-snapshot-nuxt

⚗️ 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!

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 🚀🚀🚀