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 a date picker, drag and drop between different arrays, media queries, content loading placeholders, and displaying toasts.
Vue date pick
We use the Vue date pick to add a date picker.
To install it, we run:
npm i vue-date-pick
Then we can use it by writing:
<template>
<date-pick v-model="date"></date-pick>
</template>
<script>
import DatePick from "vue-date-pick";
import "vue-date-pick/dist/vueDatePick.css";
export default {
components: { DatePick },
data: () => ({
date: "2020-01-01"
})
};
</script>
date-pick has the date picker.
And we import the CSS to display the proper styles.
v-model binds the select date to the date state.
v-media-query
v-media-query is a useful media query library for Vue apps.
To install it, we run:
npm i v-media-query
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import vMediaQuery from "v-media-query";
Vue.use(vMediaQuery);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div v-if="$mq.resize && $mq.above('600px')">big div</div>
</template>
<script>
export default {};
</script>
We registered the plugin so that we can use the $mq property to get the screen size and whether the element is resizing.
above means the width is bigger than the given width.
There’s also the between method to check if the screen width is between a certain range.
below lets us check if the screen width is below a certain width.
Vue Content Loading
Vue Content Loading lets us display a placeholder graphic to show when something is loading.
To use it, we run:
npm i vue-content-loading
Then we can write:
<template>
<vue-content-loading :width="300" :height="100">
<circle cx="50" cy="50" r="30"/>
</vue-content-loading>
</template>
<script>
import VueContentLoading from "vue-content-loading";
export default {
components: {
VueContentLoading
}
};
</script>
to use it.
vue-content-loading is the component that lets us show the placeholder elements.
We put an SVG inside to display it in an animated way.
There are many other customization options.
Vue-Easy-Toast
Vue-Easy-Toast is an easy to use notification component for Vue apps.
To use it, first we install it by running:
npm i vue-easy-toast
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Toast from "vue-easy-toast";
Vue.use(Toast);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.$toast("hello");
}
};
</script>
We use the $toast method to display the notification.
It has many options. We can change styling, positions, and transitions.
vue-dragula
vue-dragula lets us add drag and drop capabilities to our app.
To use it, we run:
npm i vue-dragula
Then we can use it by writing:
<template>
<div>
<div class="wrapper">
<div class="container" v-dragula="colOne" bag="first-bag">
<div v-for="n in colOne" :key="n">{{n}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
colOne: Array(10)
.fill()
.map((_, i) => i)
};
}
};
</script>
Then we can drag and drop the numbers.
bag lets drag and drop between columns.
We can also drag and drop between containers:
<template>
<div>
<div class="wrapper">
<div class="container" v-dragula="colOne" bag="first-bag">
<div v-for="n in colOne" :key="n">{{n}}</div>
</div>
<div class="container" v-dragula="colTwo" bag="first-bag">
<div v-for="n in colTwo" :key="n">{{n}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
colOne: Array(10)
.fill()
.map((_, i) => i),
colTwo: []
};
}
};
</script>
We can add drag and drop capabilities to move items between arrays.
Conclusion
Vue date pick is a useful date picker.
v-media-query lets us check media queries in Vue apps without CSS.
vue-dragula is a useful drag and drop library for Vue apps.
Vue Content Loading lets us add a content loading placeholder with SVGs.
Vue-Easy-Toast is a library for displaying toasts.
