This is a wrapper over the standardized document.cookie.

// quasar.config file

return {
  framework: {
    plugins: [
      'Cookies'
    ]
  }
}

Notes on SSR

When building for SSR, use only the $q.cookies form. Alternatively, when on server-side, this is one more example of how you can use it

import { Cookies } from 'quasar'

// you need access to `ssrContext`
function (ssrContext) {
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies // otherwise we're on client

  // "cookies" is equivalent to the global import as in non-SSR builds
}

The ssrContext is available in @quasar/app-vite Boot File or @quasar/app-webpack Boot File. And also in the @quasar/app-vite preFetch or @quasar/app-webpack preFetch feature, where it is supplied as a parameter.

The reason for this is that in a client-only app, every user will be using a fresh instance of the app in their browser. For server-side rendering we want the same: each request should have a fresh, isolated app instance so that there is no cross-request state pollution. So Cookies needs to be bound to each request separately.

Read a Cookie

import { Cookies } from 'quasar'
const value = Cookies.get('cookie_name')

When cookie is not set, the return value is null.

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const value = $q.cookies.get('cookie_name')
}

Read All Cookies

import { Cookies } from 'quasar'
const cookies = Cookies.getAll()

cookies variable will be an object with key-value pairs (cookie_name : cookie_value).

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const allCookies = $q.cookies.getAll()
}

Verify if Cookie is Set

import { Cookies } from 'quasar'
Cookies.has('cookie_name') // Boolean

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const hasIt = $q.cookies.has('cookie_name')
}

Write a Cookie

import { Cookies } from 'quasar'

Cookies.set('cookie_name', cookie_value)

// or pass in options also:
Cookies.set('cookie_name', cookie_value, options)

import { Cookies } from 'quasar'

Cookies.set('quasar', 'framework', {
  secure: true
})

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.cookies.set('cookie_name', cookie_value)
  // or pass in options also:
  $q.cookies.set('cookie_name', cookie_value, options)
}

The (optional) options parameter is an Object which is explained below, property by property.

Option: expires

expires: 10 // in 10 days
expires: -1 // yesterday
expires: 'Mon, 06 Jan 2020 12:52:55 GMT'
expires: new Date() // some JS Date Object
expires: '1d 3h 5m' // in 1 day, 3 hours, 5 minutes
expires: '2d' // in 2 days
expires: '15m 10s' // in 15 minutes, 10 seconds

Define lifetime of the cookie. Value can be a Number which will be interpreted as days from time of creation or a Date object or a raw stringified Date (“Mon, 06 Jan 2020 12:52:55 GMT”) or a special string format (“1d”, “15m”, “13d”, “1d 15m”, “1d 3h 5m 3s”). If omitted, the cookie becomes a session cookie.

Option: path

path: '/'

Define the path where the cookie is valid. By default the path of the cookie is the path of the page where the cookie was created (standard browser behavior). If you want to make it available for instance across the entire domain use path: ‘/’. Default: path of page where the cookie was created.

Option: domain

domain: 'quasar.dev'

Define the domain where the cookie is valid. Default: domain of page where the cookie was created.

Option: sameSite

sameSite: 'Strict'
// or
sameSite: 'Lax'

SameSite cookies let servers require that a cookie shouldn’t be sent with cross-site (where Site is defined by the registrable domain) requests, which provides some protection against cross-site request forgery attacks (CSRF).

Strict - If a same-site cookie has this attribute, the browser will only send cookies if the request originated from the website that set the cookie. If the request originated from a different URL than the URL of the current location, none of the cookies tagged with the Strict attribute will be included.

Lax - If the attribute is set to Lax, same-site cookies are withheld on cross-site subrequests, such as calls to load images or frames, but will be sent when a user navigates to the URL from an external site, for example, by following a link.

如需更多關於 same-site 設定的資訊，請前往這裡。

選項：httpOnly

httpOnly: true

為了幫助減輕跨網站指令碼（XSS）攻擊，JavaScript 的 Document.cookie API 無法存取 HttpOnly Cookie；它們僅被發送到伺服器。例如，持續伺服器端會話的 Cookie 不需要提供給 JavaScript，並且應設定 HttpOnly 標誌。

選項：secure

secure: true

如果為 true，則 Cookie 傳輸需要安全協定（HTTPS），並且不會透過 HTTP 發送。預設值為 false。

選項：other

other: 'SomeNewProp'

用於其他 Cookie 選項的原始字串。作為目前 Quasar 尚未實作的可能較新屬性的最後手段使用。

移除 Cookie

import { Cookies } from 'quasar'

Cookies.remove('cookie_name')

// if cookie was set with specific options like path and/or domain
// then you need to also supply them when removing:
Cookies.remove('cookie_name', options)

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.cookies.remove('cookie_name')

  // if cookie was set with specific options like path and/or domain
  // then you need to also supply them when removing:
  $q.cookies.remove('cookie_name', options)
}