category |
---|
@Integrations |
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.
:::
npm i universal-cookie
<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>
<script>
import { defineComponent } from 'vue'
import { useCookies } from '@vueuse/integrations/useCookies'
export default defineComponent({
setup() {
const cookies = useCookies(['locale'])
return {
cookies,
}
},
})
</script>
Access and modify cookies using vue composition-api.
By default, you should use it inside
setup()
, but this function also works anywhere else.
const { get, getAll, set, remove, addChangeListener, removeChangeListener } = useCookies(['cookie-name'], { doNotParse: false, autoUpdateDependencies: false })
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.
doNotParse
(boolean = false): do not convert the cookie into an object no matter what. Passed as default value toget
/getAll
methods.autoUpdateDependencies
(boolean = false): automatically add cookie names ever provided toget
method. If true then you don't need to care about provideddependencies
.
Let you provide a universal-cookie
instance (creates a new instance by default)
Info about methods available in the universal-cookie api docs
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