使用方法

ページ、コンポーネント、プラグイン内で、useCookieを使用してSSRに対応した方法でクッキーの読み書きを行うことができます。

const cookie = useCookie(name, options)

型

import type { Ref } from 'vue'
import type { CookieParseOptions, CookieSerializeOptions } from 'cookie-es'

export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & CookieParseOptions, 'decode' | 'encode'> {
  decode?(value: string): T
  encode?(value: T): string
  default?: () => T | Ref<T>
  watch?: boolean | 'shallow'
  readonly?: boolean
}

export interface CookieRef<T> extends Ref<T> {}

export function useCookie<T = string | null | undefined>(
  name: string,
  options?: CookieOptions<T>
): CookieRef<T>

パラメータ

name: クッキーの名前。

options: クッキーの動作を制御するオプション。このオブジェクトには以下のプロパティを含めることができます。

ほとんどのオプションはcookieパッケージに直接渡されます。

戻り値

クッキーの値を表すVue Ref<T>を返します。refを更新するとクッキーも更新されます（readonlyが設定されていない限り）。refはSSRに対応しており、クライアントとサーバーの両方で動作します。

例

基本的な使用法

以下の例では、counterというクッキーを作成します。クッキーが存在しない場合、最初にランダムな値に設定されます。counter変数を更新するたびに、クッキーもそれに応じて更新されます。

<script setup lang="ts">
const counter = useCookie('counter')

counter.value = counter.value || Math.round(Math.random() * 1000)
</script>

<template>
  <div>
    <h1>Counter: {{ counter || '-' }}</h1>
    <button @click="counter = null">reset</button>
    <button @click="counter--">-</button>
    <button @click="counter++">+</button>
  </div>
</template>

読み取り専用クッキー

<script setup lang="ts">
const user = useCookie(
  'userInfo',
  {
    default: () => ({ score: -1 }),
    watch: false
  }
)

if (user.value) {
  // 実際の`userInfo`クッキーは更新されません
  user.value.score++
}
</script>

<template>
  <div>User score: {{ user?.score }}</div>
</template>

書き込み可能なクッキー

<script setup lang="ts">
const list = useCookie(
  'list',
  {
    default: () => [],
    watch: 'shallow'
  }
)

function add() {
  list.value?.push(Math.round(Math.random() * 1000))
  // この変更ではlistクッキーは更新されません
}

function save() {
  if (list.value) {
    // 実際の`list`クッキーは更新されます
    list.value = [...list.value]
  }
}
</script>

<template>
  <div>
    <h1>List</h1>
    <pre>{{ list }}</pre>
    <button @click="add">Add</button>
    <button @click="save">Save</button>
  </div>
</template>

APIルートでのクッキー

サーバーAPIルートでクッキーを設定するために、h3パッケージからgetCookieとsetCookieを使用できます。

export default defineEventHandler(event => {
  // カウンタークッキーを読み取る
  let counter = getCookie(event, 'counter') || 0

  // カウンタークッキーを1増やす
  setCookie(event, 'counter', ++counter)

  // JSONレスポンスを送信
  return { counter }
})