vite-plugin-vue
vite-plugin-vue copied to clipboard
Use vue built-in components Transition and KeepAlive build product not render content
Describe the bug
<KeepAlive include="a"> <Transition mode="out-in"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </Transition> </KeepAlive>
use this code, when i build and deploy service. render is normal but keepalive invalidation
<Transition mode="out-in"> <KeepAlive include="a"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </KeepAlive> </Transition>
use this code, local dev environment is normal but deploy service, only cached component not render
what i did wrong
Reproduction
https://stackblitz.com/edit/vitejs-vite-22ic9p?file=Demo.vue
Steps to reproduce
<RouterView #default="{ Component }"> <KeepAlive include="a"> <Transition mode="out-in"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </Transition> </KeepAlive> </RouterView>
use this code, when i build and deploy service. render is normal but keepalive invalidation
<RouterView #default="{ Component }"> <Transition mode="out-in"> <KeepAlive include="a"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </KeepAlive> </Transition> </RouterView>
use this code, local dev environment is normal but deploy service, only cached component not render
what i did wrong
System Info
System:
OS: macOS 14.4.1
CPU: (8) arm64 Apple M2
Memory: 255.42 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - /usr/local/bin/node
Yarn: 1.22.21 - /usr/local/bin/yarn
npm: 10.2.4 - /usr/local/bin/npm
Browsers:
Chrome: 125.0.6422.113
Safari: 17.4.1
npmPackages:
@vitejs/plugin-vue: ^5.0.3 => 5.0.4
@vitejs/plugin-vue-jsx: ^3.1.0 => 3.1.0
vite: ^5.2.10 => 5.2.10
Used Package Manager
npm
Logs
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.