Nuxt3 Swiper hydration issue

[JulianMar]

Check that this is really a bug

• I confirm

Reproduction link

https://stackblitz.com/edit/nuxt-starter-y6fay4

Bug description

Ther's a hydration issue with a very simple implementation of the swiper in nuxt 3.
Check the console for the error

[vue warn]: Hydration children mismatch in <swiper-container>: server rendered element contains more child nodes than client vdom. 
  at <App key=3 > 
  at <NuxtRoot>

and

hydration completed but contains mismatches.

I know it's a framework specific error but imo it makes more sense to place it here. If I should post first in the nuxt issues, I will do that.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

9.2.4

Platform/Target and Browser Versions

nuxt 3

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

[JulianMar]

The same issue happens in next.js aswell. So it's not framework related.

https://stackblitz.com/edit/nextjs-k3yjfv?file=pages/index.js

[JulianMar]

hmmm this might be a deeper issue around vue and the compatibility of web components.
vuejs/core#8110

[alexovn]

Hello. I had the same problem and I found a solution. You need to add attribute init="false" to swiper-container, then initialize slider in mounted hook. Check this section: https://swiperjs.com/element#parameters-as-props

[JulianMar]

That doesn't seem like a fix and more like a workaround to me. I will try it anyways. Thanks for the suggestion!

[StefanFlaschko]

@alexovn : How to initialize, could you share the code please?
I recognized that I only have the hydration mismatch when I'm using the 'nuxt-delay-hydration' module.

[alexovn]

@alexovn : How to initialize, could you share the code please? I recognized that I only have the hydration mismatch when I'm using the 'nuxt-delay-hydration' module.

Okey. You have several ways how to deal with it. First approach, just to use all swiper params and methods in the template. It seems that it works well now. Just check swiper docu. Second approach, do swiper init in onMounted hook:

*** NUXT 3 ***

<script setup>
  import { register } from 'swiper/element'

  const slider = ref()
  const showPrevBtn = ref(false)
  const showNextBtn = ref(false)

  register()

  const onSliderInit = (e) => {
    const [swiper] = e.detail

    showPrevBtn.value = !swiper.isBeginning
    showNextBtn.value = !swiper.isEnd
  }

  const slidePrev = () => {
    slider.value?.swiper.slidePrev()
  }

  const slideNext = () => {
    slider.value?.swiper.slideNext()
  }

  onMounted(async () => {
    const params = {
      slidesPerView: 'auto',
      on: {
        slideChange () {
          console.log('slide changed')
        },
      },
    }

    /**
      use nextTick() if you have swiper in <ClientOnly> component,
      'cause there will be no ref onMounted hook and
      you need to wait DOM update at first
    */
    await nextTick(() => {
      Object.assign(slider.value, params)
      slider.value.initialize()
    })
  })
</script>

<template>
  <div>
    <button
      :class="{ 'opacity-100 !visible': showPrevBtn }"
      type="button"
      aria-label="slide left"
      @click="slidePrev">
      Arrow Left
    </button>

    <ClientOnly>
      <template #fallback>
        Loading...
      </template>
      <swiper-container
        ref="slider"
        init="false"
        @init="onSliderInit">
        <swiper-slide
          v-for="(category, idx) in categories"
          :key="idx">
          <NuxtLink
            :to="`/catalog/${category.slug}`">
            <div>
              {{ category.name }}
            </div>
          </NuxtLink>
        </swiper-slide>
      </swiper-container>
    </ClientOnly>

    <button
      :class="{ 'opacity-100 !visible': showNextBtn }"
      type="button"
      aria-label="slide right"
      @click="slideNext">
      Arrow Right
    </button>
  </div>
</template>

[stijns96]

Simply add the components to nuxt.config.ts.

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('swiper-'),
    },
  },
})