Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue tiny pagination

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A Vue component for create a tiny pagination. This lets you add a pagination to your vue app. This pagination can be used for paginate tables, data lists, etc.

The component is named vue-tiny-pagination

This lets you create a pagination menu that you may know from web search:

Install/Usage

$ npm i -S vue-tiny-pagination
<div id="#app">
<tiny-pagination
:total="currentTotal"
@tiny:change-page="changePage"></tiny-pagination>
</div>

You can import the component and define this in specific section:

import {TinyPagination} from 'vue-tiny-pagination'

new Vue({
el: '#app',
data() {
return {
currentTotal: 100,
currentPage: 1
}
},
methods: {
changePage (pagination) {
this.currentPage = pagination.page
}
},
components: {
TinyPagination
}
});

or define the component on Global application
import TinyPagination from 'vue-tiny-pagination'
Vue.use(TinyPagination)

For use in browser can you use Unpkg:

https://unpkg.com/[email protected]/dist/vue-tiny-pagination.min.js

Development

 
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

What’s Included

  • npm run dev: Webpack + vue-loader with proper config for source maps & hot-reload.
  • npm run build: build with HTML/CSS/JS minification.

Github: http://github.com/coderdiaz/vue-tiny-pagination#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy