インストール
|
1 |
yarn add vue3-cookies |
main.ts or main.jsに書く
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Vue3 Cookie import VueCookies from 'vue3-cookies'; const app = createApp(App) app.use(VueCookies, { expireTimes: "30d", // デフォルトの有効期限 path: "/", // デフォルトのパス domain: "", // デフォルトのドメイン secure: true, // HTTPSでのみクッキーを送信 sameSite: "None" // SameSite属性 }); registerPlugins(app) app.mount('#app') |
scriptセクション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script setup lang="ts"> import { onMounted, ref, watch } from "vue"; import { useCookies } from 'vue3-cookies'; // デフォルトのメイン画面 const { cookies } = useCookies(); const selectedMenu = ref("company"); // ページ読み込み時にクッキーから値を取得 onMounted(() => { const savedMenu = cookies.get("selectedMenu"); if (savedMenu) { selectedMenu.value = savedMenu; } }); // selectedMenuが変更されたらクッキーに保存 watch(selectedMenu, (newVal) => { cookies.set("selectedMenu", newVal); }); // 選択したメニューによって表示するコンテンツを切り替える // NavigationDrawerからのイベントを受け取る const updateSelectedMenu = (menu) => { selectedMenu.value = menu; } </script> |
ブラウザからCookieが確認できる。
