Блог

У меня есть плагин swiper.js с кодом:

 import Vue from "vue";
// import Swiper core and required components
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
Vue.use(Swiper, SwiperCore, SwiperSlide);
  

Но в моем случае это не работает. Здесь вы можете увидеть мой полный демонстрационный код на CodeSandbox

Я попытался установить Swiper из официальной документации для Vue.js

Зависимости

 "dependencies": {
  "core-js": "^3.6.5",
  "nuxt": "^2.14.6",
  "swiper": "^6.3.2"
},
"devDependencies": {
  "@nuxtjs/style-resources": "^1.0.0",
  "node-sass": "^4.14.1",
  "sass-loader": "^10.0.2"
}
  

Ошибки консоли:

Неизвестный пользовательский элемент: — вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

---

Отображаемое на стороне клиента виртуальное DOM-дерево не соответствует отображаемому на сервере контенту. Вероятно, это вызвано неправильной разметкой HTML, например, вложением элементов уровня блока внутри <p> или отсутствием . Отключение гидратации и выполнение полного рендеринга на стороне клиента.

Актуальные версии Swiper (6.3 и выше) поддерживают только Vue 3, как описано на https://swiperjs.com/vue /. Но Nuxt по-прежнему использует Vue 2 под капотом, поэтому вы не можете использовать компоненты Swiper Vue (Swiper, SwiperSlide и т. Д.), импортированные из swiper/vue package. Nuxt 3 (основанный на Vue 3) планируется выпустить в 1 квартале 2021 года.

Вы можете настроить Swiper вручную без компонентов с помощью руководства «Начало работы»: https://swiperjs.com/get-started /. Это не так сложно, вам просто нужно скопировать макет Swiper в свой шаблон и инициализировать Swiper в mounted() методе.

Я знаю, что этот вопрос старше, но я столкнулся с этим вопросом, так как у меня возникла проблема с использованием плагина swiper (v8.3.1) в Nuxt 2 (v2.15.8). Спасибо @yura3d за предоставленный ответ Swiper НЕ поддерживает Vue 2 начиная с версии 6.3.

Я заметил, что ошибка с Swiper в Nuxt была способом импорта Swiper. При следовании документам и импорте, как указано ( import Swiper, { Navigation, Pagination, Scrollbar } from 'swiper'; ), возникла ошибка: require() of ES Module XXX not supported. Instead change the require of swiper.esm.js in XXX to a dynamic import() which is available in all CommonJS modules.

Но есть обходной путь, который отлично работает для меня. Создание плагина (внутри plugin/ папки) для Swiper сработало отлично. Настройка, необходимая для этого, заключается в следующем.

1. Создайте файл плагина swiper.client.js внутри plugin/ папки.
2. Импортируйте Vue и Swiper (и модули, которые вам понадобятся) в этот файл.
3. Используется Vue.property для регистрации Swiper в качестве плагина в Nuxt. Это будет выглядеть так:

 const swiper = {
    install(Vue, options) {
        Vue.prototype.$swiper = Swiper;
        Vue.prototype.$swiperModules = {
            Navigation,
            Pagination,
            Scrollbar
        };
    }
};

Vue.use(swiper);
  

В приведенном выше фрагменте кода я регистрирую Swiper и несколько модулей. Swiper будет упоминаться как this.$swiper и, например, Навигация упоминается как this.$swiperModules.Navigation .

4. Включите плагин nuxt.config.js plugin в массив внутри:

 plugins: [
    { src: '~/plugins/swiper.client.js', mode: 'client' }
],
  

То, как мы это настроили, гарантирует, что плагин будет загружен только на стороне клиента, поскольку сервер не имеет никакого отношения к плагину.

5. использование внутри страницы / компонента:

 this.swiper = new this.$swiper('.swiper', {
    loop: true,
    // configure Swiper to use modules
    modules: [this.$swiperModules.Navigation, this.$swiperModules.Pagination, this.$swiperModules.Scrollbar]
});
  

Поскольку мы добавили Swiper в качестве плагина, теперь мы можем получить к нему доступ через this ключевое слово.

Надеюсь, это поможет любому, кто использует последнюю версию Swiper в среде Nuxt 2.