@vuebits/cookies

Vue plugin for cookies parameterization

Usage no npm install needed!

<script type="module">
  import vuebitsCookies from 'https://cdn.skypack.dev/@vuebits/cookies';
</script>

README

Vuebits cookies

*** Maintainers & Contributors welcome ***

Vue 3 library for cookies management


Table of Contents

Installation

npm i @vuebits/cookies / yarn add @vuebits/cookies

And install in your entry file (e.g. main.js):

import { createCookies } from '@vuebits/cookies';

createApp(App).use(createCookies({ /* your config here */ })).mount('#app');

API

Available functions:

  • createCookies (options: CookiesConfig):
interface CookiesConfig {
  expireTimes?: string | number | Date;
  path?: string;
  domain?: string;
  secure?: boolean;
  sameSite?: string;
}

Vue instance properties and methods:

  • $cookies: Cookies:
interface Cookies {
  config(config: CookiesConfig): void;
  set(keyName: string,
    value: any,
    expireTimes?: string | number | Date,
    path?: string,
    domain?: string,
    secure?: boolean,
    sameSite?: string): this;
  get(keyName: string): any;
  remove(keyName: string, path?: string, domain?: string): boolean;
  isKey(keyName: string): boolean;
  keys(): string[];
}

Examples

<template>
  <main>
    <button @click="setCookie">
      Set cookie "test"
    </button>
    <button @click="getCookie">
      Get cookie "test"
    </button>
    <button @click="removeCookie">
      Remove cookie "test"
    </button>
    <div>
      cookie "test": {{ cookie }}
    </div>
  </main>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  data () {
    return {
      cookie: null as any
    };
  },
  methods: {
    setCookie (): void {
      this.$cookies.set('test', 123);
    },
    getCookie (): void {
      this.cookie = this.$cookies.get('test');
    },
    removeCookie (): void {
      this.$cookies.remove('test');
    }
  }
});
</script>