Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

4.9 KiB

Raw Blame History

category
@Integrations

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

Type Declarations

/**
 * Creates a new {@link useCookies} function
 * @param req - incoming http request (for SSR)
 * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
 * @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
 */
export declare function createCookies(req?: IncomingMessage): (
  dependencies?: string[] | null,
  {
    doNotParse,
    autoUpdateDependencies,
  }?: {
    doNotParse?: boolean | undefined;
    autoUpdateDependencies?: boolean | undefined;
  },
) => {
  /**
   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
   */
  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T;
  /**
   * Reactive get all cookies
   */
  getAll: <T = any>(options?: CookieGetOptions | undefined) => T;
  set: (name: string, value: any, options?: CookieSetOptions | undefined) => void;
  remove: (name: string, options?: CookieSetOptions | undefined) => void;
  addChangeListener: (callback: CookieChangeListener) => void;
  removeChangeListener: (callback: CookieChangeListener) => void;
};
/**
 * Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
 * @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
 * @param options
 * @param options.doNotParse - don't try parse value as JSON
 * @param options.autoUpdateDependencies - automatically update watching dependencies
 * @param cookies - universal-cookie instance
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useCookies(
  dependencies?: string[] | null,
  {
    doNotParse,
    autoUpdateDependencies,
  }?: {
    doNotParse?: boolean | undefined;
    autoUpdateDependencies?: boolean | undefined;
  },
  cookies?: Cookie,
): {
  /**
   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
   */
  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T;
  /**
   * Reactive get all cookies
   */
  getAll: <T = any>(options?: CookieGetOptions | undefined) => T;
  set: (name: string, value: any, options?: CookieSetOptions | undefined) => void;
  remove: (name: string, options?: CookieSetOptions | undefined) => void;
  addChangeListener: (callback: CookieChangeListener) => void;
  removeChangeListener: (callback: CookieChangeListener) => void;
};

4.9 KiB Raw Blame History