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

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:

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 12
Comments: 22 (8 by maintainers)

Commits related to this issue

fix(layout): use suspense to delay render of layout items closes #15202 — committed to vuetifyjs/vuetify by nekosaur 2 years ago
fix(layout): use suspense to delay render of layout items closes #15202 — committed to vuetifyjs/vuetify by nekosaur 2 years ago

Most upvoted comments

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

johnleider on Jan 8, 2024

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

johnleider on Oct 9, 2023

This is the workaround I made using layouts

inside your template v-app v-if=“!loading” etc…

richardordinario on Nov 25, 2022

Any news for this ?

devonik on Jan 8, 2024

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

KaelWD on Sep 10, 2023

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

try using <client></client>

richardordinario on Jul 24, 2023

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

KaelWD on May 3, 2023

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

angelorc on Feb 13, 2024

https://github.com/vuejs/core/pull/7290 is released in vue 3.4 rc.1 Maybe it can be fixed now?

kingyue737 on Dec 26, 2023

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

pavloniym on Feb 15, 2023

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.

cheetamaru on Dec 19, 2022

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

besnikh on Jun 26, 2022