Top Vue Packages for Pagination, Star Rating, Grid Layout, and Date Picker
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:27:48

---
title: Top Vue Packages for Pagination, Star Rating, Grid Layout, and Date Picker
published: true
date: 2020-07-27 19:58:06 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-pagination-star-rating-grid-layout-and-date-picker/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-pagination-star-rating-grid-layout-and-date-picker
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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.

The post [Top Vue Packages for Pagination, Star Rating, Grid Layout, and Date Picker](https://thewebdev.info/2020/07/27/top-vue-packages-for-pagination-star-rating-grid-layout-and-date-picker/) appeared first on [The Web Dev](https://thewebdev.info).