How to connect SwiperJS over npm to NuxtJS?

Question

How to connect SwiperJS over npm to NuxtJS?

0

javascript vue.js swiper nuxt.js

Author: Nazim Cherpanov, 2020-11-20

Source

1 answers

score 0 · Answer 1

Installing the module: npm install swiper vue-awesome-swiper --save

Creating a plugin: plugins/swiper.js

import Vue from 'vue'

import { Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay } from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
SwiperClass.use([Pagination, Mousewheel, Navigation, Autoplay])

Vue.use(getAwesomeSwiper(SwiperClass))

After that, you add the configuration to nuxt. config.js

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

Read more here: https://github.com/surmon-china/vue-awesome-swiper