1---
2category: '@Integrations'
3---
4 
5# useCookies
6 
7Wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie).
8 
9::: tip
10When using with Nuxt 3, this functions will **NOT** be auto imported in favor of Nuxt's built-in [`useCookie()`](https://v3.nuxtjs.org/api/composables/use-cookie). Use explicit import if you want to use the function from VueUse.
11:::
12 
13## Install
14 
15```bash
16npm i universal-cookie@^7
17```
18 
19## Usage
20 
21### Common usage
22 
23```vue
24<script setup lang="ts">
25import { useCookies } from '@vueuse/integrations/useCookies'
26 
27const cookies = useCookies(['locale'])
28</script>
29 
30<template>
31  <div>
32    <strong>locale</strong>: {{ cookies.get('locale') }}
33    <hr>
34    <pre>{{ cookies.getAll() }}</pre>
35    <button @click="cookies.set('locale', 'ru-RU')">
36      Russian
37    </button>
38    <button @click="cookies.set('locale', 'en-US')">
39      English
40    </button>
41  </div>
42</template>
43```
44 
45## Options
46 
47Access and modify cookies using vue composition-api.
48 
49> By default, you should use it inside `setup()`, but this function also works anywhere else.
50 
51```ts
52import { useCookies } from '@vueuse/integrations/useCookies'
53// ---cut---
54const {
55  get,
56  getAll,
57  set,
58  remove,
59  addChangeListener,
60  removeChangeListener
61} = useCookies(['cookie-name'], {
62  doNotParse: false,
63  autoUpdateDependencies: false
64})
65```
66 
67### `dependencies` (optional)
68 
69Let 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.
70 
71### `options` (optional)
72 
73- `doNotParse` (boolean = false): do not convert the cookie into an object no matter what. **Passed as default value to `get`/`getAll` methods.**
74- `autoUpdateDependencies` (boolean = false): automatically add cookie names ever provided to `get` method. If **true** then you don't need to care about provided `dependencies`.
75 
76### `cookies` (optional)
77 
78Let you provide a `universal-cookie` instance (creates a new instance by default)
79 
80> Info about methods available in the [universal-cookie api docs](https://www.npmjs.com/package/universal-cookie#api---cookies-class)
81 
82## `createCookies([req])`
83 
84Create a `universal-cookie` instance using request (default is window.document.cookie) and returns `useCookies` function with provided universal-cookie instance
85 
86- req (object): Node's [http.IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage) request object
87 
88## Type Declarations
89 
90```ts
91/**
92 * Creates a new {@link useCookies} function
93 * @param req - incoming http request (for SSR)
94 * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
95 * @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
96 */
97export declare function createCookies(req?: IncomingMessage): (
98  dependencies?: string[] | null,
99  {
100    doNotParse,
101    autoUpdateDependencies,
102  }?: {
103    doNotParse?: boolean | undefined
104    autoUpdateDependencies?: boolean | undefined
105  },
106) => {
107  /**
108   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
109   */
110  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
111  /**
112   * Reactive get all cookies
113   */
114  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
115  set: (
116    name: string,
117    value: any,
118    options?: CookieSetOptions | undefined,
119  ) => void
120  remove: (name: string, options?: CookieSetOptions | undefined) => void
121  addChangeListener: (callback: CookieChangeListener) => void
122  removeChangeListener: (callback: CookieChangeListener) => void
123}
124/**
125 * Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
126 * @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
127 * @param options
128 * @param options.doNotParse - don't try parse value as JSON
129 * @param options.autoUpdateDependencies - automatically update watching dependencies
130 * @param cookies - universal-cookie instance
131 *
132 * @__NO_SIDE_EFFECTS__
133 */
134export declare function useCookies(
135  dependencies?: string[] | null,
136  {
137    doNotParse,
138    autoUpdateDependencies,
139  }?: {
140    doNotParse?: boolean | undefined
141    autoUpdateDependencies?: boolean | undefined
142  },
143  cookies?: Cookie,
144): {
145  /**
146   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
147   */
148  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
149  /**
150   * Reactive get all cookies
151   */
152  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
153  set: (
154    name: string,
155    value: any,
156    options?: CookieSetOptions | undefined,
157  ) => void
158  remove: (name: string, options?: CookieSetOptions | undefined) => void
159  addChangeListener: (callback: CookieChangeListener) => void
160  removeChangeListener: (callback: CookieChangeListener) => void
161}
162```
163