Как решить ошибку гидратации Nuxt.js?

Используя Nuxt.js подключаю плагин кастомного скролла. В папке plugins создал файл vuescroll.js и там разместил код:
import Vue from 'vue'
import vuescroll from 'vuescroll'

Vue.use(vuescroll, {
  ops: {
    bar: {
      onlyShowBarOnScroll: false,
      background: '#9898a3'
    }
  }
})

Далее этот файл указал в nuxt.config.js
plugins: [{ src: '~/plugins/vuescroll', mode: 'client' }]

А затем в него оборачиваю контент который строится из ссылок, данные для которых берутся из стора:
<vue-scroll>
   <a
              v-for="(category, index) in getCategoriesList"
              :key="index"
              class="desktop-menu__link"
              href="#"
              :class="currentOpen === category.id ? 'active' : ''"
              @click.prevent="setCurrentOpen(category.id)"
            >
              <span class="desktop-menu__ico">
                <svg width="18px" height="18px" class="icon">
                  <use :xlink:href="`#${category.ico}`"></use>
                </svg>
              </span>
              {{ category.name }}</a
            >
    </vue-scroll>


В итоге всё вроде бы работает, но в консоли выдается ошибка гидратации, как её можно пофиксить?
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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
  • Вопрос задан
  • 610 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы