How to use v-app-bar for scrolling behavior in Vuetify 3

Question

I am trying to create a fixed navigation navbar unless scrolled down in which case it should hide until scrolled up event occurs. My ultimate goal is for the v-app-bar to start off transparent then as user scrolls a little bit for it to disappear and if they scroll up at all the menu wil reappear but white. The color stuff I have not even tried to work out yet because the scroll behavior does not even seem to work in my Vuetify/Nuxt app nor the is the v-app-bar staying fixed to reappear. So I am not sure if I am using v-layout incorrectly or whats going on.

I am using the following layout:

<template>
    <v-app>
        <v-layout> 
            <NavigationBar/>
            <v-main>
                <slot />
            </v-main>
            <footer>
            </footer>
        </v-layout>
    </v-app>
</template>

My navbar component is as follows:

<template>
<div>
    <v-app-bar v-if="$vuetify.display.mdAndUp" class="px-md-4" color="grey-lighten-3" height="40" flat>
        <template #prepend>
            <v-btn color="primary" icon="mdi-facebook" variant="plain"/>
            <v-btn color="primary" icon="mdi-instagram" variant="plain"/>
        </template>
        <template #append>
            <v-btn class="ms-1 mx-5" color="primary" variant="plain" prepend-icon="mdi-account" rounded>Login</v-btn>
            <v-btn class="ms-1" color="primary" variant="plain" prepend-icon="mdi-upload" rounded>File Upload</v-btn>
        </template>
    </v-app-bar>
    <v-app-bar :elevation="5" class="px-md-4" color="surface" height="100" flat>
        <template #prepend>
                <v-app-bar-nav-icon
                v-if="$vuetify.display.smAndDown"
                @click="drawer = !drawer"
                />
        </template>

        <v-spacer v-if="$vuetify.display.smAndDown"/>
        
        <v-img

            class="me-sm-8"
            max-width="240"
            min-width="200"
            src="/img/logo-header.png"
        />

        <v-spacer />

        <template v-if="$vuetify.display.mdAndUp">
            <v-btn
            v-for="(item, i) in items"
            :key="i"
            :active="i === 0"
            color="primary"
            class="me-2 text-none"
            v-bind="item"
            size="large"
            rounded
            />
        </template>
    </v-app-bar>   
</div>

In addition this prop and it did not work:

<v-app-bar scroll-behavior="hide"></v-app-bar>

Answer 1

Remove the VLayout, otherwise this seems to work as expected:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
    <v-app>
      <v-app-bar 
        scroll-behavior="hide"
        color="primary"
      > App bar</v-app-bar>
      <v-main>
    <div id="container">Main</div>
      </v-main>
      <v-footer>
      Footer
      </v-footer>
    </v-app>
  `,
  setup(){
    
    return {
      
    }
  }

}
createApp(app).use(vuetify).mount('#app')

#container {
 height: 1800px;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>