Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at how the best packages for adding carousels, alerts, drag, and drop, and a video player.

Slick for Vue.js

Slick for Vue.js lets us add a carousel to our Vue app.

To use it, we run:

npm i vue-slick

Then we can use it by writing:

<template>
  <div>
    <slick ref="slick" :options="slickOptions">
      <a href="http://placekitten.com/200/200">
        <img src="http://placekitten.com/200/200" alt>
      </a>
      <a href="http://placekitten.com/200/200">
        <img src="http://placekitten.com/200/200" alt>
      </a>
    </slick>
  </div>
</template>

<script>
import Slick from "vue-slick";
import "../../../node_modules/slick-carousel/slick/slick.css";
export default {
  components: { Slick },
  data() {
    return {
      slickOptions: {
        slidesToShow: 1
      }
    };
  },
  methods: {
    next() {
      this.$refs.slick.next();
    },
    prev() {
      this.$refs.slick.prev();
    },
    reInit() {
      this.$nextTick(() => {
        this.$refs.slick.reSlick();
      });
    }
  }
};
</script>

We use the slick component to add the carousel. It comes with the buttons. We set it to show one slide per page with the slidesToShow option. Also, we import the styles to make it display properly.

#software-development #web-development #programming #vue #vue.js