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 handling events, adding utility methods, progress bars, and truncating text.
vue-events
vue-events is a simple event to send and receive events.
To install it, we run:
npm i vue-events
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueEvents from "vue-events";
Vue.use(VueEvents);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
name: "app",
data() {
return {
eventData: { foo: "bar" }
};
},
created() {
this.$events.fire("event", this.eventData);
this.$events.emit("event", this.eventData);
this.$events.$emit("event", this.eventData);
},
mounted() {
this.$events.on("event", eventData => console.log(eventData));
},
beforeDestroy() {
this.$events.$off("event");
this.$events.off("event");
this.$events.remove("event");
}
};
</script>
We register the VueEvents plugin.
Then we send events with fire , emit , or $emit with some data in the 2nd argument.
We listen to events with on .
And we clear event listeners with $off , off , or remove .
vue-underscore
We can use vue-underscore to add underscore to a Vue app.
To use it, we run:
npm i vue-underscore
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import underscore from "vue-underscore";
Vue.use(underscore);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
mounted() {
const arr = [{ id: 1 }, { id: 2 }];
const found = this.$_.findWhere(arr, { id: 1 });
console.log(found);
}
};
</script>
Once we registered the plugin, we can use the this.$_ property to access its methods.
We can also access the library directly:
<template>
<div></div>
</template>
<script>
import { _ } from "vue-underscore";
export default {
mounted() {
const arr = [{ id: 1 }, { id: 2 }];
const found = _.findWhere(arr, { id: 1 });
console.log(found);
}
};
</script>
Vue Masked Input
Vue Masked Input is a masked input component for Vue apps.
To install it, we run:
npm i vue-masked-input
Then we can use it by writing:
<template>
<div>
<masked-input v-model="date" mask="11/11/1111" placeholder="dd/mm/yyyy"/>
</div>
</template>
<script>
import MaskedInput from "vue-masked-input";
export default {
data() {
return {
date: ""
};
},
components: {
MaskedInput
}
};
</script>
We register the masked-input component and used it.
It can bind the input value to a state with v-model .
Also, the input format is restricted by the mask prop.
It has to be the same format.
The mask can have alphabets or other characters in addition to numbers.
vue-top-progress
vue-top-progress is a progress bar component for Vue apps.
To install it, we run:
npm i vue-top-progress
Then we write:
<template>
<div>
<vue-topprogress ref="topProgress"></vue-topprogress>
</div>
</template>
<script>
import { vueTopprogress } from "vue-top-progress";
export default {
mounted() {
this.$refs.topProgress.start();
setTimeout(() => {
this.$refs.topProgress.done();
}, 2000);
},
components: {
vueTopprogress
}
};
</script>
to use it.
We add the vue-topprogress component.
The ref is set to topProgress so we can call start to display the progress bar.
We call done to make it disappear.
Color and speed can be changed.
Vue Line Clamp
Vue Line Clamp is a directive that lets us truncate text.
To install it, we run:
npm i vue-line-clamp
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import lineClamp from "vue-line-clamp";
Vue.use(lineClamp, {});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<p
v-line-clamp:20="2"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet tortor vulputate, faucibus nulla eu, fringilla ligula. Nunc et aliquet justo. Nulla sit amet risus eu metus volutpat tincidunt. Pellentesque vehicula, erat eu dignissim maximus, diam leo egestas massa, non tincidunt arcu quam placerat eros. Nullam at nunc id ante cursus dignissim non ac libero. Praesent posuere, velit ut varius feugiat, arcu enim sollicitudin odio, eu sagittis dolor massa eget urna. Pellentesque in faucibus arcu, non dignissim arcu. Integer porta sodales tortor sed cursus. Suspendisse at finibus urna. Sed id venenatis ex. Nunc quis dictum velit, a hendrerit enim. Phasellus interdum, tellus quis congue fringilla, tortor sem maximus ante, vel tempus lorem risus nec est. Proin ullamcorper non felis sed gravida. In feugiat laoreet tellus, eget dictum lectus laoreet in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum in blandit metus.</p>
</div>
</template>
<script>
export default {};
</script>
We registered the lineClamp plugin.
Then we used the v-line-clamp directive to truncate the text.
Conclusion
vue-events lets us emit and listen to custom events.
vue-underscore lets us incorporate underscore into our app.
vue-top-progress lets us display a progress bar.
Vue Line Clamp lets us truncate text.
