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 how the best packages for adding tables, input mask, and scrolling to an element.
vue-data-tables
The vue-data-tables package lets us add tables easily to our Vue app.
To install it, we run:
npm i vue-data-tables element-ui
Element UI is a dependency of vue-data-tables.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueDataTables from "vue-data-tables";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import lang from "element-ui/lib/locale/lang/en";
import locale from "element-ui/lib/locale";
locale.use(lang);
Vue.use(ElementUI);
Vue.use(VueDataTables);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We imported the Element UI and vue-data-table plugins and registered them.
Also, we set the locale for the app.
The Element UI CSS is also imported.
App.vue
<template>
<div>
<data-tables :data="data" :pagination-props="{ pageSizes: [2, 5, 10, 15] }">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column
v-for="title in titles"
:prop="title.prop"
:label="title.label"
:key="title.prop"
sortable="custom"
></el-table-column>
</data-tables>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, firstName: "james", lastName: "smith" },
{ id: 2, firstName: "jane", lastName: "smith" },
{ id: 3, firstName: "alex", lastName: "green" }
],
titles: [
{
prop: "firstName",
label: "first"
},
{
prop: "lastName",
label: "last"
}
]
};
}
};
</script>
We set the data prop to set the data.
The title array has the prop and label properties to set the columns to display with the prop property.
label has the table headings.
By default we can sort the headers.
Pagination is also part of the basic table. We set the pagination-props prop to set the page sizes.
pageSizes property has the page sizes.
We also added a column with type set to selection to let us select the rows.
It also comes with many other customization options.
v-mask
v-mask lets us add input masks to our app.
We can install it by running:
npm i v-mask
To use it, we register the plugin and then use the input element with the v-mask directive:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueMask from "v-mask";
Vue.use(VueMask);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<input type="text" v-mask="'###-###-####'" v-model="phone">
<p>{{phone}}</p>
</div>
</template>
<script>
export default {
data() {
return {
phone: ""
};
}
};
</script>
We have the v-mask directive set to the mask, which restricts the format of the input.
v-model binds to the phone state.
# means a digit, so we can only enter digits.
We can also use it as a filter, so we can write:
<template>
<div>
<span>{{ '1234567890' | VMask('(###) ###-####') }}</span>
</div>
</template>
<script>
export default {};
</script>
Then we get (123) 456–7890 displayed on the screen.
Other mask placeholders include A for letter, N for number or letter, X for any symbol, and ? for an optional character.
We can also customize the placeholders.
vue-scrollto
vue-scrollto is an easy to use directive for letting us add the scroll to element feature in our app.
To install it, we can run:
npm i vue-scrollto
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
const VueScrollTo = require("vue-scrollto");
Vue.use(VueScrollTo);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<a href="#" v-scroll-to="'#num-80'">Scroll to 80</a>
<div :id="`num-${n}`" v-for="n in 100" :key="n">{{n}}</div>
</div>
</template>
<script>
export default {};
</script>
We have the element with the v-scroll-to directive set to the selector of the element we want to scroll to when it’s clicked.
Then we have the elements with the IDs we generated from v-for .
When we click the anchor, it’ll scroll to the element with ID num-80 .
It emits events that we can listen to and has options to change the animation.
Conclusion
We can use the vue-scrollto package to let us scroll to an element.
vue-data-tables let’s us add tables with pagination, sorting, and selection easily.
v-mask lets us add an input mask to our app.
