CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsswiper.js
Andreas Hunter
Andreas Hunter

Reputation: 5024

How to use official Swiper.js as plugin in Nuxt.js

I have plugin swiper.js with code:

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

I tried install Swiper from official documentation for Vue.js

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. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing . Bailing hydration and performing full client-side render.

Upvotes: 4

Views: 9335

Answers (2)

RikLamers
RikLamers

Reputation: 451

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). Thanks to @yura3d for providing the answer Swiper does NOT support Vue 2 as of v6.3.

I noticed the error with Swiper in Nuxt was the way of importing 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.

But there is a workaround that has been working perfectly for me. Making a plugin (inside the plugin/ folder) for Swiper worked perfectly. The setup you need for it is as follows.

  1. Make a plugin file swiper.client.js inside the plugin/ folder.
  2. Import Vue and Swiper (and the modules you would need) in this file.
  3. Use Vue.property to register Swiper as a plugin within 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 will be referred to as this.$swiper and, for example, Navigation is referred to as this.$swiperModules.Navigation.

  1. Include the plugin within the nuxt.config.js within the plugin array:
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.

  1. usage within a page/component:
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.

Hope this helps anybody using the latest Swiper version within a Nuxt 2 environment.

Upvotes: 6

yura3d
yura3d

Reputation: 186

Actual Swiper versions (6.3 and higher) support only Vue 3, as it is described on 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 3 (which is based on Vue 3) is planned to release in 2021 Q1.

You can setup Swiper manually without components by "Get Started" guide: 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.

Upvotes: 4

Related Questions