quasar-app-extension-storagedirective v1.0.0

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 will be gathered automatically and will be the same name as the v-model varmame (myVar).

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

Example:

<script setup>
  const leftDrawerOpen = ref(false)
</script>
<template>
  <q-drawer v-model="leftDrawerOpen" v-storage />
</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
  does overwrite the v-model varname with (storageName) instead.

values

• name
  same as in arguments, but as object: v-storage="{name: '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.