vue-plain-pagination

demo of usage Vue component

by Marcin Dobroszek

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://unpkg.com/vue-plain-pagination@0.2.1/dist/vue-plain-pagination.umd.min.js"></script>
<div id="app" class="container my-4">
    <h1 class="mb-4">vue-plain-pagination</h1>
    <p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
    
    <nav class="mb-4">
      <v-pagination
        v-model="currentPage"
        :page-count="totalPageCount"
        :classes="bootstrapPaginationClasses"
        :labels="customLabels"
      ></v-pagination>
    </nav>
    
    <nav class="mb-4">
      <v-pagination
        v-model="currentPage"
        :page-count="totalPageCount"
        :classes="bootstrapPaginationClasses"
      ></v-pagination>
    </nav>
    
        <nav class="mb-4">
      <v-pagination
        v-model="currentPage"
        :page-count="totalPageCount"
        :classes="bootstrapPaginationClasses"
        :labels="{first: false, prev: false, next: false, last: false}"
      ></v-pagination>
    </nav>
    
    <hr>
    
    <p class="text-muted small">
      View on
      <a href="//github.com/cichy380/vue-plain-pagination" class="text-muted" target="_blank">GitHub</a>
    </p>
</div>

Babel + JSX

new Vue({
	components: {
  	vPagination: window['vue-plain-pagination']
	},
	data: {
  	currentPage: 5,
    totalPageCount: 9,
    bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
      ul: 'pagination',
      li: 'page-item',
      liActive: 'active',
      liDisable: 'disabled',
      button: 'page-link'
    },
    customLabels: {
      first: false,
      prev: 'Previous',
      next: 'Next',
      last: false
    }
	}
}).$mount('#app')