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 pagination, star rating input, grid layout, and date picker
vue-pagination-2
vue-pagination-2 is a pagination component that we can use to add those links.
To use it, we install it by running:
npm i vue-pagination-2
Then we can use it by writing:
<template>
<div>
<pagination v-model="page" :records="300" @paginate="myCallback"></pagination>
</div>
</template>
<script>
import Pagination from "vue-pagination-2";
export default {
components: {
Pagination
},
data() {
return {
page: 2
};
},
methods: {
myCallback(e) {
console.log(e);
}
}
};
</script>
We add the pagination component and bind the link with the page state with the pagination .
records is the number of records.
We can listen to the paginate event to get the page number.
vue-grid-layout
We can use the vue-grid-layout to create a flexible grid layout.
First, we install it by running:
npm i vue-grid-layout
Then we can write:
<template>
<div>
<grid-layout
:layout.sync="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item
v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
>{{item.i}}</grid-item>
</grid-layout>
</div>
</template>
<script>
import VueGridLayout from "vue-grid-layout";
const layout = [
{ x: 0, y: 0, w: 2, h: 2, i: "0" },
{ x: 2, y: 0, w: 2, h: 4, i: "1" },
{ x: 4, y: 0, w: 2, h: 5, i: "2" }
];
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
data() {
return {
layout
};
}
};
</script>
to use it.
We set the layout of the grid.
x is the horizontal position of the item, y is the vertical position of the item.
i is the unique identifier of the item.
w is the width.
h is the height.
is-draggable makes the items draggable.
is-resizable makes the items resizable.
margin adds the horizontal and vertical margins.
vue-datetime
vue-datetime is a date-time picker component for Vue apps.
To install it, we run:
npm i vue-datetime luxon
Luxon is a dependency used for date formatting.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { Datetime } from "vue-datetime";
import "vue-datetime/dist/vue-datetime.css";
Vue.component("datetime", Datetime);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<datetime v-model="date"></datetime>
<p>{{date}}</p>
</div>
</template>
<script>
export default {
data() {
return {
date: undefined
};
}
};
</script>
We register the component and use v-model to bind the select date to date .
Also, we have to remember to include the bundled CSS.
vue-js-toggle-button
vue-js-toggle-button is a toggle button component for Vue apps.
To use it, we install it by running:
npm i vue-js-toggle-button
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import ToggleButton from "vue-js-toggle-button";
Vue.use(ToggleButton);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<toggle-button v-model="toggle"/>
<p>{{toggle}}</p>
</div>
</template>
<script>
export default {
data() {
return {
toggle: false
};
}
};
</script>
We use the toggle-button component to add the toggle component.
And it binds the toggle value to toggle with v-model .
We can also change the color or add a label.
To add all that, we write:
<template>
<div>
<toggle-button v-model="toggle" color="green" :sync="true" :labels="true"/>
<p>{{toggle}}</p>
</div>
</template>
<script>
export default {
data() {
return {
toggle: false
};
}
};
</script>
vue-star-rating
We can use the vue-star-rating widget to add a star rating input to our Vue app.
To use it, we install it by running:
npm i vue-star-rating
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import StarRating from "vue-star-rating";
Vue.component("star-rating", StarRating);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<star-rating v-model="rating"></star-rating>
<p>{{rating}}</p>
</div>
</template>
<script>
export default {
data() {
return {
rating: 0
};
}
};
</script>
We use the star-rating component and bind the selected value with v-model .
Conclusion
vue-pagination-2 is a pagination widget.
vue-grid-layout lets us create a flexible grid layout where the items can be dragged and resized.
vue-js-toggle-button is a toggle switch component.
vue-star-rating is a handy star rating input.
