DEV Community

loading...
Cover image for Using vue-awesome-swiper in a Nuxt Project

Using vue-awesome-swiper in a Nuxt Project

abidemit profile image Tiamiyu Sikiru Abidemi ・2 min read

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
Enter fullscreen mode Exit fullscreen mode
yarn add swiper vue-awesome-swiper

Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide