Categories
Top Vue Packages

Top Vue Packages for Pagination, Star Rating, Grid Layout, and Date Picker

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.