3.0.9 • Published 6 months ago

@vuesimple/vs-pagination v3.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

Vue Simple Pagination

🗃 A simple vue pagination.

A light weight vue plugin built with accessibility in mind.

npm npm

forthebadge forthebadge forthebadge forthebadge forthebadge forthebadge

📺 Live Demo

Code Sandbox: Link

🛠 Install

npm i @vuesimple/vs-pagination

🚀 Usage

<template>
  <vs-pagination :total-pages="20" @change="changePage"></vs-pagination>
</template>

<script>
  import VsPagination from '@vuesimple/vs-pagination';

  export default {
    components: {
      VsPagination,
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-pagination@<version>/dist/vs-pagination.min.js"></script>
// Main/Entry file
app.use(VsPagination.plugin);
<template>
  <vs-pagination :total-pages="20" @change="changePage"></vs-pagination>
</template>

Nuxt Code Snippet

After installation,

  • Create a file /plugins/vs-pagination.js

    import Vue from 'vue';
    import VsPagination from '@vuesimple/vs-pagination';
    
    Vue.component('vs-pagination', VsPagination);
  • Update nuxt.config.js

    module.exports = {
      ...
      plugins: [
        { src: '~plugins/vs-pagination', mode: 'client' }
        ...
      ]
    }
  • In the page/ component

    <template>
      <vs-pagination :total-pages="20" @change="changePage"></vs-pagination>
    </template>

Note

  • For older Nuxt versions, use <no-ssr>...</no-ssr> tag if you are facing ssr issues.
  • You can also do import VsPagination from '@vuesimple/vs-pagination' & add in component:{VsPagination} and use it within component, without globally installing in plugin folder.

⚙ Props

NameTypeDefaultDescription
total-pagesNumber-Total count of pages. required
current-pageNumber1Sets the current page.
page-paddingNumber1Sets the number of pages that appear before and after active page between gap indicator.
page-gapNumber2Positions the leading and trailing gap indicator, based on the current and total pages.
hide-prev-nextBooleanfalseHide prev and next button on reaching first or last page.

🔥 Events

NameDescription
changeOn page change (return page value)

📎 Slots

You can define own arrow icon markup via slots:

NameDescription
leftIconLeft Icon slot
rightIconRight Icon slot
3.0.8

6 months ago

3.0.9

6 months ago

3.0.7

1 year ago

3.0.6

1 year ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.5

2 years ago

3.0.0

2 years ago

1.4.15

2 years ago

1.4.14

2 years ago

1.4.18

2 years ago

1.4.13

3 years ago

1.4.12

3 years ago

1.4.9

3 years ago

1.4.11

3 years ago

1.4.8

3 years ago

1.4.10

3 years ago

1.4.6

3 years ago

1.4.5

3 years ago

1.4.4

3 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

4 years ago

1.3.41

4 years ago

1.3.40

4 years ago

1.3.39

4 years ago

1.3.36

4 years ago

1.3.37

4 years ago

1.3.38

4 years ago

1.3.35

4 years ago

1.3.31

4 years ago

1.3.32

4 years ago

1.3.30

4 years ago

1.3.33

4 years ago

1.3.34

4 years ago

1.3.28

4 years ago

1.3.29

4 years ago

1.3.27

4 years ago

1.3.26

4 years ago

1.3.25

4 years ago

1.3.24

4 years ago

1.3.23

4 years ago

1.3.21

4 years ago

1.3.20

4 years ago

1.3.19

4 years ago

1.3.16

4 years ago