Skip to content

Instantly share code, notes, and snippets.

Created January 16, 2021 20:56
What would you like to do?
import Vue from "vue";
function setupWatchers(data = []) {
if (!(this instanceof Vue)) throw new Error("Persistence plugin needs to be called from a Vue component");
if (!data) return;
const query = new URLSearchParams(;
data.forEach((name) => {
const key = `${this.$}_${name}`;
if (query.has(key)) this[name] = JSON.parse(query.get(key));
this.$watch(name, (val) => serializeToStorage(key, val));
* Appends or deletes filter param in query string
const serializeToStorage = (key, val) => {
const query = new URLSearchParams(;
// TODO: Best way to check if val is empty? Should we also remove 0?
// Another option is to store the default/initial value per key and delete from query if initial
if (val) {
if (query.has(key)) query.set(key, JSON.stringify(val));
else query.append(key, JSON.stringify(val));
} else {
const addQuery = !![...query.keys()].length;
history.replaceState(null, "", `${location.pathname}${addQuery ? "?" : ""}${query}`);
* Vue plugin that sets up watchers for provided data properties and syncs them to the URI's query string
* TODO: Decide how to scope values in query (e.g. component name can be repeated as well)
* TODO: Decide how to handle data model changes
* TODO: Look into ways to shorten the URL (last resort could even be a small self-hosted tinyurl service)
export default function (Vue) {
Vue.prototype.$persist = setupWatchers;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment