Port application from Next.js to Nuxt

Nuxt is based on Vue.js and I find their building blocks to be much
neater compared to the React based Next.js.

components/PushNotification.vue

@@ -0,0 +1,117 @@
+<template>
+	<section>
+		Notifications are: <b>{{ subscription ? "Enabled" : "Disabled" }}</b>
+		<br />
+		<button
+			:disabled="unsupported"
+			@click="onClick"
+		>
+			{{ unsupported === undefined ? "Checking for support" : null }}
+			{{ unsupported === true ? "Notifications are not supported :(." : null }}
+			{{ unsupported === false ? (subscription ? "Disable notifications" : "Enable notifications") : null }}
+		</button>
+		<details>
+			<summary>Debug</summary>
+			<pre><code>{{ JSON.stringify(subscription?.toJSON(), undefined, 4) ?? "No subscription set" }}</code></pre>
+		</details>
+	</section>
+</template>
+
+<script setup lang="ts">
+function notificationUnsupported() {
+	return (
+		!("serviceWorker" in navigator)
+		|| !("PushManager" in window)
+		|| !("showNotification" in ServiceWorkerRegistration.prototype)
+	)
+}
+
+async function registerAndSubscribe(
+	vapidPublicKey: string,
+	onSubscribe: (subs: PushSubscription | null ) => void,
+) {
+	try {
+		await navigator.serviceWorker.register("/sw.js");
+		await subscribe(vapidPublicKey, onSubscribe);
+	} catch (err) {
+		console.error("Failed to register service worker:", err);
+	}
+}
+
+async function subscribe(
+	vapidPublicKey: string,
+	onSubscribe: (subs: PushSubscription | null) => void
+) {
+	try {
+		const registration = await navigator.serviceWorker.ready;
+		const subscription = await registration.pushManager.subscribe({
+			userVisibleOnly: true,
+			applicationServerKey: vapidPublicKey,
+		});
+		console.log("Got subscription object", subscription.toJSON());
+		await submitSubscription(subscription);
+		onSubscribe(subscription);
+	} catch (err) {
+		console.error("Failed to subscribe:" , err);
+	}
+}
+
+async function unsubscribe(
+	subscription: PushSubscription,
+	onUnsubscribed: () => void,
+) {
+	const body = JSON.stringify({ subscription });
+	await subscription.unsubscribe();
+	const res = await fetch("/api/unsubscribe", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body,
+	});
+	const result = await res.json();
+	console.log("/api/unsubscribe returned", result);
+	onUnsubscribed();
+}
+
+async function submitSubscription(subscription: PushSubscription) {
+	const res = await fetch("/api/subscribe", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({ subscription }),
+	});
+	const result = await res.json();
+	console.log("/api/subscribe returned", result);
+}
+
+async function getSubscription(
+	onSubscribe: (subs: PushSubscription | null) => void,
+) {
+	const registration = await navigator.serviceWorker.ready;
+	const subscription = await registration.pushManager.getSubscription();
+	if (subscription) {
+		onSubscribe(subscription);
+	}
+}
+
+const unsupported = ref<boolean | undefined>(undefined);
+const subscription = ref<PushSubscription | null>(null);
+const runtimeConfig = useRuntimeConfig();
+
+function onClick() {
+	if (!subscription.value)
+		registerAndSubscribe(runtimeConfig.public.vapidPublicKey, (subs) => { subscription.value = subs })
+	else
+		unsubscribe(subscription.value, () => { subscription.value = null })
+}
+
+onMounted(() => {
+	unsupported.value = notificationUnsupported()
+	if (unsupported.value) {
+		return;
+	}
+	getSubscription(subs => { subscription.value = subs });
+})
+</script>