Quasar App Extension storagedirective

A Quasar AE for a Vue Custom Directive

With that Quasar App Extension it is possible to use a Vue custom directive (v-storage) to make a reactive variable (v-model="myVar") persistent to either LocalStorage or Cookies.

The storage name must be set as argument as in arguments shown.

There are some further directive-arguments, -modifiers and -values explained under Info.

Example:

<script setup>
  const leftDrawerOpen = ref(false)
</script>
<template>
  <q-drawer v-model="leftDrawerOpen" v-storage:leftDrawerOpen />
</template>

This does save the value of leftDrawerOpen in LocalStorage.setItem("leftDrawerOpen",leftDrawerOpen) on update and read it back on mounted

Install

quasar ext add storagedirective

Quasar CLI will retrieve it from the NPM registry and install the extension to your project.

Uninstall

quasar ext remove storagedirective

Info

modifiers

• v-storage.local, v-storage
  Default. Stores value into LocalStorage
  Does use the underlying Quasar Web Storages Plugin

• v-storage.cookie
  Stores value into a Cookie. If SSR mode, it is taken into account.
  Does use the underlying Quasar Cookies Plugin

arguments

• v-storage:storageName
  sets the varname (storageName) for storage key.

values (optional)

• name
  same as in arguments, but as object: v-storage="{name: 'form.storageName'}"

• params
  only params for cookies: v-storage.cookie="{params: {expires: 365,sameSite: 'Strict',httpOnly: true}}"

Other Info

• Does use LocalStorage and Cookies Quasar Plugins.

• Will throw an error if no storagename could be gathered or was set.

Donate

If you appreciate the work that went into this App Extension, please consider PayPal Donate.