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 appeared first on The Web Dev.