Pull Log Out button into its own component

assets/global.css

@@ -53,6 +53,11 @@ a {
 	}
 }
 
+button {
+	font-family: inherit;
+	font-size: inherit;
+}
+
 label {
 	display: block;
 }

components/Header.vue

@@ -12,7 +12,7 @@
 				(s:{{ session.id }} a:{{ session.account.id }}{{ session.push ? " push" : null }})
 				{{ session.account.type }}
 				<NuxtLink to="/account/settings">Settings</NuxtLink>
-				<button type="button" @click="logOut">Log out</button>
+				<LogOutButton />
 			</template>
 			<template v-else>
 				<NuxtLink to="/login">Log In</NuxtLink>
@@ -22,19 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-const { data: session, refresh: sessionRefresh } = useAccountSession();
-
-async function logOut() {
-	try {
-		const res = await $fetch.raw("/api/auth/session", {
-			method: "DELETE",
-		});
-		await sessionRefresh();
-
-	} catch (err: any) {
-		alert(`Log out failed: ${err.statusCode} ${err.statusMessage}`);
-	}
-}
+const { data: session } = useAccountSession();
 </script>
 
 <style scoped>
@@ -58,8 +46,4 @@ nav ul {
 	display: flex;
 	column-gap: 0.5em;
 }
-button {
-	font-family: inherit;
-	font-size: inherit;
-}
 </style>

components/LogOutButton.vue

@@ -0,0 +1,19 @@
+<template>
+	<button type="button" @click="logOut">Log out</button>
+</template>
+
+<script setup lang="ts">
+const { refresh: sessionRefresh } = useAccountSession();
+
+async function logOut() {
+	try {
+		await $fetch.raw("/api/auth/session", {
+			method: "DELETE",
+		});
+		await sessionRefresh();
+
+	} catch (err: any) {
+		alert(`Log out failed: ${err.statusCode} ${err.statusMessage}`);
+	}
+}
+</script>