How to display paginated non-tabulated data with vue.js (NUXT) and Buefy

vuejs-paginated-data.md

how to make a pagination system for non tabulated data with nuxt (or Vue.js) and buefy

Here we gonna see how to make a basic pagination for data that we dont want to display in a table i decided to go for the computed property way and since i'm a lazy ass i dediced to pick up Buefy, a nice css component library that i already used before to handle the pagination logic for me.

Download & install buefy for nuxt

npm install nuxt-buefy --save

in the nuxt.config.js file, add the module dependency

modules.exports = {
	 modules: [
         'nuxt-buefy'
	],
}

Download & install for vue.js

npm install buefy --save

in your App root

import Buefy from 'buefy'
import 'buefy/lib/buefy.css'

Vue.use(Buefy)

your component

<template>
	<section>
		<b-pagination
	        :total="pagination.total"
	        :current.sync="pagination.current"
	        :simple="pagination.isSimple"
	        :per-page="pagination.perPage">
	    </b-pagination>
	    <!-- the v-for stuff with columns is to make a 4 items per line dynamic grid, it uses bulma css columns (integrated with buefy) -->
	  	<div class="columns" v-for="i in Math.ceil(paginate.length / 4)" :key="i">
			<div class="column" v-for="mydataObj in paginate.slice((i - 1) * 4, i * 4)" :key="mydataObj.id">
				{{ mydataObj.created_at }}
				{{ mydataObj.name }}
				{{ mydataObj.value }}
			</div>
		</div>
	</section>
</template>

<script>
	export default {
		data () {
			myDataCollection: [],
			pagination: {
	          total: 0,
	          current: 1,
	          perPage: 20,
	          isSimple: false
	        }
		},
	    mounted () {
	    	axios.get('/some/url')
	    	.then(response => {
	    		this.myDataCollection = response.data
	    		this.pagination.total = this.myDataCollection.length
	    	})
	    },
	    computed: {
	    	paginate () {
	    		if(this.pagination.current === 1) {
			        return this.myDataCollection.slice(0, this.pagination.perPage)
			      }
			      let start = (this.pagination.current - 1) * this.pagination.perPage
			      let end = this.pagination.current * this.pagination.perPage
			      return this.myDataCollection.slice(start, end)
	    	}
	    }
	}
</script>