Vue.js Project to Render Pagination Using jw-vue-pagination Library in Browser Using Javascript

Welcome folks today in this blog post we will be using the jw-vue-pagination library in vue.js to do the pagination of items in browser using Vue.js. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below library using the below command as shown below

npm i jw-vue-pagination

And now you will see the below directory structure of the vue.js app as shown below

Registering the Library

Now guys we need to go to index.js file and copy paste the following code

index.js

import Vue from "vue";

import App from "./app/App";

// make jw pagination component available in application
import JwPagination from 'jw-vue-pagination';
Vue.component('jw-pagination', JwPagination);

new Vue({
    el: "#app",
    render: h => h(App)
});

import Vue from "vue";

import App from "./app/App";

// make jw pagination component available in application

import JwPagination from 'jw-vue-pagination';

Vue.component('jw-pagination', JwPagination);

new Vue({

el: "#app",

render: h => h(App)

});

As you can see we are importing the jw-pagination library and registering it.

And now you need to go to index.html and copy paste the following code and include the bootstrap cdn as shown below

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js - Pagination Tutorial & Example</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        a { cursor: pointer; }
        .pagination {
           justify-content: center;
           flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Vue.js - Pagination Tutorial & Example</title>

<style>

a { cursor: pointer; }

.pagination {

justify-content: center;

flex-wrap: wrap;

}

</style>

</head>

<body>

</body>

</html>

And now inside the app folder we need to make the App.vue file and copy paste the following code

App.vue

<template>
    <div class="card text-center m-3">
        <h3 class="card-header">Vue.js Pagination Tutorial & Example</h3>
        <div class="card-body">
            <div v-for="item in pageOfItems" :key="item.id">{{item.name}}</div>
        </div>
        <div class="card-footer pb-0 pt-3">
            <jw-pagination :items="exampleItems" @changePage="onChangePage"></jw-pagination>
        </div>
    </div>
</template>

<script>
// an example array of items to be paged
const exampleItems = [...Array(150).keys()].map(i => ({ id: (i+1), name: 'Item ' + (i+1) }));

export default {
    data() {
        return {
           exampleItems,
            pageOfItems: []
        };
    },
    methods: {
        onChangePage(pageOfItems) {
            // update page of items
            this.pageOfItems = pageOfItems;
        }
    }
};
</script>

<h3 class="card-header">Vue.js Pagination Tutorial & Example</h3>

</div>

<jw-pagination :items="exampleItems" @changePage="onChangePage"></jw-pagination>

</div>

</template>

// an example array of items to be paged

const exampleItems = [...Array(150).keys()].map(i => ({ id: (i+1), name: 'Item ' + (i+1) }));

export default {

data() {

return {

exampleItems,

pageOfItems: []

};

methods: {

onChangePage(pageOfItems) {

// update page of items

this.pageOfItems = pageOfItems;

}

};

</script>