Custom navigation/injectStyles not applied after SPA client-side route change (regression from v12.2 to v14.2)
Check that this is really a bug
- I confirm
Reproduction link
https://stackblitz.com/edit/nuxt-starter-utfhl1x1?file=components%2FSwiperCreative.vue
Bug description
Using Swiper via the Web Component (swiper/element/bundle) in a Vue 3 / Nuxt 4 app: , params (custom navigation.prevEl/nextEl, injectStyles) assigned via Object.assign in onMounted, then .initialize() called.
Works correctly on 12.2.x in all cases. On 14.2.x, it breaks specifically on client-side route re-mounts (SPA navigation) — hard refresh always works. No console error/warning is thrown; the params are just silently not applied, as if .initialize() ran with defaults.
Expected Behavior
Client-side navigation should produce the same fully-configured Swiper instance as a hard refresh.
Actual Behavior
After client-side navigation: default nav arrows show instead of custom ones, injected overflow: visible style is missing (clipped slides), effect breaks. No console errors. Hard refresh fixes it.
Swiper version
14.2.x (regression from 12.2.x)
Platform/Target and Browser Versions
Vue 3 + Nuxt 4, Swiper Element (swiper/element/bundle), Chrome/Edge (evergreen).
Validations
- Follow our Code of Conduct
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- Make sure this is a Swiper issue and not a framework-specific issue
Would you like to open a PR for this bug?
- I'm willing to open a PR
Source: nolimits4web/swiper