[英]How to use official Swiper.js as plugin in Nuxt.js
I have plugin swiper.js
with code:我有带有代码的插件
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);
But this is doesn't work in my case.但这在我的情况下不起作用。 Here you can see my full demo code on CodeSandbox
在这里你可以看到我在CodeSandbox上的完整演示代码
I tried install Swiper from official documentation for Vue.js我尝试从 Vue.js 的官方文档中安装 Swiper
Dependencies依赖项
"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"
}
Console errors:控制台错误:
Unknown custom element: - did you register the component correctly?
未知的自定义元素: - 您是否正确注册了组件? For recursive components, make sure to provide the "name" option.
对于递归组件,请确保提供“名称”选项。
The client-side rendered virtual DOM tree is not matching server-rendered content.
客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。 This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
<p>
, or missing.这可能是由不正确的 HTML 标记引起的,例如在
<p>
中嵌套块级元素,或者丢失。 Bailing hydration and performing full client-side render.Bailing 水合作用并执行完整的客户端渲染。
Actual Swiper versions (6.3 and higher) support only Vue 3, as it is described on https://swiperjs.com/vue/ .实际的 Swiper 版本(6.3 及更高版本)仅支持 Vue 3,如https://swiperjs.com/vue/ 中所述。 But Nuxt still uses Vue 2 under the hood, so you can't use Swiper Vue components (Swiper, SwiperSlide, etc) imported from
swiper/vue
package.但是 Nuxt 在底层仍然使用 Vue 2,因此您不能使用从
swiper/vue
包导入的swiper/vue
Vue 组件(Swiper、SwiperSlide 等)。 Nuxt 3 (which is based on Vue 3) is planned to release in 2021 Q1. Nuxt 3(基于 Vue 3)计划于 2021 年第一季度发布。
You can setup Swiper manually without components by "Get Started" guide: https://swiperjs.com/get-started/ .您可以通过“入门”指南在没有组件的情况下手动设置 Swiper: https : //swiperjs.com/get-started/ 。 It is not so difficult, you just need to copy Swiper layout to your template and initialize Swiper in
mounted()
method.这并不难,您只需要将 Swiper 布局复制到您的模板并在
mounted()
方法中初始化 Swiper。
I know this question is older but I came across this question since I had an issue using the swiper plugin (v8.3.1) in Nuxt 2 (v2.15.8).我知道这个问题比较老,但我遇到了这个问题,因为我在 Nuxt 2 (v2.15.8) 中使用 swiper 插件 (v8.3.1) 时遇到问题。 Thanks to @yura3d for providing the answer Swiper does NOT support Vue 2 as of v6.3.
感谢 @yura3d 提供答案 Swiper 从 v6.3 开始不支持 Vue 2。
I noticed the error with Swiper in Nuxt was the way of importing Swiper.我注意到 Nuxt 中 Swiper 的错误是导入 Swiper 的方式。 When following the docs and importing as mentioned (
import Swiper, { Navigation, Pagination, Scrollbar } from 'swiper';
) resulted in an error: 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.
遵循文档并按上述方式导入时(
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.
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.
But there is a workaround that has been working perfectly for me.但是有一种解决方法对我来说非常有效。 Making a plugin (inside the
plugin/
folder) for Swiper worked perfectly.为 Swiper 制作插件(在
plugin/
文件夹内)效果很好。 The setup you need for it is as follows.您需要的设置如下。
swiper.client.js
inside the plugin/
folder.plugin/
文件夹中创建一个插件文件swiper.client.js
。Vue
and Swiper
(and the modules you would need) in this file.Vue
和Swiper
(以及您需要的模块)。Vue.property
to register Swiper as a plugin within Nuxt.Vue.property
将 Swiper 注册为 Nuxt 中的插件。 This would look like this:const swiper = {
install(Vue, options) {
Vue.prototype.$swiper = Swiper;
Vue.prototype.$swiperModules = {
Navigation,
Pagination,
Scrollbar
};
}
};
Vue.use(swiper);
In the above code snippet, I register Swiper and a few modules.在上面的代码片段中,我注册了 Swiper 和一些模块。 Swiper will be referred to as
this.$swiper
and, for example, Navigation is referred to as this.$swiperModules.Navigation
. Swiper 将被称为
this.$swiper
,例如,导航被称为this.$swiperModules.Navigation
。
nuxt.config.js
within the plugin
array:plugin
数组中的nuxt.config.js
中:plugins: [
{ src: '~/plugins/swiper.client.js', mode: 'client' }
],
The way we set this up makes sure the plugin will only be loaded on the client side, since the server doesn't have anything to do with the plugin.我们设置的方式确保插件只会在客户端加载,因为服务器与插件没有任何关系。
this.swiper = new this.$swiper('.swiper', {
loop: true,
// configure Swiper to use modules
modules: [this.$swiperModules.Navigation, this.$swiperModules.Pagination, this.$swiperModules.Scrollbar]
});
Since we added Swiper as a plugin we can now access it via the this
keyword.由于我们添加了 Swiper 作为插件,我们现在可以通过
this
关键字访问它。
Hope this helps anybody using the latest Swiper version within a Nuxt 2 environment.希望这可以帮助任何人在 Nuxt 2 环境中使用最新的 Swiper 版本。
Here is an example how to make SwiperJS v7 work with NuxtJs v2: https://github.com/seosmmbusiness/NuxtJs-SwiperJs7这是一个如何使 SwiperJS v7 与 NuxtJs v2 一起工作的示例: https : //github.com/seosmmbusiness/NuxtJs-SwiperJs7
For SwiperJS v6 follow this link: https://github.com/seosmmbusiness/NuxtJs-SwiperJs对于 SwiperJS v6,请点击此链接: https : //github.com/seosmmbusiness/NuxtJs-SwiperJs
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.