[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 <Suspense> 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...

[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:

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 https://github.com/vuetifyjs/vuetify/issues/15202#issuecomment-1358085661, 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 ...

[johnleider]

This bug is resolved as of the latest version.

If you have any questions, please reach out to us in our Discord community.

[BlackYuzia]

again and again and again? :eyes:

[KaelWD]

This is still blocked by https://github.com/vuejs/core/pull/6095

[mostafaznv]

I have the same issue working on [email protected] and [email protected] Is there any workaround?

[richardordinario]

I have the same issue working on [email protected] and [email protected] 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]

https://github.com/vuejs/core/pull/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 https://github.com/vuetifyjs/vuetify/pull/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

https://github.com/vuetifyjs/vuetify/assets/1754055/33e7a6a2-59ec-489b-af17-e10e77a22644