{"id":16398146,"url":"https://github.com/hebilicious/dom-snapshot-nuxt","last_synced_at":"2025-03-16T16:31:31.200Z","repository":{"id":176865154,"uuid":"656808640","full_name":"Hebilicious/dom-snapshot-nuxt","owner":"Hebilicious","description":"DOM Snapshot module for Nuxt","archived":false,"fork":false,"pushed_at":"2024-04-30T11:07:44.000Z","size":535,"stargazers_count":9,"open_issues_count":11,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-01T15:55:53.565Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hebilicious.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Hebilicious"]}},"created_at":"2023-06-21T17:24:15.000Z","updated_at":"2024-05-02T21:47:59.845Z","dependencies_parsed_at":"2023-12-19T16:17:21.620Z","dependency_job_id":"5cfad56d-fcea-4ea0-b9c1-803f9bb1013d","html_url":"https://github.com/Hebilicious/dom-snapshot-nuxt","commit_stats":null,"previous_names":["hebilicious/dom-snapshot-nuxt"],"tags_count":2,"template":false,"template_full_name":"Hebilicious/nuxt-module-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fdom-snapshot-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fdom-snapshot-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fdom-snapshot-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fdom-snapshot-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hebilicious","download_url":"https://codeload.github.com/Hebilicious/dom-snapshot-nuxt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822293,"owners_count":20353499,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T05:11:58.124Z","updated_at":"2025-03-16T16:31:30.814Z","avatar_url":"https://github.com/Hebilicious.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Hebilicious"],"categories":[],"sub_categories":[],"readme":"# Snapshot Dom Nuxt Module\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![CI](https://github.com/Hebilicious/dom-snapshot-nuxt/actions/workflows/ci.yaml/badge.svg)](https://github.com/Hebilicious/dom-snapshot-nuxt/actions/workflows/ci.yaml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n[npm-version-src]: https://img.shields.io/npm/v/@hebilicious/dom-snapshot-nuxt\n[npm-version-href]: https://npmjs.com/package/@hebilicious/dom-snapshot-nuxt\n[npm-downloads-src]: https://img.shields.io/npm/dm/@hebilicious/dom-snapshot-nuxt\n[npm-downloads-href]: https://npmjs.com/package/@hebilicious/dom-snapshot-nuxt\n\n🚀 Welcome to __Hebilicious Snapshot Dom Nuxt Module__!  \n\nInspired by [SvelteKit's](https://kit.svelte.dev/docs/snapshots) same feature.\n\nEphemeral DOM state — like scroll positions on sidebars, the content of \u003cinput\u003e elements and so on — is discarded when you navigate from one page to another.\n\nFor 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.\n\n## 📦 Installation\n\nInstall this module from NPM :\n\n```bash\nnpm i @hebilicious/snapshot-dom-nuxt-module\n```\n\nAdd it to your `nuxt.config.ts` file:\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\n    \"@hebilicious/snapshot-dom-nuxt-module\"\n  ]\n})\n```\n\n## 🚀 Usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst comment = ref(\"\") // This will be restored on nav and refresh\nconst another = ref(\"\") // This will be restored on nav\nconst no = ref(\"\") // This won't be\n\n// auto imported\nuseSnapshot([\n  { capture: comment, restore: (v) =\u003e { comment.value = v } },\n  { capture: another, restore: (v) =\u003e { another.value = v }, persist: false }\n])\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cinput v-model=\"comment\" type=\"text\"\u003e\n  \u003cinput v-model=\"another\" type=\"text\"\u003e\n  \u003cinput v-model=\"no\" type=\"text\"\u003e\n\u003c/template\u003e\n```\n\n- The restoration will work after a navigation and a hard reload, like hitting the refresh button or navigating to another site and coming back.\n- The restore function will run when the route path is matched\n- The hard reload feature works with the sessionStorage\n- The captured data must be serializable with `JSON.stringify` for the sessionStorage.\n- The captured data is kept in memory for the client side routing.\n- Browser ession storage is limited, so don't use something too large.\n\n## 📦 Contributing\n\nContributions, issues and feature requests are welcome!\n\n1. Fork this repo\n\n2. Install `node` and `pnpm` _Use `corepack enable \u0026\u0026 corepack prepare pnpm@latest --activate` to install pnpm easily_\n\n3. Use `pnpm i` at the mono-repo root.\n\n4. Make modifications and follow conventional commits.\n\n5. Open a PR 🚀🚀🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhebilicious%2Fdom-snapshot-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhebilicious%2Fdom-snapshot-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhebilicious%2Fdom-snapshot-nuxt/lists"}