feat(User): Add Logout

components/Header.vue

@@ -23,7 +23,7 @@ const links = [{
 
     <template #right>
       <UColorModeButton />
-      <UButton to="#" target="_blank" icon="i-heroicons-user-solid" color="gray" variant="ghost" />
+      <UserDropdown />
     </template>
 
     <template #panel>

components/UserDropdown.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const links = [{
+  label: 'Logout',
+  to: '/logout',
+  icon: 'i-heroicons-arrow-left-on-rectangle',
+}]
+</script>
+
+<template>
+  <UPopover>
+    <UButton icon="i-heroicons-user-solid" color="gray" variant="ghost" />
+    <template #panel>
+      <div class="p-4">
+        <UNavigationLinks :links="links" />
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<style scoped>
+
+</style>

composables/useAuth.ts

@@ -76,6 +76,9 @@ export function useAuth<T = User>() {
     await $larafetch('/logout', { method: 'post' })
     user.value = null
 
+    const csrf_cookie = useCookie('XSRF-TOKEN')
+    csrf_cookie.value = null
+
     await router.push('/login')
   }
 

pages/logout/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts">
+definePageMeta({ middleware: ['auth'] })
+const { logout } = useAuth()
+logout()
+</script>