Vue.js – Simple Pagination Example

This is a simple example of how to implement Vue.js – Simple Pagination in Vue.js.

Running the Vue.js Pagination Example Locally

1. Install NodeJS and NPM from https://nodejs.org.
2. Download or clone the tutorial project source code from https://github.com/Appfinz/vue-js-pagination-with-easy-steps.git
3. Install all required npm packages by running the npm install command in the project root folder (where the package.json is located).
4. Start the Vue.js app by running npm start in the project root folder, this will build the app with webpack and automatically launch it in a browser on the URL http://localhost:8080.

Vue.js Pagination Component

Pagination is implemented with the <jw-pagination> component that comes with the jw-vue-pagination package available on npm.

Installation

Install the Vue pagination component with the command npm install jw-vue-pagination.

Integration with your Vue.js app

Import the JwPagination component from the 'jw-vue-pagination' package and register it globally within your Vue application by calling Vue.component('jw-pagination', JwPagination);

The first parameter is the component name, it defines the custom tag used to add the component to other components, in this case it will be with the tag <jw-pagination></jw-pagination>. The second parameter points to the actual Vue component.

Global registration makes the Vue component available to all other components within the Vue application, it’s also possible to register components locally, for more info see https://vuejs.org/v2/guide/components-registration.html.

This is the main Vue entry file (/src/index.js) from the example, the pagination component is imported and registered globally on lines 6-7.


import Vue from "vue";

import App from "./app/App";

// register jw pagination component globally
import JwPagination from 'jw-vue-pagination';
Vue.component('jw-pagination', JwPagination);

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

 

 

Read More about About vuejs pagination || vue pagination || vuejsapp pagination || pagination in vue js