Как исправить ошибку при выводе слайдера swiper в Nuxt?

Question

[ashfedor]

Доброго времени суток!
Swper ставлю впервые на Nuxt
поставил через npm
в конфиге прописал

plugins: [
    { src: '~plugins/swiper', ssr: false }   
  ],

в файле swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

компонент слайдера

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="(item, i) in sliders"
        :key="i"
      >
        <div class="item-slider">
          <div class="col-cont slider">
            <div class="slider__title">{{item[`title_${$i18n.locale}`]}}</div>
            <div class="slider__content">
              {{item[`description_${$i18n.locale}`]}}
            </div>
            <a @click="openItem(item.slug)" class="btn btn-order">{{$t('portfolio.order_consult')}}</a>
            <div class="slider__signature"></div>
          </div>
          <div class="col-img slider__img-block">
            <img :src="url_img + item.img" :alt="item[`title_${$i18n.locale}`]">
          </div>
        </div>

      </swiper-slide>
    </swiper>
    <div class="slider__paginate">
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </div>
  </div>


</template>

<script>
  export default {
    props: {
      sliders: {
        type: Array,
        default() {
          return {}
        }
      }
    },
    name: 'SliderItem',
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        url_img: process.env.baseImgUrl
      }
    },
    methods: {
      openItem(slug){
        this.$router.push(`/blog/${slug}`)
      }
    },
  }
</script>

<style scoped>

</style>

и в консоле получаю ошибку
vue.runtime.esm.js?2b0e:619 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render.
пробовал в конфиге менять ssr: true
но тогда приложение вылетает совсем
может кто то подсказать как убрать эту ошибку?

Answer 1

[Алексей Ярков]

Обернуть в client-only?

Comments

[ashfedor]

Блин забыл про него))
Но Nuxt пока только учу.
Спасибо!

[Алексей Ярков]

ashfedor, на здоровье)

[Александр Дергунов]

И без client-only свайпер отлично работает. Дело не в этом.

[ashfedor]

Александр Дергунов, Здравствуйте Александр! Смотрю Ваши видео на канале, хорошо помогают.
Спасибо Вам!
тем не менее ошибку убрала обертка слайдера в client-only , да он и без нее работал но красное предупреждение в консоли раздражало))