Get started with vuejs-paginate CDN

MIT licensed

VueJS Paginate is a Vue.js plugin for adding pagination functionality to data tables.

Tags:
  • vue
  • paginate
  • pagination

Stable version

Copied!

How to start using vuejs-paginate CDN


<template>
  <div>
    <v-paginate
      v-model="currentPage"
      :pages="totalPages"
      :page-range="3"
      @paginate="fetchData"
    ></v-paginate>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VuePaginate from 'vuejs-paginate';

Vue.use(VuePaginate);

export default Vue.extend({
  data() {
    return {
      currentPage: 1,
      totalPages: 0,
      items: [],
    };
  },
  async created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await axios.get('https://api.example.com/items', {
        params: {
          page: this.currentPage,
        },
      });

      this.items = response.data.data;
      this.totalPages = response.data.meta.pagination.total;
    },
  },
});
</script>
Copied!

All versions