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

BlackYuzia commented 2 years ago

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

You should run server (npm install && npm run dev OR npm install && npm run build && npm run start)
Open / page
Reload page
Look at app bar
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

This is the workaround I made using layouts

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

ChristopheCVB commented 1 year ago

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

Is what I use as a workaround

cheetamaru commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

johnleider commented 1 year ago

This bug is resolved as of the latest version.

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

BlackYuzia commented 1 year ago

again and again and again? :eyes:

KaelWD commented 1 year ago

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

mostafaznv commented 1 year ago

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

richardordinario commented 1 year ago

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 commented 1 year ago

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

mubaidr commented 1 year ago

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 commented 1 year ago

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