[Bug Report][3.0.0] V-App-Bar Collapse On Reload Page

[BlackYuzia]

Environment

Vuetify Version: 3.0.0-beta.3
Vue Version: 3.2.36
Browsers: Chrome 102.0.0.0
OS: Windows 10

Steps to reproduce

0. You should run server (npm install && npm run dev OR npm install && npm run build && npm run start)
1. Open / page
2. Reload page
3. Look at app bar
4. Bar collapse for a few seconds (in run dev mode this collapse a bit longer)

Expected Behavior

App bar didn't collapse or something, duo page reload

Actual Behavior

Bar collapse on every page reload. After a few seconds, bar return to valid position. If you disable javascript, app bar didn't return to required position.

Reproduction Link

https://gitlab.com/BlackYuzia/nuxt-vuetify

Screenshots

Collapse example:

Un Collapsed after a few seconds:

[besnikh]

I have the same issue working on Nuxt 3 and Vuetify 3.0.0-beta.3
Is there any workaround ?
I tried to use the but it's not working in Nuxt, I tried in layouts and App.vue as well

Cheers

[r-this]

Same issue here. Nuxt 3 and Vuetify 3.0.0-beta.5. Similar issue if I tried replacing it with a v-toolbar instead (except v-toolbar starts bigger then contracts). Even without a drawer, it still starts each reload in the small state before expanding to the full width of the screen once the page is fully loaded.

Using a card as a workaround for now.

[richardordinario]

This is the workaround I made using layouts

inside your template
v-app v-if="!loading"
etc...

<script setup> const loading = ref(true) onMounted(() => { loading.value = false }) </script>

[ChristopheCVB]

<v-app-bar style="width: 100%">

Is what I use as a workaround

[cheetamaru]

Workaround for height collapsing:

<template>
    <div>
        <v-app>
            <v-app-bar ... style="width: 100%">
            ...
            </v-app-bar>
            <v-fade-transition leave-absolute>
                <div v-if="isExtraSpaceAdded" style="height: 48px" />
            </v-fade-transition>
            ...
        </v-app>
    </div>
</template>

<script setup>
const isExtraSpaceAdded = ref(true)

onMounted(() => {
  isExtraSpaceAdded.value = false
})
</script>

height: 48px is a heigth value of the v-app-bar.

Hope this bug will be fixed soon.

[r-this]

Nice, thanks for this

…

On Mon, Dec 19, 2022, at 12:40 PM, cheetamaru wrote: Workaround for height collapsing: <template> <div> <v-app> <v-app-bar ... style="width: 100%"> ... </v-app-bar> <v-fade-transition leave-absolute> <div v-if="isExtraSpaceAdded" style="height: 48px" /> </v-fade-transition> ... </v-app> </div> </template> <script setup> const isExtraSpaceAdded = ref(true) onMounted(() => { isExtraSpaceAdded.value = false }) </script> `heigth: 48px` is a heigth value of the `v-app-bar`. Hope this bug will be fixed soon. — Reply to this email directly, view it on GitHub <#15202 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANUNXNSED66I4FXQCMFBDATWOCT3BANCNFSM5XX6XE4Q>. You are receiving this because you commented.Message ID: ***@***.***>

[pavloniym]

Still waiting ...
@cheetamaru workaround is working, but it is a hack ...

[KaelWD]

This is still blocked by vuejs/core#6095

[mostafaznv]

I have the same issue working on nuxt@3.6.3 and vuetify@3.3.8
Is there any workaround?

[richardordinario]

I have the same issue working on nuxt@3.6.3 and vuetify@3.3.8 Is there any workaround?

try using <client></client>

[KaelWD]

If you're wrapping the whole page in <client> you might as well just disable ssr entirely.

[mubaidr]

For you can simply set following styles on VMain to overcome this issue:

<VApp
  <VAppBar>
    ... your content here
  </VAppBar>
  <VMain
      style="
        --v-layout-left: 0px;
        --v-layout-right: 0px;
        --v-layout-top: 64px;
        --v-layout-bottom: 44px;
      "
    >
    ... your content here
  </VMain>
</VApp>

[johnleider]

This should be better on newer versions, but we're still waiting on upstream.

[kingyue737]

vuejs/core#7290 is released in vue 3.4 rc.1
Maybe it can be fixed now?

[devonik]

Mh i tried it with vue 3.4.0 rc3 but still weird rendering https://stackblitz.com/edit/github-wudebh-ppjcxg?file=plugins%2Fvuetify.ts

[kingyue737]

@devonik #15229 has not been merged

[devonik]

ui thanks there are so many issues regarding this. Must be a good feeling to able to finish them all

[devonik]

Any news for this ?

[johnleider]

Working on it. Since we use TSX, Vue 3.4 requires changes on our end.

[angelorc]

We have the same bug

Link: https://bitsong.studio
Repo: https://github.com/bitsongofficial/studio

vuetify_bug-2024-02-13_16.32.37.mp4

[Luferov]

This bug is still exist

[johnleider]

Please create a new issue. https://issues.vuetifyjs.com/

[Luferov]

Please create a new issue. https://issues.vuetifyjs.com/

Can't do this

[pavloniym]

On 3.7 - this bug exists

[KaelWD]

Suspense is still broken, we had to revert #15229.