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!
