Making Vuetify 3 elements common to all layouts in Nuxt 3

Question

How can I make part of my app common to all layouts using Vuetify in Nuxt 3?

---

Edit

I have found that with my layouts wrapped in a <div> I then only need add the app attribute to things like the footer: <v-footer app></v-footer> and then they are positioned correctly again.

Still not sure if I might run into any other issues, but will try this for now.

---

Working

This way of doing it works reliably, the layout is as expected and transitions between layouts also works. No errors.

app.vue

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

default.vue

<template>
    <v-app>
        <v-system-bar>Common</v-system-bar>
        <v-app-bar>
            <v-toolbar-title>Default Layout</v-toolbar-title>
        </v-app-bar>
        <v-main>
            <slot />
        </v-main>
    </v-app>
</template>

layout2.vue

<template>
    <v-app>
        <v-system-bar>Common</v-system-bar>
        <v-main>
            <slot />
        </v-main>
        <v-navigation-drawer>Layout 2</v-navigation-drawer>
    </v-app>
</template>

Desired but causes errors

In this version I move the parts common to both layouts up into app.vue. I then have to have v-app wrapping NuxtLayout so that the vuetify component works.

If I wrap my second layout in a second v-app then transitions work but having more than one v-app is not recommended, and the layout is not correct, components are put in the wrong place.

I need a root element of some kind for transitions so here I add a div. Mostly, that works, but elements like a v-footer aren't placed correctly and the layout is still not quite correct.

app.vue

<template>
    <v-app>
        <v-system-bar>Common</v-system-bar>
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </v-app>
</template>

default.vue

<template>
    <div>
        <v-app-bar>
            <v-toolbar-title>Default Layout</v-toolbar-title>
        </v-app-bar>
        <v-main>
            <slot />
        </v-main>
    </div>
</template>

layout2.vue

<template>
    <div>
        <v-main>
            <slot />
        </v-main>
        <v-navigation-drawer>Layout 2</v-navigation-drawer>
    </div>
</template>

While this example mostly works, I'm worried that I'll run into more problems if it's not the proper Vuetify 3 way of managing layouts.

Is wrapping NuxtLayout in v-app considered safe, is there any reason (doc ref would be helpful) not to do this?

Would it be better create a component for the common parts of my layout and do a small copy and paste between my few layouts?

---

As an aside, many tutorials suggest deleting app.vue when using Pages. However, I've found it useful to add layout transition styling here as it is common to all layouts. Is there any reason why it would be better to remove app.vue and use only layouts with pages?

---