vuetifyjs / vuetifyjs/vuetify

[Bug Report][4.1.1] v-navigation-drawer causes SSR layout shift / flash when rail=true on initial load

Open
#22,925 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VNavigationDrawer S: triage SSR
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Environment

Vuetify Version: 4.1.1
Vue Version: 3.5.30
OS: macOS 10.15.7 (current)

Steps to reproduce
  1. just add code to nuxt 4 by using npx nuxi@latest module add vuetify-nuxt-module
Expected Behavior

it should always close onload like playground

Actual Behavior

In playground it work well but when I used in nuxt 4.4.5 SSR the drawer it always open onload wait for a while it closed by itself

Reproduction Link

https://play.vuetifyjs.com/#...

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Vuetify Playground reproduction and reproduce it in Nuxt 4.4.5 using vuetify-nuxt-module. Investigate v-navigation-drawer’s SSR initial render when rail=true; done means the drawer renders closed on load without a flash or later client-side correction.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.