Cookie

The cookie (opens new window).

Provides a wrapper to use js-cookie (opens new window).

Parameters

import { useCookie } from "@vue-composable/cookie";

useCookie(key, defaultValue, defaultOptions);

Parameters	Type	Required	Description
key	String	true	Cookie name
defaultValue	String	false	Set default value when cookie is undefined
defaultOptions	Object	false	Set default options when cookie is undefined. The js-cookie options (opens new window).

State

The useCookie function exposes the following reactive state:

import { useCookie } from "@vue-composable/cookie";

const { cookie } = useCookie("some-cookie");

State	Type	Description
cookie	Ref<String | null | undefined>	The cookie value

Methods

The useCookie function exposes the following methods:

import { useCookie } from "@vue-composable/cookie";

const { setCookie, removeCookie } = useCookie("some-cookie");

Signature	Description
setCookie	Update the cookie value
removeCookie	Remove the cookie

Example

cookie value:

Code

<template>
  <div>
    cookie value: {{ cookie }}
    <p>
      <button @click="updateCookie">Update Cookie</button>
    </p>
    <p>
      <button @click="deleteCookie">Remove Cookie</button>
    </p>
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";
import { useCookie } from "@vue-composable/cookie";

export default defineComponent({
  name: "cookie-example",

  setup() {
    let idx = 0;

    let { cookie, setCookie, removeCookie } = useCookie("my-cookie");

    function updateCookie() {
      cookie.value = `my-cookie-${++idx}`;
    }

    function deleteCookie() {
      removeCookie();
    }

    return {
      cookie,

      updateCookie,
      deleteCookie,
    };
  },
});
</script>

<style></style>