useCookies

Wrapper for universal-cookie.

::: tip When using with Nuxt 3, this functions will NOT be auto imported in favor of Nuxt's built-in useCookie(). Use explicit import if you want to use the function from VueUse. :::

Install

npm i universal-cookie@^7

Usage

Common usage

<script setup lang="ts">
import { useCookies } from '@vueuse/integrations/useCookies'

const cookies = useCookies(['locale'])
</script>

<template>
  <div>
    <strong>locale</strong>: {{ cookies.get('locale') }}
    <hr>
    <pre>{{ cookies.getAll() }}</pre>
    <button @click="cookies.set('locale', 'ru-RU')">
      Russian
    </button>
    <button @click="cookies.set('locale', 'en-US')">
      English
    </button>
  </div>
</template>

Options

Access and modify cookies using vue composition-api.

By default, you should use it inside setup(), but this function also works anywhere else.

import { useCookies } from '@vueuse/integrations/useCookies'
// ---cut---
const {
  get,
  getAll,
  set,
  remove,
  addChangeListener,
  removeChangeListener
} = useCookies(['cookie-name'], {
  doNotParse: false,
  autoUpdateDependencies: false
})

dependencies (optional)

Let you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.

options (optional)

• doNotParse (boolean = false): do not convert the cookie into an object no matter what. Passed as default value to get/getAll methods.
• autoUpdateDependencies (boolean = false): automatically add cookie names ever provided to get method. If true then you don't need to care about provided dependencies.

cookies (optional)

Let you provide a universal-cookie instance (creates a new instance by default)

Info about methods available in the universal-cookie api docs

createCookies([req])

Create a universal-cookie instance using request (default is window.document.cookie) and returns useCookies function with provided universal-cookie instance

• req (object): Node's http.IncomingMessage request object