How to fix error when displaying swiper slider in Nuxt?

Question

Vue.js

Good day!
Swper I put for the first time on Nuxt I
put it through npm
in the config I registered

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

in swiper.js file

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

slider component

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

and in the console I get the error
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.
I tried to change ssr: true in the config,
but then the application crashes completely
, can someone tell me how to remove this error?

Answer 1

Wrap in client-only?