Main.vue

<script lang="ts" setup>

export interface Props {
  fluid: boolean
}

const props = withDefaults(defineProps<Props>(), {
  fluid: true
});



const scrollThreshold = ref(200)
const density = ref<'compact' | 'prominent'>("prominent")
function onScroll() {
  if (window.scrollY > scrollThreshold.value) {
    density.value = "compact"
  }
  else { density.value = "prominent" }
}
</script>

<template>
  <v-card>
    <VApp>
      <Navbar :density="density" />
      <v-main style="min-height: 300px">
        <v-container v-scroll="onScroll" :fluid="fluid">
          <slot />
        </v-container>
      </v-main>
    </VApp>
  </v-card>
</template>