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 items, YouTube videos, an input box with autofill, and a custom scrollbar.
Vue Smooth DnD
Vue Smooth DnD is an easy to use Vue library for making drag and drop lists.
To use it, we run:
npm i vue-smooth-dnd
Then we can use it by writing:
<template>
<div>
<div>
<Container>
<Draggable v-for="item in items" :key="item.id">
<div>{{item.data}}</div>
</Draggable>
</Container>
</div>
</div>
</template>
<script>
import { Container, Draggable } from "vue-smooth-dnd";
export default {
name: "Simple",
components: { Container, Draggable },
data() {
return {
items: Array(50)
.fill()
.map((_, i) => ({ id: i, data: `Draggable ${i}` }))
};
}
};
</script>
We use the Container and Draggable components to make the draggable container and items.
Container is the container.
Draggable are the draggable items.
We can change the classes of the items, the animation duration, drop placeholder, and other options.
vue-simple-suggest
As its name suggests, vue-simple-suggest is a simple package for adding an input box with autofill suggestions,
To use it, we run:
npm i vue-simple-suggest
Then we use it by writing:
<template>
<div>
<vue-simple-suggest v-model="chosen" :list="simpleSuggestionList" :filter-by-query="true"></vue-simple-suggest>
<p>{{ chosen }}</p>
</div>
</template>
<script>
import VueSimpleSuggest from "vue-simple-suggest";
import "vue-simple-suggest/dist/styles.css";
export default {
components: {
VueSimpleSuggest
},
data() {
return {
chosen: ""
};
},
methods: {
simpleSuggestionList() {
return ["apple", "orange", "grape"];
}
}
};
</script>
We import the component and CSS to display the input box.
Then we specified the simpleSuggestionList to return the suggestions.
v-model binds the selected choice to the chosen state.
It also works with async data and others has many other options for changes.
We can return a promise in our suggestion function to use async data as our suggestion source:
<template>
<div>
<vue-simple-suggest v-model="chosen" :list="simpleSuggestionList" :filter-by-query="true"></vue-simple-suggest>
<p>{{ chosen }}</p>
</div>
</template>
<script>
import VueSimpleSuggest from "vue-simple-suggest";
import "vue-simple-suggest/dist/styles.css";
export default {
components: {
VueSimpleSuggest
},
data() {
return {
chosen: ""
};
},
methods: {
async simpleSuggestionList() {
return Promise.resolve(["apple", "orange", "grape"]);
}
}
};
</script>
We return a promise instead of an array.
vue-youtube
vue-youtube is a Vue package that let us embed YouTube videos in our Vue app.
To use it, we run:
npm i vue-youtube
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueYoutube from "vue-youtube";
Vue.use(VueYoutube);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<youtube ref="youtube" :video-id="videoId" :player-vars="playerVars" @playing="playing"></youtube>
</div>
</template>
<script>
export default {
data() {
return {
videoId: "NnsHhqAdOiM",
playerVars: {
autoplay: 1
}
};
},
computed: {
player() {
return this.$refs.youtube.player;
}
},
methods: {
async playVideo() {
await this.player.playVideo();
}
}
};
</script>
We have the youtube component to embed the videos.
All we have to do is to specify the ID of the video and set a few options to play videos.
Vue 2 Scrollbar
Vue 2 Scrollbar is a custom scrollbar component for Vue apps.
To use it, we run:
npm i vue2-scrollbar
to install it.
Then we write:
<template>
<div>
<vue-scrollbar ref="Scrollbar" classes="my-scrollbar">
<div class="scroll-me">
<div v-for="n in 100" :key="n">{{n}}</div>
</div>
</vue-scrollbar>
</div>
</template>
<script>
import VueScrollbar from "vue2-scrollbar";
import "vue2-scrollbar/dist/style/vue2-scrollbar.css";
export default {
components: { VueScrollbar }
};
</script>
<style>
.my-scrollbar {
max-height: 300px;
}
</style>
We add the vue-scrollbar component with the styles.
Also, we set the height of the container to 300px max.
Then we should see the scrollbar from the package displayed.
Conclusion
Vue Smooth DnD is a drag and drop component for Vue apps.
vue-simple-suggest lets us add an input box with autofill suggestions.
vue-youtube is a YouTube component for Vue apps.
Vue 2 Scrollbar provides us with a custom scrollbar.
