Pagination

Examples

Easily add a pagination with the v-pagination component

Showing 15 to 21 of 79 results

<!-- eslint-disable vue/attributes-order -->
<template>
  <v-pagination
    :total-items="totalItems"
    :current-page="currentPage"
    :per-page="perPage"
    @page-changed="updateHandler"
    :go-button="goButton"
    styled="centered"
  />
</template>

<script>
export default {
  data() {
    return {
      totalItems: 79,
      currentPage: 3,
      perPage: 7,
      goButton: false,
    };
  },
  methods: {
    updateHandler($event) {
      this.currentPage = $event;
    },
  },
};
</script>

styled simple

Showing 15 to 21 of 79 results

<!-- eslint-disable vue/attributes-order -->
<!-- eslint-disable vue/v-on-event-hyphenation -->
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
  <v-pagination
    :totalItems="totalItems"
    :currentPage="currentPage"
    :perPage="perPage"
    @pageChanged="updateHandler"
    :goButton="goButton"
    styled="simple"
  />
</template>

<script>
export default {
  data() {
    return {
      totalItems: 79,
      currentPage: 3,
      perPage: 7,
      goButton: false,
    };
  },
  methods: {
    updateHandler($event) {
      this.currentPage = $event;
    },
  },
};
</script>

Custom prev and next buttons

Icon

Showing 15 to 21 of 79 results

<!-- eslint-disable vue/v-on-event-hyphenation -->
<!-- eslint-disable vue/attributes-order -->
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
  <v-pagination
    :totalItems="totalItems"
    :currentPage="currentPage"
    :perPage="perPage"
    @pageChanged="updateHandler"
    :goButton="goButton"
    styled="centered"
  >
    <template #prev>⬅️</template>
    <template #next>➡️</template>
  </v-pagination>
</template>

<script>
export default {
  data() {
    return {
      totalItems: 79,
      currentPage: 3,
      perPage: 7,
      goButton: false,
    };
  },
  methods: {
    updateHandler($event) {
      this.currentPage = $event;
    },
  },
};
</script>

Text

Showing 15 to 21 of 79 results

<!-- eslint-disable vue/v-on-event-hyphenation -->
<!-- eslint-disable vue/attributes-order -->
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
  <v-pagination
    :totalItems="totalItems"
    :currentPage="currentPage"
    :perPage="perPage"
    @pageChanged="updateHandler"
    :goButton="goButton"
    styled="centered"
  >
    <template #prev>Previous</template>
    <template #next>Next</template>
  </v-pagination>
</template>

<script>
export default {
  data() {
    return {
      totalItems: 79,
      currentPage: 3,
      perPage: 7,
      goButton: false,
    };
  },
  methods: {
    updateHandler($event) {
      this.currentPage = $event;
    },
  },
};
</script>

Size

Showing 15 to 21 of 79 results

Showing 15 to 21 of 79 results

Showing 15 to 21 of 79 results

<!-- eslint-disable vue/v-on-event-hyphenation -->
<!-- eslint-disable vue/attributes-order -->
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
  <v-pagination
    :totalItems="totalItems"
    :currentPage="currentPage"
    :perPage="perPage"
    @pageChanged="updateHandler"
    :goButton="goButton"
    styled="centered"
    size="xs"
  />
  <v-pagination
    :totalItems="totalItems"
    :currentPage="currentPage"
    :perPage="perPage"
    @pageChanged="updateHandler"
    :goButton="goButton"
    styled="centered"
  />
  <v-pagination
    :totalItems="totalItems"
    :currentPage="currentPage"
    :perPage="perPage"
    @pageChanged="updateHandler"
    :goButton="goButton"
    styled="centered"
    size="xl"
  />
</template>

<script>
export default {
  data() {
    return {
      totalItems: 79,
      currentPage: 3,
      perPage: 7,
      goButton: false,
    };
  },
  methods: {
    updateHandler($event) {
      this.currentPage = $event;
    },
  },
};
</script>

Label

Showing 15 to 21 of 79 results

<!-- eslint-disable vue/attributes-order -->
<!-- eslint-disable vue/attribute-hyphenation -->
<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <v-pagination
    :totalItems="totalItems"
    :currentPage="currentPage"
    :perPage="perPage"
    @pageChanged="updateHandler"
    :goButton="goButton"
    styled="centered"
    :Label="Label"
  />
</template>

<script>
export default {
  data() {
    return {
      totalItems: 79,
      currentPage: 3,
      perPage: 7,
      goButton: false,
    };
  },
  methods: {
    updateHandler($event) {
      this.currentPage = $event;
    },
  },
};
</script>