Top Vue Packages for Adding Carousels, Alerts, Drag and Drop, and a Video Player
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:28:49

---
title: Top Vue Packages for Adding Carousels, Alerts, Drag and Drop, and a Video Player
published: true
date: 2020-07-27 20:00:35 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-carousels-alerts-drag-and-drop-and-a-video-player/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-carousels-alerts-drag-and-drop-and-a-video-player
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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.

### vue-sweetalert2

vue-sweetalert2 lets us add an alert display in our app.

To install it, we run:

```
npm i vue-sweetalert2

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";

Vue.use(VueSweetalert2);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <button @click="showAlert">click me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal("Hello!");
    }
  }
};
</script>

```

We use the `$swal` method that comes with the plugin to create our own alert. We can change the color of the buttons and we can also add custom styling.

To do that, we write:

```
import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";

const options = {
  confirmButtonColor: "green",
  cancelButtonColor: "blue"
};

Vue.use(VueSweetalert2, options);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

We set the color of the confirm and cancel buttons with the object.

### vue-video-player

vue-video-player is a video player component that we can add to a Vue app.

To install it, we run:

```
npm i vue-video-player

```

Then we can use it by writing:

```
<template>
  <video-player
    class="video-player-box"
    ref="videoPlayer"
    :options="playerOptions"
    :playsinline="true"
  ></video-player>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src:
              "https://mirrors.standaloneinstaller.com/video-sample/P6090053.mp4"
          }
        ],
        poster: "https://placekitten.com/200/200"
      }
    };
  },

  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  methods: {}
};
</script>

```

We added the `video-player` component. We just set `src` of the video with the location.

`poster` is the picture we see before we play the video.

`video-player` also emits all the video element events like `play` , `pause` , `canplay` and much more.

### vue-drag-drop

vue-drag-drop provides us with components to let us add drag and drop features in our Vue app.

To install it, we run:

```
npm i vue-drag-drop

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import { Drag, Drop } from "vue-drag-drop";

Vue.component("drag", Drag);
Vue.component("drop", Drop);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <div>
    <drag class="drag" :transfer-data="{ draggable }">{{ draggable }}</drag>
    <drop class="drop" @drop="handleDrop">Dropzone</drop>
  </div>
</template>

<script>
export default {
  data() {
    return { draggable: "Drag Me" };
  },
  methods: {
    handleDrop() {
      alert("dropped");
    }
  }
};
</script>

<style>
.drag,
.drop {
  display: inline-block;
  position: relative;
  padding: 30px;
  text-align: center;
  vertical-align: top;
}
</style>

```

We have the `drag` and `drop` component from the library. We can drag the `drag` component to the `drop` component. Then the `drop` event is emitted and the `handleDrop` method is run.

### Conclusion

Slick for Vue.js is a carousel we can use to add carousels to our app. vue-sweetalert2 is an alert we can use in our app. vue-video-player is a video player we can write. vue-drag-drop is a set of components for adding drag and drop capabilities. Thanks for reading my article, I hope you found it helpful!

The post [Top Vue Packages for Adding Carousels, Alerts, Drag and Drop, and a Video Player](https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-carousels-alerts-drag-and-drop-and-a-video-player/) appeared first on [The Web Dev](https://thewebdev.info).