af/pages/404.vue

<template><NuxtLayout name="default">
    <template #headline>{{ headline }}</template>
    <template #tagline>{{ tagline }}</template>

    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
        <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
            <p>Things come, things go. The page you were looking for must have gone.</p>
            <p>Sorry.</p>
            <p>You can <a href="contact">let me know</a> and I'll do my best to fix this!</p>
        </article>
    </div>
</NuxtLayout></template>

<script setup>
definePageMeta({
    layout: false
});

const headline = "404";
const tagline = "means I can't find what you're looking for.";
</script>