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 animating numbers, handling clicks outside an element, adding a Markdown editor, and a customizable dropdown.
vue-countup-v2
vue-countup-v2 lets us add a display for animating numbers.
To use it, we install it by running:
npm install --save countup.js vue-countup-v2
We’ve to add countup.js to use vue-countup-v2.
Then we can use it by writing:
<template>
<div id="app">
<ICountUp :delay="delay" :endVal="endVal" :options="options" @ready="onReady"/>
</div>
</template>
<script>
import ICountUp from "vue-countup-v2";
export default {
components: {
ICountUp
},
data() {
return {
delay: 1000,
endVal: 45373,
options: {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
prefix: "",
suffix: ""
}
};
},
methods: {
onReady(instance, CountUp) {
const that = this;
instance.update(that.endVal + 100);
}
}
};
</script>
We can set many options.
We set the endVal to set the end value to animate.
delay is the delay for the animation.
useEasing lets us animate in a nonlinear fashion.
useGrouping groups the digits.
decimal is the decimal digits separator.
prefix and suffix are prefixes and suffixes that are added to the number.
Vue-SimpleMDE
Vue-SimpleMDE is a simple Markdown editor component for Vue apps.
To use it, we first install it by running:
npm i vue-simplemde
Then we can use it by writing:
<template>
<vue-simplemde v-model="content" ref="markdownEditor"/>
</template>
<script>
import VueSimplemde from "vue-simplemde";
import "simplemde/dist/simplemde.min.css";
export default {
components: {
VueSimplemde
},
data() {
return {
content: ""
};
}
};
</script>
We just add the vue-simplemde component to our app.
Also, we imported the CSS for the package.
The inputted value is bound to the content with the v-model .
vue-search-select
vue-search-select provides us with a dropdown that’s customizable.
To use it, we run:
npm i vue-search-select
to install it.
Then we can use it by writing:
<template>
<model-select :options="options" v-model="item" placeholder="select item"></model-select>
</template>
<script>
import { ModelSelect } from "vue-search-select";
import "vue-search-select/dist/VueSearchSelect.css";
export default {
data() {
return {
options: [
{ value: "1", text: "foo" },
{ value: "2", text: "bar" },
{ value: "3", text: "baz" }
],
item: {
value: "",
text: ""
}
};
},
components: {
ModelSelect
}
};
</script>
We use the model-select component.
The options prop sets the dropdown options.
v-model binds the item to the item .
vue-tel-input
vue-tel-input lets us ad a telephone number to our Vue app.
To use it, we install it by running:
npm i vue-tel-input
Then we can use it by writing:
<template>
<div>
<vue-tel-input v-model="phone"></vue-tel-input>
</div>
</template>
<script>
export default {
data() {
return {
phone: ""
};
}
};
</script>
We see a dropdown with the list of country prefixes for the phone numbers.
And we can type what we want into the vue-tel-input component.
v-model lets us bind the input value to the phone state.
vue-on-click-outside
vue-on-click-outside is a Vue directive that lets us call a method whenever a click is triggered outside the element.
To install it, we run:
npm i vue-on-click-outside
Then we can use it by writing:
<template>
<div>
<button type="button" @click="open">open</button>
<div v-if="showPopover" v-on-click-outside="close">
<span>hello</span>
</div>
</div>
</template>
<script>
import { mixin as onClickOutside } from "vue-on-click-outside";
export default {
mixins: [onClickOutside],
data() {
return { showPopover: false };
},
methods: {
open() {
this.showPopover = true;
},
close() {
this.showPopover = false;
}
}
};
</script>
We have a button to open a popup.
The popup has the v-on-click-outside directive to close it when we click outside the popup.
The closing is done by calling the close method.
Conclusion
vue-countup-v2 lets us animate numbers.
Vue-SimpleMDE lets us add a Markdown editor to our Vue app.
vue-tel-input is a useful telephone input.
vue-on-click-outside lets us handle clicks outside an element.
