Skip to content

Use vue built-in components Transition and KeepAlive build product not render content #411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
7 tasks done
aurora-lch opened this issue May 30, 2024 · 3 comments
Closed
7 tasks done
Labels
invalid This doesn't seem right need reproduction

Comments

@aurora-lch
Copy link

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

Copy link

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@sapphi-red sapphi-red transferred this issue from vitejs/vite May 30, 2024
@edison1105 edison1105 added invalid This doesn't seem right and removed pending triage labels Sep 23, 2024
@edison1105
Copy link
Member

edison1105 commented Sep 23, 2024

Please make sure your reproduction is valid and can reproduce the problem.

Copy link

Hello @aurora-lch. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 30, 2025
@github-actions github-actions bot locked and limited conversation to collaborators May 14, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
invalid This doesn't seem right need reproduction
Projects
None yet
Development

No branches or pull requests

3 participants