Any Ideas how to get Keep-Alive working with NuxtLayout wrapped around NuxtPage? Maybe there is a workaround for this bug(?) https://github.com/nuxt/nuxt/issues/26270

App.vue:

<template>
    <div>
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </div>
</template>

nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: true },
    app: {
        keepalive: true,
        layoutTransition: { name: "layout", mode: "out-in" },
        pageTransition: { name: "page", mode: "out-in" },
    },
});

page with default layout:

<template>
    <div>
        <!-- <Header /> -->
        <h1>Imprint {{ keepalive }}</h1>
        <button @click="keepalive = 'true'">click</button>
        <!-- <Footer /> -->
    </div>
</template>
<script setup lang="ts">
    const keepalive = ref("");
    definePageMeta({ layout: "default" });
</script>

page with “page” layout:

<template>
    <div>
        <h1>Contact page</h1>
    </div>
</template>
<script setup lang="ts">
    definePageMeta({ layout: "page" });
</script>

default layout:

<template>
    <div id="page">
        <Header />
        <slot />
        <Footer />
    </div>
</template>

<script setup></script>

<style lang="less" scoped>
    #page {
        background: yellow;
    }
</style>

page layout:

<template>
    <div id="page">
        <Header />
        <slot />
        <Footer />
    </div>
</template>

<script setup></script>

<style lang="less" scoped>
    #page {
        background: aqua;
    }
</style>