af/app/layouts/default.vue

<template>
    <!-- <Breakpoint /> -->
    <TopBanner>
        <template #headline><slot name="headline">Default Headline from layout</slot></template>
        <template #tagline><slot name="tagline">Default Tagline from layout</slot></template>
    </TopBanner>
    <div id="content_box" :class="`flex flex-col bg-white pt-12 sm:pt-24`">
        <ClientOnly><CookieMonster /></ClientOnly>
        <MainMenu />
        <slot />
    </div>
    <Footer />
</template>

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

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

<script lang="ts" setup>
useHead({
    bodyAttrs: {
        class: `bg-black ${String(useRoute().name)}`
    }
})
</script>