Main.vue

<script lang="ts" setup>
import { useDisplay } from 'vuetify'

const { smAndDown, width } = useDisplay()
export interface Props {
  fluid?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  fluid: true
});
const maxWidth = ref(1300)
const minWidth = ref(900)
const computedMinWidth = computed(() => {
  if (toValue(smAndDown)) return undefined
  if (toValue(width) - 450 > toValue(maxWidth)) return toValue(maxWidth)
  if (toValue(width) - 300 > toValue(minWidth)) return toValue(minWidth)
  return undefined
})


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="props.fluid">
          <v-row justify="center">
            <v-col cols="auto">
              <v-card flat color="transparent" :min-width="computedMinWidth"
                :max-width="props.fluid ? undefined : maxWidth">
                <slot />
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-main>
    </VApp>
  </v-card>
</template>