Nuxt3のuseCookieでStringがNumberに変換されてしまう

Nuxt 3のuseCookieで数値を表すString（例えば123）をcookieとして保存し読み出した際に自動的にNumber（123）に変換されてしまう現象に遭遇したのでメモ。

これは、useCookieのencodeオプションのデフォルトでは文字列をそのままCookieとして保存しているのにも関わらず、デコード時はJSONとしてデコードするため起きている。 "123"をCookieに保存する場合は123という文字列がそのまま保存されるが、これはJSONでデコードした場合Numberになってしまう。 保存する際に文字列としてエンコードしてあげればデコード時も文字列として取得できるのだがそうはなっていない。

対策としてcookieの値を文字列のまま保持するには、useCookieのencodeオプションで文字列としてエンコードしてあげればいい。

const cookie = useCookie(
   'your-cookie-name', 
   { encode: (value) => JSON.stringify(value)}
)