Universal cookie plugin for Nuxt, perfect for SSR
npm install cookie-universal-nuxt> Universal cookie plugin for Nuxt, perfect for SSR
You can use cookie-universal-nuxt to set, get and remove cookies in both client and server side nuxt apps.cookie-universal-nuxt parse cookies with the popular cookie node module.
yarn add cookie-universal-nuxtnpm i --save cookie-universal-nuxtAdd cookie-universal-nuxt to nuxt.config.js:
``jsssr: true
{
// To make it work for SSR, remember to set and target: 'server'
ssr: true,
target: 'server',
modules: [
// Simple usage
'cookie-universal-nuxt',
// With options
['cookie-universal-nuxt', { alias: 'cookiz' }],
]
}
`
By default cookie-universal will try to parse to JSON, however you can disable this
functionality in several ways:
---
- Disable from the plugin options: `Disable globally
`
{
modules: [
['cookie-universal-nuxt', { parseJSON: false }],
]
}
---
` // clientDisable globally on the fly
js
// nuxt middleware
export default ({ app }) => {
app.$cookies.parseJSON = false
}
this.$cookies.parseJSON = false
`
---
` // clientDisable on a specific get request
js
// nuxt middleware
export default ({ app }) => {
app.$cookies.get('cookie-name', { parseJSON: false })
}
this.$cookies.get('cookie-name', { parseJSON: false })
`
- name ` // nuxt middleware // clientset(name, value, opts) (string): Cookie name to set.value
- (string|object): Cookie value.opts
- (object): Same as the cookie node module.path
- (string): Specifies the value for the Path Set-Cookie attribute. By default, the path is considered the "default path".expires
- (date): Specifies the Date object to be the value for the Expires Set-Cookie attribute.maxAge
- (number): Specifies the number (in seconds) to be the value for the Max-Age Set-Cookie attribute.httpOnly
- (boolean): Specifies the boolean value for the [HttpOnly Set-Cookie attribute][rfc-6265-5.2.6].domain
- (string): specifies the value for the Domain Set-Cookie attribute.encode
- (function): Specifies a function that will be used to encode a cookie's value.sameSite
- (boolean|string): Specifies the value for the SameSite Set-Cookie attribute. true
Possible values: , false, 'lax', 'none', 'strict' (see details). Default is false.secure
- (boolean): Specifies the boolean value for the Secure Set-Cookie attribute.js
const cookieValObject = { param1: 'value1', param2: 'value2' }
export default ({ app }) => {
app.$cookies.set('cookie-name', 'cookie-value', {
path: '/',
maxAge: 60 60 24 * 7
})
app.$cookies.set('cookie-name', cookieValObject, {
path: '/',
maxAge: 60 60 24 * 7
})
}
this.$cookies.set('cookie-name', 'cookie-value', {
path: '/',
maxAge: 60 60 24 * 7
})
this.$cookies.set('cookie-name', cookieValObject, {
path: '/',
maxAge: 60 60 24 * 7
})
`
---
- cookieArray (array) ` // nuxt middleware // clientsetAll(cookieArray)
- name (string): Cookie name to set.value
- (string|object): Cookie value.opts
- (object): Same as the cookie node modulepath
- (string): Specifies the value for the Path Set-Cookie attribute. By default, the path is considered the "default path".expires
- (date): Specifies the Date object to be the value for the Expires Set-Cookie attribute.maxAge
- (number): Specifies the number (in seconds) to be the value for the Max-Age Set-Cookie attribute.httpOnly
- (boolean): Specifies the boolean value for the [HttpOnly Set-Cookie attribute][rfc-6265-5.2.6].domain
- (string): specifies the value for the Domain Set-Cookie attribute.encode
- (function): Specifies a function that will be used to encode a cookie's value.sameSite
- (boolean|string): Specifies the value for the SameSite Set-Cookie attribute. true
Possible values: , false, 'lax', 'none', 'strict' (see details). Default is false.secure
- (boolean): Specifies the boolean value for the Secure Set-Cookie attribute.js
const options = {
path: '/',
maxAge: 60 60 24 * 7
}
const cookieList = [
{ name: 'cookie-name1', value: 'value1', opts: options },
{ name: 'cookie-name2', value: 'value2', opts: options },
{ name: 'cookie-name3', value: 'value3', opts: options },
{ name: 'cookie-name4', value: 'value4', opts: options }
]
export default ({ app }) => {
app.$cookies.setAll(cookieList)
}
this.$cookies.setAll(cookieList)
`
---
- name ` // clientget(name, opts) (string): Cookie name to get.opts
- fromRes
- (boolean): Get cookies from res instead of req.parseJSON
- (boolean): Parse json, true by default unless overridden globally or locally.js
// nuxt middleware
export default ({ app }) => {
const cookieRes = app.$cookies.get('cookie-name')
const cookieRes = app.$cookies.get('cookie-name', { fromRes: true }) // get from res instead of req
// returns the cookie value or undefined
}
const cookieRes = this.$cookies.get('cookie-name')
// returns the cookie value or undefined
`
---
- opts ` // clientgetAll(opts)fromRes
- (boolean): Get cookies from res instead of req.parseJSON
- (boolean): Parse json, true by default unless overridden globally or locally.js
// nuxt middleware
export default ({ app }) => {
const cookiesRes = app.$cookies.getAll()
const cookiesRes = app.$cookies.getAll({ fromRes: true }) // get from res instead of req
// returns all cookies or {}
//{
// "cookie-1": "value1",
// "cookie-2": "value2",
//}
}
const cookiesRes = this.$cookies.getAll()
// returns all cookies or {}
//{
// "cookie-1": "value1",
// "cookie-2": "value2",
//}
`
---
- name ` // clientremove(name, opts) (string): Cookie name to remove.opts
- path
- (string): Specifies the value for the Path Set-Cookie attribute. By default, the path is considered the "default path".expires
- (date): Specifies the Date object to be the value for the Expires Set-Cookie attribute.maxAge
- (number): Specifies the number (in seconds) to be the value for the Max-Age Set-Cookie attribute.httpOnly
- (boolean): Specifies the boolean value for the [HttpOnly Set-Cookie attribute][rfc-6265-5.2.6].domain
- (string): specifies the value for the Domain Set-Cookie attribute.encode
- (function): Specifies a function that will be used to encode a cookie's value.sameSite
- (boolean|string): Specifies the value for the SameSite Set-Cookie attribute. true
Possible values: , false, 'lax', 'none', 'strict' (see details). Default is false.secure
- (boolean): Specifies the boolean value for the Secure Set-Cookie attribute.js
// nuxt middleware
export default ({ app }) => {
app.$cookies.remove('cookie-name')
app.$cookies.remove('cookie-name', {
// this will allow you to remove a cookie
// from a different path
path: '/my-path'
})
}
this.$cookies.remove('cookie-name')
`
---
- opts ` // clientremoveAll(opts)path
- (string): Specifies the value for the Path Set-Cookie attribute. By default, the path is considered the "default path".expires
- (date): Specifies the Date object to be the value for the Expires Set-Cookie attribute.maxAge
- (number): Specifies the number (in seconds) to be the value for the Max-Age Set-Cookie attribute.httpOnly
- (boolean): Specifies the boolean value for the [HttpOnly Set-Cookie attribute][rfc-6265-5.2.6].domain
- (string): specifies the value for the Domain Set-Cookie attribute.encode
- (function): Specifies a function that will be used to encode a cookie's value.sameSite
- (boolean|string): Specifies the value for the SameSite Set-Cookie attribute. true
Possible values: , false, 'lax', 'none', 'strict' (see details). Default is false.secure
- (boolean): Specifies the boolean value for the Secure Set-Cookie attribute.js
// nuxt middleware
export default ({ app }) => {
app.$cookies.removeAll()
}
this.$cookies.removeAll()
`
---
This property will expose the cookie node module so you don't have to include it yourself. ` // nuxt middleware // clientnodeCookiejs
export default ({ app }) => {
const cookieRes = app.$cookies.nodeCookie.parse('cookie-name', 'cookie-value')
cookieRes['cookie-name'] // returns 'cookie-value'
}
const cookieRes = this.$cookies.nodeCookie.parse('cookie-name', 'cookie-value')
cookieRes['cookie-name'] // returns 'cookie-value'
`
---
- alias `Plugin options
(string): Specifies the plugin alias to use.parseJSON
- (boolean): Disable JSON parsing.js
{
modules: [
['cookie-universal-nuxt', { alias: 'cookiz', parseJSON: false }],
]
}
// usage
this.$cookiz.set('cookie-name', 'cookie-value')
``
Copyright (c) Salvatore Tedde