In the NuxT3 project, the Autoplay of swiper.js becomes invalid after the route is switched
See original GitHub issueEnvironment
- Operating System:
Windows_NT
- Node Version:
v14.17.5
- Nuxt Version:
3.0.0-rc.6
- Package Manager:
npm@6.14.14
- Builder:
vite
- User Config:
-
- Runtime Modules:
-
- Build Modules:
-
Reproduction
https://github.com/qyn980427/nuxt3Test
Describe the bug
When I was using Swiper.js and Swiper of Vant component library in my own project, I encountered the problem of Autoplay failure after route switch. At first I thought it was my problem, but later I felt that it might not be my problem. Autoplay will become invalid after the route is jumped back
Additional context
Repetition steps
1.When you enter Index for the first time, Swiper is normal 2. On index, use nuxtlink to access the test page 3. On the test page, use nuxtlink to return to the Index page 4.The Autoplay of swiper is invalid
Logs
No response
Issue Analytics
- State:
- Created a year ago
- Comments:9 (3 by maintainers)
Top Results From Across the Web
My swiper with Swiperjs only autoplays after page reload in ...
I'm using a Swiperjs Slider in a Nuxt3/Vue3 Component. The data is received via a prop from its parent page.
Read more >Swiper Changelog
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
Read more >Nuxt 3 - issue #4399 - StackBlitz
Run official live example code for Framework Hello World, created by Nuxt on StackBlitz.
Read more >image-sitemap-6.xml - LogRocket Blog
... /uploads/2021/09/browser-null-safety-project-files-e1631558564815.png ... ://blog.logrocket.com/wp-content/uploads/2021/09/Login.js-under-routes.png ...
Read more >Newest 'swiper.js' Questions - Stack Overflow
My project is built on Nuxt 3 and I install the latest version of Swiper ... But autoplay module have a doesn't works...
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
A solution, as seen in #3587 Set
<NuxtPage :key="$route.fullPath" />
in your app.vue file and everything works.You can absolutely judge some query params once and have it not reload.