cun

cookie-universal-nuxt

Universal cookie plugin, perfect for SSR

Showing:

Popularity

Downloads/wk

107K

GitHub Stars

450

Maintenance

Last Commit

5mos ago

Contributors

13

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Vue Cookies

Readme

cookie-universal-nuxt

npm (scoped with tag) npm js-standard-style

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.

Install

  • yarn: yarn add cookie-universal-nuxt
  • npm: npm i --save cookie-universal-nuxt

Add cookie-universal-nuxt to nuxt.config.js:

{
  modules: [
    // Simple usage
    'cookie-universal-nuxt',

    // With options
    ['cookie-universal-nuxt', { alias: 'cookiz' }],
 ]
}

ParseJSON

By default cookie-universal will try to parse to JSON, however you can disable this functionality in several ways:


Disable globally

  • Disable from the plugin options:
{
  modules: [
    ['cookie-universal-nuxt', { parseJSON: false }],
 ]
}


Disable globally on the fly

// nuxt middleware
export default ({ app }) => {
  app.$cookies.parseJSON = false
}

// client
this.$cookies.parseJSON = false


Disable on a specific get request

// nuxt middleware
export default ({ app }) => {
  app.$cookies.get('cookie-name', { parseJSON: false })
}

// client
this.$cookies.get('cookie-name', { parseJSON: false })

Api

set(name, value, opts)

  • name (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.
      Possible values: true, false, 'lax', 'none', 'strict' (see details). Default is false.
    • secure (boolean): Specifies the boolean value for the Secure Set-Cookie attribute.
const cookieValObject = { param1: 'value1', param2: 'value2' }

// nuxt middleware
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
  })
}

// client
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
})


setAll(cookieArray)

  • cookieArray (array)
    • name (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.
        Possible values: true, false, 'lax', 'none', 'strict' (see details). Default is false.
      • secure (boolean): Specifies the boolean value for the Secure Set-Cookie attribute.
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 }
]

// nuxt middleware
export default ({ app }) => {
  app.$cookies.setAll(cookieList)
}

// client
this.$cookies.setAll(cookieList)


get(name, opts)

  • name (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.
// 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
}

// client
const cookieRes = this.$cookies.get('cookie-name')
// returns the cookie value or undefined


getAll(opts)

  • opts
    • fromRes (boolean): Get cookies from res instead of req.
    • parseJSON (boolean): Parse json, true by default unless overridden globally or locally.
// 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",
  //}
}

// client
const cookiesRes = this.$cookies.getAll()
// returns all cookies or {}
//{
//  "cookie-1": "value1",
//  "cookie-2": "value2",
//}


remove(name, opts)

  • name (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.
      Possible values: true, false, 'lax', 'none', 'strict' (see details). Default is false.
    • secure (boolean): Specifies the boolean value for the Secure Set-Cookie attribute.
// 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'
  })
}

// client
this.$cookies.remove('cookie-name')


removeAll()

// note that removeAll does not currently allow you
// to remove cookies that have a
// path different from '/'

// nuxt middleware
export default ({ app }) => {
  app.$cookies.removeAll()
}

// client
this.$cookies.removeAll()


nodeCookie

This property will expose the cookie node module so you don't have to include it yourself.


// nuxt middleware
export default ({ app }) => {
  const cookieRes = app.$cookies.nodeCookie.parse('cookie-name', 'cookie-value')
  cookieRes['cookie-name'] // returns 'cookie-value'
}

// client
const cookieRes = this.$cookies.nodeCookie.parse('cookie-name', 'cookie-value')
cookieRes['cookie-name'] // returns 'cookie-value'


Plugin options

  • alias (string): Specifies the plugin alias to use.
  • parseJSON (boolean): Disable JSON parsing.
{
  modules: [
    ['cookie-universal-nuxt', { alias: 'cookiz', parseJSON: false }],
 ]
}


// usage
this.$cookiz.set('cookie-name', 'cookie-value')

License

MIT License

Copyright (c) Salvatore Tedde microcipcip@gmail.com

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial