#javascript #vue.js #nuxt.js #swiper.js
#javascript #vue.js #nuxt.js #swiper.js
Вопрос:
У меня есть плагин 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>
или отсутствием . Отключение гидратации и выполнение полного рендеринга на стороне клиента.
Комментарии:
1. Вы пытались импортировать плагин, заменив ~ на @ ? Как этот пример в документации
2. @padaleiana Да, я пробовал
3. Пожалуйста! Обновите свой вопрос, добавив ошибки, о которых вы упоминаете.
4. @padaleiana Вопрос обновлен!
5. Ваше свойство css в
nuxt.config.js
пусто. Попробуйте удалить свой импорт scss из плагина и поместить каждый из них в указанное мной свойство, как в примере из документации
Ответ №1:
Актуальные версии 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()
методе.
Ответ №2:
Я знаю, что этот вопрос старше, но я столкнулся с этим вопросом, так как у меня возникла проблема с использованием плагина 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 сработало отлично. Настройка, необходимая для этого, заключается в следующем.
- Создайте файл плагина
swiper.client.js
внутриplugin/
папки. - Импортируйте
Vue
иSwiper
(и модули, которые вам понадобятся) в этот файл. - Используется
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
.
- Включите плагин
nuxt.config.js
plugin
в массив внутри:
plugins: [
{ src: '~/plugins/swiper.client.js', mode: 'client' }
],
То, как мы это настроили, гарантирует, что плагин будет загружен только на стороне клиента, поскольку сервер не имеет никакого отношения к плагину.
- использование внутри страницы / компонента:
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.