Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Bug Report][3.0.0] V-App-Bar Collapse On Reload Page
See original GitHub issueEnvironment
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:
Issue Analytics
- State:
- Created a year ago
- Reactions:4
- Comments:6
Top Results From Across the Web
My Side navbar doesn't collapse after page reload
I have a side navbar using HTML, SCSS and js. When I click reload, it goes to uncollapse state ...
Read more >[Solved] Bootstrap collapse menu stays open - CSS-Tricks
Each time I reload my page my bootstrap menu stays open. I only would like it to open when I click on the...
Read more >Bootstrap Toggle Button Causing Page Reload - Treehouse
The mobile button, when clicked, is causing the page to reload. So the expanded menu never gets a chance to show.
Read more >Collapse - Bootstrap
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific...
Read more >Bootstrap 4 Collapse - W3Schools
The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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>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