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 input masks, modals, manipulating dates, and autocomplete dropdowns.
Vue IMask Plugin
Vue IMask Plugin is a Vue plugin that adds an input mask into our app.
We install it by running:
npm i vue-imask
Then we write:
<template>
<imask-input
v-model="numberModel"
:mask="Number"
radix="."
@accept="onAccept"
placeholder="Enter number"
/>
</template>
<script>
import { IMaskComponent } from "vue-imask";
export default {
data() {
return {
numberModel: "",
onAccept(value) {
console.log(value);
}
};
},
components: {
"imask-input": IMaskComponent
}
};
</script>
to add the input with the mask.
It emits the accept event when the input is valid.
mask sets the format.
In our example, it’s a number.
v-model binds the value to a model state.
placeholder is the placeholder.
radix is the decimal separator.
@trevoreyre/autocomplete-vue is an easy to use autosggest component for Vue apps.
To use it, we run:
npm i @trevoreyre/autocomplete-vue
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Autocomplete from "@trevoreyre/autocomplete-vue";
import "@trevoreyre/autocomplete-vue/dist/style.css";
Vue.use(Autocomplete);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<autocomplete :search="search"></autocomplete>
</div>
</template>
<script>
export default {
data() {
return {
fruits: ["apple", "orange", "grape", "banana"]
};
},
methods: {
search(input) {
if (input.length < 1) {
return [];
}
return this.fruits.filter(f => {
return f.toLowerCase().startsWith(input.toLowerCase());
});
}
}
};
</script>
to use it.
We register the plugin and import the CSS.
Then we add the autocomplete component to add the autocomplete input.
The search prop takes a function that lets us search for an item from an input value.
We pass the search method as the value.
input has the inputted value.
It returns an array of items that match.
The function can also return a promise.
We can also denounce the callback, change the base class, and set the default value.
vue-date-fns
vue-date-fns is a Vue wrapper for the vue-date-fns library.
To use it, we first install it by running:
npm i vue-date-fns
Then we can use it by writing:
<template>
<div id="app">
<div>{{ new Date() | date }}</div>
</div>
</template>
<script>
import { dateFilter } from "vue-date-fns";
export default {
filters: {
date: dateFilter
}
};
</script>
We register the filter and use it.
date formats the date into a date string.
We can also use the $date method to manipulate dates.
It also comes with locale data so we can switch to different locales.
We can also change the date format:
<template>
<div id="app">
<div>{{ new Date() | date('dd MMMM yyyy') }}</div>
</div>
</template>
<script>
import { dateFilter } from "vue-date-fns";
export default {
filters: {
date: dateFilter
}
};
</script>
We just pass in an argument into the filter function.
Vue my dropdown component
Vue my dropdown component is an easy to use dropdown component.
To use it, we run:
npm i vue-my-dropdown
to install it.
Then we write:
<template>
<div id="app">
<dropdown :visible="visible">
<span class="link" @click="visible = !visible">click here</span>
<div slot="dropdown" class="dialog">hello</div>
</dropdown>
</div>
</template>
<script>
import dropdown from "vue-my-dropdown";
export default {
components: { dropdown },
data() {
return {
visible: false
};
}
};
</script>
to use it.
It doesn’t come with any styles so we’ve to add them ourselves.
We populate the content of the dropdown slot to populate the dropdown.
We can set the position, add animation, and more.
Vuedals
Vuedals is a modal component for Vue apps.
To use it, we run:
npm i vuedals
to install it.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import { default as Vuedals } from "vuedals";
Vue.use(Vuedals);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<button @click="showModal()">show modal</button>
<vuedal></vuedal>
</div>
</template>
<script>
import {
default as Vuedals,
Component as Vuedal,
Bus as VuedalsBus
} from "vuedals";
export default {
components: {
Vuedal
},
methods: {
showModal() {
VuedalsBus.$emit("new", {
name: "modal",
component: {
name: "modal",
template: `
<div>
<p>modal</p>
</div>
`
}
});
}
}
};
</script>
to use it.
We call the Vuedals.$emit method to open the modal.
The content is populated by a component.
Conclusion
Vue IMask Plugin is a simple input mask component.
@trevoreyre/autocomplete-vue is an autocomplete component for Vue apps.
vue-date-fns is a wrapper for date-fns for Vue apps.
Vue my dropdown component is a dropdown that we can customize.
Vuedals is a simple modal.
