#8224·swiper

Custom navigation/injectStyles not applied after SPA client-side route change (regression from v12.2 to v14.2)

Author: ValentinY13Created Sep 1, 2026Updated Sep 1, 2026
Labelst0ggles

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