Using vue-awesome-swiper in a Nuxt Project

#vue #nuxt #frontend #tailwindcss

Take Home from this Article?

This article will take you through the step by step guide of setting up vue-awesome-swiper in a nuxt project, how to add custom styling to vue-awesome-swiper and responsiveness.

What's vue-awesome-swiper?

vue-awesome-swiper is a slider component built with vue and makes setting up a slider easier on frameworks such as Vue and Nuxt.
Built By: Surmon China
Url: vue-awesome-swiper

Let's get Started

install vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

yarn add swiper vue-awesome-swiper

Next
Create vue-awesome-swiper.js file in the Plugin Folder
inside the vue-awesome-swiper.js file add

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';

// import custom style
import '@/assets/css/swiper.css';

Vue.use(VueAwesomeSwiper);

Add vue-awesome-swiper source to the plugins array in nuxt.config.js file

plugins: [
    { src: '@/plugins/vue-awesome-swiper', mode: 'client' }
  ],

Let's Create a Slider Component inside our Components Folder and Add the following Code

<template>
  <div v-swiper="swiperOption" class="w-5/6 ml-auto relative" :loadtheme="false">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <!-- Render original HTML in server, render Swiper in browser (client) -->
        <img class="h-64 w-64" :src="banner" />

      </div>
    </div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </div>
</template>

<script>
import { directive } from "vue-awesome-swiper";

export default {
  name: "Slider",
  directives: {
    swiper: directive,
  },
  data() {
    return {
      banners: ["/slider-1.png", "/slider-2.png", "/slider-3.png"],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: -10,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            1024: {
              slidesPerView: 4,
              spaceBetween: 10
            },
            768: {
              slidesPerView: 3,
              spaceBetween: 10
            },
            640: {
              slidesPerView: 2,
              spaceBetween: 10
            },
            320: {
              slidesPerView: 1,
              spaceBetween: 10
            }
          }
      },
    };
  },
};
</script>

<style scoped>
.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  @apply w-48 h-48 ;
}
</style>

We have different usage:
Directive and the only difference in the use of the Component

component find Swiper instance by ref attribute.
directive find Swiper instance by directive arg.

we opted for Directive usage, The effect of the two ways and the difference in the applicable environment can be found here

Voila!!! you're good to go.

Check Out Swiper Examples

Addition: Custom Styling for Vue Awesome Swiper
You can create a CSS file for your custom styling by creating a CSS file and add it to the CSS folder inside the assets folder and import into vue-awesome-swiper.js file inside the Plugins Folder or
Find swiper folder inside node_modules folder and copy swiper.css file from the CSS folder into Assets CSS folder and tweak to your satisfaction(Like I did).

vue-awesome-swiper is one of the best slider components for Vue and Nuxt all Thanks to Surmon China.

I hope you find this article useful, best wishes.

Top comments (3)

afrasiabi1374 • Jan 2 '22

its not woking by this err

Must use import to load ES Module: C:\Users\Ali\Desktop\shop7\node_modules\swiper\swiper.esm.js require() of ES modules is not supported. require() of C:\Users\Ali\Desktop\shop7\node_modules\swiper\swiper.esm.js from C:\Users\Ali\Desktop\shop7\node_modules\vue-awesome-swiper\dist\vue-awesome-swiper.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename swiper.esm.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\Ali\Desktop\shop7\node_modules\swiper\package.json.