[rc.8] NuxtPage with keepalive on page + conditional root element results in weird errors
See original GitHub issueEnvironment
- Operating System:
Windows_NT
- Node Version:
v17.4.0
- Nuxt Version:
3.0.0-rc.8
- Package Manager:
npm@8.7.0
- Builder:
vite
- User Config:
app
- Runtime Modules:
-
- Build Modules:
-
Reproduction
Open https://stackblitz.com/github/stenet/nuxt-keep-alive and click on “sub 123”. After the page is displayed click on “index” => you will see the following error in the console and a corrupted page. Navigating now doesn’t work anymore.
Describe the bug
The problem occurs when the following conditions are true:
- NuxtPage in app.vue
- definePageMeta with keepalive in /index.vue
- root element in /sub/[id].vue has a v-if
The problem does not happen when I use RouterView/KeepAlive/Component instead of NuxtPage in app.vue or if I disable keepalive.
Also this case maybe isn’t that common (?) it would definitely be helpful if the console error message has some better information.
Additional context
No response
Logs
No response
Issue Analytics
- State:
- Created a year ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Vuejs - keep-alive component toggled with v-if - Stack Overflow
I specifically want <keep-alive> to be caching data for an element not currently rendered in the DOM, but it seems like that's not...
Read more >All Problems Tagged With Whatever - Code Grepper
Get code examples instantly right from your google search results with the Grepper Chrome Extension.
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 FreeTop 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
Top GitHub Comments
I hope you have something to gain
@516310460 haha, nice solution.
My problem was not the v-if, for which there are some solutions, but that I did not know where the error comes from and I have now spent an afternoon trying everything until I got it out.
I think it would help if the Vue team could come up with a better error message. This might save someone else the same work 😃