如何在 Nuxt.js 中使用官方 Swiper.js 作為插件

Question

我有帶有代碼的插件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上的完整演示代碼

我嘗試從 Vue.js 的官方文檔中安裝 Swiper

依賴項

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

控制台錯誤：

未知的自定義元素： - 您是否正確注冊了組件？ 對於遞歸組件，請確保提供“名稱”選項。

---

客戶端渲染的虛擬 DOM 樹與服務器渲染的內容不匹配。 這可能是由不正確的 HTML 標記引起的，例如在<p>中嵌套塊級元素，或者丟失。 Bailing 水合作用並執行完整的客戶端渲染。

Answer 1

實際的 Swiper 版本（6.3 及更高版本）僅支持 Vue 3，如https://swiperjs.com/vue/ 中所述。 但是 Nuxt 在底層仍然使用 Vue 2，因此您不能使用從swiper/vue包導入的swiper/vue Vue 組件（Swiper、SwiperSlide 等）。 Nuxt 3（基於 Vue 3）計划於 2021 年第一季度發布。

您可以通過“入門”指南在沒有組件的情況下手動設置 Swiper： https : //swiperjs.com/get-started/ 。 這並不難，您只需要將 Swiper 布局復制到您的模板並在mounted()方法中初始化 Swiper。

Answer 2

我知道這個問題比較老，但我遇到了這個問題，因為我在 Nuxt 2 (v2.15.8) 中使用 swiper 插件 (v8.3.1) 時遇到問題。 感謝 @yura3d 提供答案 Swiper 從 v6.3 開始不支持 Vue 2。

我注意到 Nuxt 中 Swiper 的錯誤是導入 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. 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.

但是有一種解決方法對我來說非常有效。 為 Swiper 制作插件（在plugin/文件夾內）效果很好。 您需要的設置如下。

1. 在plugin/文件夾中創建一個插件文件swiper.client.js 。
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. 將插件包含在plugin數組中的nuxt.config.js中：

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關鍵字訪問它。

希望這可以幫助任何人在 Nuxt 2 環境中使用最新的 Swiper 版本。

Answer 3

這是一個如何使 SwiperJS v7 與 NuxtJs v2 一起工作的示例： https : //github.com/seosmmbusiness/NuxtJs-SwiperJs7

對於 SwiperJS v6，請點擊此鏈接： https : //github.com/seosmmbusiness/NuxtJs-SwiperJs