[Nuxt3] cookie-universal-nuxtのマイグレーション

はじめに

cookie-universal-nuxtはNuxt3ではサポートされていません。

Nuxt3ではuseCookieというComposablesがあるのでそれに移行します。

マイグレーション

uninstall

yarn remove cookie-universal-nuxt

nuxt.configの修正

削除

// ...
modules: [
-  'cookie-universal-nuxt',
]

cookieの取得・更新の修正

cookieの取得

- $cookies.get('cookie-name')

// cookie.valueで参照する
+ const cookie = useCookie('cookie-name')

cookieの更新

- $cookies.set('cookie-name', 'cookie-value', cookieOptions)

+ const cookie = useCookie('cookie-name', cookieOptions)
+ cookie.value = 'cookie-value'
// or
+ useCookie('cookie-name', cookieOptions).value = 'cookie-value'

useCookieの注意点

SSR時のcookie更新

SSR時にuseCookieを使ってcookieを更新した場合、
再度useCookieを使って、cookieに参照すると更新前の値となってしまいます。

SSR時のcookie更新

const cookie = useCookie('cookie-name', cookieOptions)
console.log(cookie.value) // undefined
cookie.value = 'cookie-value'
console.log(cookie.value) // 'cookie-value'

const updatedCookie = useCookie('cookie-name', cookieOptions)
console.log(updatedCookie.value) // undefined

これはSSR時において、
useCookieの参照先は「request header」で、
更新時は「response header」に設定されるためです。

本件はissueがあり、Daniel Roeのコメントで上記の内容を確認できます

参考文献

https://github.com/microcipcip/cookie-universal
https://nuxt.com/
https://github.com/nuxt/nuxt