What is --v-layout-top and why is it randomly fucking up my layout?

[frederikheld]

Issue: when navigating between views, part of the layout moves up and down. This is visible because it's an animated transition. Everything would look fine if it would just snap into place, but it is animated, which makes it - horrible UX I'd say?

So the culprit seems to be --v-layout-top which is applied to <main> and which changes from --v-layout-top: 256px; to --v-layout-top: 192px; when navigating from one view to the other.

I do not set this variable, it seems to be part of the v-app magic of Vuetify or something else behind the scenes.

What is this? How can I fix my issue?

Any help appreciated!

[KaelWD]

It reserves space for fixed position elements like toolbars and banners, do you have 256px worth of toolbar?
It won't animate if there's a different VMain instance on each page instead of one in App.vue.

[frederikheld]

Thanks for your reply!

do you have 256px worth of toolbar

Well, that's a delicate question. Yes and no.

I don't use one global app bar in App.vue but a separate app bar in each view, because my app bars have very different content on each view.

I also use keepalive on my main views. Which are 4, which apparently makes 4 * 64px = 256px. I don't know if this is by design or a bug. What's weird though is that on two of those four views, it only seems to add up to 192px, which causes the layout glitch. I can't see any difference in the way I style those app bars which might make the difference.

But you correctly assumed that my v-main is in App.vue. I'll move it to the views and see if it helps.

[frederikheld]

One more question before I re-write the v-main part of my app: Is v-main necessary? And will it allow me to move content below the transparent app bar? I suspect that for my use case it might be better to compensate for app bar and bottom nav manually because in some views content needs to be below the app bar and I have to compensate for the notch on Android & iOS manually anyways .... Does v-main have any other purpose than doing the size compensation magic?

[frederikheld]

Getting rid of v-main entirely fixed my issue. The magic it applies works well for basic layouts that are implemented in Vue/Vuetify only, but as soon as you try complex stuff and have to deal with safe-area-inset CSS variables, it is easier to set the values manually as needed.

[frederikheld]

Almost exactly 2 years later I'm back having new issues with --v-layout-top. Different app, this time I can't just remove v-main.

The issue is this: I have a view with extended v-app-bar. On top of this view there is a fullscreen dialog which has its own v-app-bar that is not extended. On top of this dialog, I want to show a snackbar queue. The top margin is too high because it gets its value from the extended slot of the view.

How can I make this look properly?

If I only use one single v-snackbar, this is a proper workaround:

<template>
  <v-snackbar
      location="top center"
      :model-value="true"
      class="error-snackbar"
      >Some Error</v-snackbar
    >
</template>

<style lang="css" scoped>
.error-snackbar {
  --v-layout-top: 58px !important;
}
</style>

However, the same does not work with v-snackbar-queue and I found no way to make it work. I tried :deep CSS selector, content-props and content-class props on v-snackbar-queue to no avail.

I'm posting this here to collect all the issues that are created by the magic behind app layout. It is great if you do the most boring standard layout but it kicks you in the balls whenever you try something out of the ordinary.

I would really hope that this would be overhauled. I'd rather define --v-layout values for each view manually than having to wrestle with it in cases like this.

[frederikheld]

For everyone else who's looking for a solution: v-model of the VSnackbarQueue can be an array of objects that takes props for each snackbar:

snackbarMessages.value.push({
  text: 'Some Error',
  class: 'error-snackbar',
})

See https://vuetifyjs.com/en/api/v-snackbar-queue/#props-model-value

[frederikheld]

If you need the proper type for snackbarMessages, you can get it like this:

const snackbarMessages = ref<
  NonNullable<
    InstanceType<typeof VSnackbarQueue>['$props']['modelValue']
  >[number][]
>([])