在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料，由於資料結構較為複雜，筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中，需要使用 defineProps 來撰寫型別定義，結果⋯⋯

Vue 3 script setup defineProps 的坑

為什麼要登出使用者？

安全性：防止未經授權的人，在使用者暫離時使用系統，這在公用或共享電腦的環境中尤其重要。

資料保護：只要使用者處於登入狀態，就會暴露在個人資料被他人操縱或利用的風險中，因此登出閒置使用者對資安也很重要。

如何在 Vue 3 專案中實作此功能？

如何強制登出閒置網頁的使用者

data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。

我是Sail，這裡主要分享一些自己覺得有趣的前端議題。