vue-composition-paginate v1.0.0

Vue Composition Paginate

Introduction

vue-composition-pagination is a ready to use composition-api composable tool around axios to help you dealing with paginated APIs.

It is fully written in Typescript and supports types out of the box.

Installation

npm

npm install vue-composition-paginate

yarn

yarn add vue-composition-paginate

Usage

Given the following payload:

{
  "data": [
    {
      "name": {
        "title": "Miss",
        "first": "Ninon",
        "last": "Philippe"
      },
      "email": "ninon.philippe@example.com",
      "id": {
        "name": "INSEE",
        "value": "2NNaN81837684 25"
      }
    },
    {
      "name": {
        "title": "Mr",
        "first": "Axel",
        "last": "Skavhaug"
      },
      "email": "axel.skavhaug@example.com",
      "id": {
        "name": "FN",
        "value": "11118811382"
      }
    },
    {
      "name": {
        "title": "Monsieur",
        "first": "Enrico",
        "last": "Aubert"
      },
      "email": "enrico.aubert@example.com",
      "id": {
        "name": "AVS",
        "value": "756.2544.6409.51"
      }
    }
    // ...
  ],
  "pagination": {
    "page": 1,
    "total": 624,
    "resultsPerPage": 25,
    "totalPage": 25
  }
}

import usePaginate from 'vue-composition-paginate';
import myAxiosInstance from '@/utils/axios-instance';

export default defineComponent({
  name: 'ListView',
  setup() {
    const paginate = usePaginate({
      // It can also be the basic instance of axios
      instance: myAxiosInstance,
      url: 'http://api.project.local/documents', // Or '/documents' if your instance has a prefix
      // Extract data from payload
      dataTransformer: (response) => response.data,
      // Extract total of pages from the payload
      totalPageTransformer: (response) => response.pagination.totalPage,
    });

    // Initiate the first call
    paginate.goToPage(1);

    return {
      // See below for details about this object
      ...paginate,
    };
  },
});

If you are using Typescript, you can also indicate through generics the type of the payload:

import myAxiosInstance from '@/utils/axios-instance';

interface User {
  id: {
    name: string;
    value: string;
  };
  name: {
    title: string;
    first: string;
    last: string;
  };
  email: string;
}

interface Payload {
  data: User[];
  pagination: {
    total: number;
    resultsPerPage: number;
    page: number;
    totalPage: number;
  };
}

export default defineComponent({
  name: 'ListView',
  setup() {
    // You will be able to benefit from type inference on properties of the `paginate` object
    // and `usePaginate` options.
    const paginate = usePaginate<User, Payload>({
      instance: myAxiosInstance,
      url: 'http://api.project.local/documents',
      dataTransformer: (response) => response.data,
      totalPageTransformer: (response) => response.pagination.totalPage,
    });

    paginate.goToPage(1);

    return {
      // See below for details about this object
      ...paginate,
    };
  },
});

Options

Return values

The function will return an object that is destructurable containing the following properties: