af/app/error.vue

<template>
    <TopBanner>
        <template #headline><slot name="headline">{{ error.statusCode }}</slot></template>
        <template #tagline><slot name="tagline">means I f*cked up…</slot></template>
    </TopBanner>
    <div id="content_box" :class="`flex flex-col bg-white pt-12 sm:pt-24`">
        <ClientOnly><CookieMonster /></ClientOnly>
        <MainMenu />

        <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
            <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
                <h3 class="text-5xl text-center -mt-6 sm:-mt-16">
                    Sorry, I messed up.
                </h3>

                <p class="pt-12 py-6">Please copy the following error report and <a href="/contact" class="text-sky-500 underline">get in touch</a>.</p>

                <div>
                    <button @click="copyToClipboard" class="btn btn-info btn-outline float-right">Copy to clipboard</button>
                    <div id="errorReport">    
                        <p>Error code: {{ error.statusCode }}</p>
                        <p>Message: {{ error.message }}</p>
                        <p>URL: {{ error.url }}</p>
                        <p v-if="error.data">Additional data: {{ error.data }}</p>
                        <div v-html="error.description" />
                    </div>
                </div>

                <p>&nbsp;</p><p>&nbsp;</p>
            </article>
        </main>
    </div>
    <Footer />
</template>

<style lang="pcss">
@reference "./assets/css/main.css";

article.body h2 {
    @apply mt-0;
}
</style>

<script lang="ts" setup>
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
const props = defineProps({
    error: Object
})

const copyToClipboard = () => {
    const element = document.getElementById('errorReport');
    if (navigator.clipboard && element) {
        navigator.clipboard.writeText(element.innerText).then(() => {
            alert("Error report copied. Head over to the contact section and get in touch!");
        });
    } else {
        alert("Clipboard API not available.");
    }
}
</script>