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 the best packages for adding drag and drop elements, animation, and debouncing.
Vue Slicksort
Vue Slicksort is an easy to use package that lets us create sortable lists in our Vue app in a snap.
To use it, we run:
npm i vue-slicksort
to install it.
Then we write:
<template>
<div class="root">
<SlickList lockAxis="y" v-model="items">
<SlickItem v-for="(item, index) in items" :index="index" :key="index">{{ item }}</SlickItem>
</SlickList>
</div>
</template>
<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
components: {
SlickItem,
SlickList
},
data() {
return {
items: Array(20).fill().map((_, i)=> `item ${i}`)
};
}
};
</script>
to use it.
We use the SlickList item for creating the container.
Then we put SlickItem components inside it to display the sortable list.
Now we can drag and drop items on the list.
vue-dragula
vue-dragula is another easy to use drag and drop library for Vue apps.
To use it, we run:
npm i vue-dragula
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
const VueDragula = require("vue-dragula");
Vue.use(VueDragula);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div class="root">
<div class="container" v-dragula="colOne" bag="first-bag">
<div v-for="text in colOne" :key="text">{{text}}</div>
</div>
<div class="container" v-dragula="colTwo" bag="first-bag">
<div v-for="text in colTwo" :key="text">{{text}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
colOne: Array(15)
.fill()
.map((_, i) => `item ${i}`),
colTwo: Array(15)
.fill()
.map((_, i) => `item ${i + 20}`)
};
}
};
</script>
We created 2 draggable lists with the v-dragula directive.
We set the bag prop to the same name so that we can drag and drop between them.
Inside each container, we render the elements that are draggable.
vue-dragscroll
vue-dragscroll is a directive that lets us enable scrolling by dragging our mouse.
To use it, we run:
npm i vue-dragscroll
to install it.
Then we write:
<template>
<div class="root">
<div v-dragscroll id="scroll">
<div v-for="i in items" :key="i">{{i}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: Array(50)
.fill()
.map((_, i) => `item ${i}`)
};
}
};
</script>
<style>
#scroll {
height: 300px;
overflow-y: scroll;
}
</style>
to create a div that’s scrollable by clicking and holding our mouse and moving it.
We can use the x and y modifiers to only enable or disabling drag scrolling in one direction.
Also, we can disable drag scrolling for child elements.
Vue Animate CSS
Vue Animate CSS lets us add animation effects to our app without creating them from scratch ourselves.
We can install it by running:
npm i v-animate-css
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VAnimateCss from "v-animate-css";
Vue.use(VAnimateCss);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div class="root">
<div v-animate-css="'fadeIn'">foo</div>
</div>
</template>
<script>
export default {};
</script>
We add a fade-in animation effect by using the v-animate-css directive with the string 'fadeIn' .
There are many other effects we can add to our app with this library.
vue-debounce
We can use vue-debounce to delay a callback’s running.
To use it, we run:
npm i vue-debounce
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import vueDebounce from "vue-debounce";
Vue.use(vueDebounce);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div class="root">
<input v-debounce:300ms="log" type="text">
</div>
</template>
<script>
export default {
methods: {
log(e){
console.log(e)
}
}
};
</script>
We use the v-debounce directive with the 300ms modifier to delay the log method for 300 milliseconds before running it.
Then we can get the inputted value from it when we run it.
Conclusion
Vue Slicksort and vue-dragula let us add draggable elements to our app.
Vue Animate CSS is a library that lets us add CSS animation effects without writing them from scratch.
vue-debounce is a library for delaying callbacks.
