components/Header.vue

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

components/UserDropdown.vue

@@ -1,22 +0,0 @@
-<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,9 +76,6 @@ 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

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