Vue/Quasar: Persist a ref value to local storage

usePersistedRef.ts

// Persist a ref value to local storage
// Quasar performs the conversion to/from the data type T
// https://quasar.dev/quasar-plugins/web-storage#localstorage-api
// usePersistedRef.ts
import { watch, Ref } from 'vue';
import { LocalStorage } from 'quasar';

export function usePersistedRef<T>(key: string, ref: Ref<T>): Ref<T> {
  const storedValue = LocalStorage.getItem(key) as T

  // Watch for changes to the value and persist them to LocalStorage
  watch(ref, (newValue) => {
    LocalStorage.set(key, newValue);
  });
  
  // If there is a stored value, update the passed ref with it
  if (storedValue !== null) {
    ref.value = storedValue;
  }

  return ref;
}