Using vue-awesome-swiper in a Nuxt Project
Tags: vue, nuxt, frontend, tailwindcss
Published: 2021-01-20 14:34:03

---
title: Using vue-awesome-swiper in a Nuxt Project
published: true
description: How to set up vue-awesome-swiper in Nuxt, plus custom styling.
tags: #Vue #Nuxt #frontend #tailwindcss
cover_image: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8i15Fbu3tXSYEYMxZXFk7zuUhGirxiKjRDA&usqp=CAU---

# 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](https://github.com/surmon-china)
Url: [vue-awesome-swiper](https://github.com/surmon-china/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](https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/nuxt/)

Voila!!! you're good to go.

Check Out [Swiper Examples](https://github.surmon.me/vue-awesome-swiper/)

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](https://github.com/surmon-china).

I hope you find this article useful, best wishes.