af/app/layouts/default.vue

<template>
    <div>
        <!-- <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 />
    </div>
</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>