Skip to main content

Nuxt3 的 cookie 操作

nuxt3 在 server 端是用 h3 的 http 微框架來處理，所以 getCookie & setCookie 都可以用此套件實現

ref

在 server 端拿到 request 的 cookie

const name = getCookie(event, "name");
console.log("event", event);

Server 端設定 cookie 回到 browser

setCookie(event, "access_token", "token", {
    httpOnly: true,
    ...
});

Client 端設定 cookie

// 在 client 端設定 cookie，透過 useCookie 設定 cookie 的值
const name = useCookie("name");
const counter = useCookie("counter", { maxAge: 10 });
const setCookie = () => {
    name.value = "thomas";
    counter.value = "100";
};
const requestAPI = () => {
    const { data } = useFetch("/api/cookie");
    console.log(data);
};
<template>
    <div>
        <h1>cookier</h1>
        <button @click="setCookie">setCookie</button>
        <button @click="requestAPI">api request</button>
    </div>
</template>