Description
Vue version
3.4.31
Link to minimal reproduction
https://github.com/basuneko/vue-conditional-rendering-bug
Steps to reproduce
Build and preview the app - the issue does not occur when running through the dev server
npm run build
npm run preview
Open the app and view the examples.
All cases contain the same set of divs:
<div v-if="showFirstChild">1</div>
<div>2</div>
<div>3</div>
showFirstChild is set to true after a 100ms delay
What is expected?
After a short delay, the three divs should appear in this order: 1, 2, 3
What is actually happening?
The first example renders 2, 3, 1.
If the timeout is set to 0, the result becomes a bit random - sometimes it renders 1, 2, 3, sometimes 2, 3, 1.
System Info
System:
OS: macOS 14.5
CPU: (12) arm64 Apple M2 Pro
Memory: 54.47 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - ~/.nodenv/versions/20.11.1/bin/node
Yarn: 1.22.22 - ~/.nodenv/versions/20.11.1/bin/yarn
npm: 10.8.1 - ~/.nodenv/versions/20.11.1/bin/npm
pnpm: 9.5.0 - ~/.nodenv/versions/20.11.1/bin/pnpm
Watchman: 2024.06.10.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 126.0.6478.127
Safari: 17.5
npmPackages:
vue: ^3.4.31 => 3.4.31
vite 5.3.3
@vitejs/plugin-vue 5.0.5
Any additional comments?
I needed to add a flexbox wrapper to the slot content. It was working fine while running through vite dev server, but then I pushed it to CI...
I don't know what the significance of Vuetify here is but I've only been able to reproduce this with VMenu and VDialog. They render their content outside of the normal component hierarchy. I think they use Teleport but possibly using Teleport? I don't fully understand how they work.
For reference VMenu