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,
    };
  },
});

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,
    };
  },
});