question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

In the NuxT3 project, the Autoplay of swiper.js becomes invalid after the route is switched

See original GitHub issue

Environment


  • 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:closed
  • Created a year ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
ikexing-cncommented, Jul 31, 2022

A solution, as seen in #3587 Set <NuxtPage :key="$route.fullPath" /> in your app.vue file and everything works.

0reactions
ikexing-cncommented, Dec 11, 2022

This is not optimal. And in this case you have problem with full reload page after add querry params to url.

You can absolutely judge some query params once and have it not reload.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found