Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

vue-use-pagination

JavaScript Style Guide

Note: This library only works with Vue 3. For Vue 2, take a look at vuex-pagination.

This library takes the ideas behind vuex-pagination and applies them to Vue 3. The result is a much more lightweight library that is very flexible to use.

Installation

// Using npm:
npm install vue-use-pagination

// Or using Yarn:
yarn add vue-use-pagination

Usage

There are basically two different ways how this library can be used and depending on where you want your logic to reside, you can choose one over another (or combine them).

The traditional way separates the instances (where you display the data) and the resources (the logic that fetches the data).

import { createResource } from 'vue-use-pagination'

createResource('users', async (opts) => {
  const result = await window.fetch(`/api/users?page=${opts.page}&pageSize=${opts.pageSize}`)
  const data = await result.json()

  return {
    total: data.total,
    items: data.data
  }
})

And in your component it can be used like that:

import { usePagination } from 'vue-use-pagination'

export default {
  setup () {
    const users = usePagination('users', { page: 1, pageSize: 10 })

    return { users }
  }
}

Alternatively you can just drop the createResource call and instead just pass the fetcher function to usePagination:

const users = usePagination(async (opts) => {
  const result = await window.fetch(`/api/users?page=${opts.page}&pageSize=${opts.pageSize}`)
  const data = await result.json()

  return {
    total: data.total,
    items: data.data
  }
}, { page: 1, pageSize: 10 })

This allows you to create your own composition functions:

useUsers ({ page = 1, pageSize = 10 }) {
  const fetch = async (opts) => {
    const result = await window.fetch(`/api/users?page=${opts.page}&pageSize=${opts.pageSize}`)
    const data = await result.json()

    return {
      total: data.total,
      items: data.data
    }
  }

  return usePagination(fetch, { page, pageSize })
}

Passing arguments

Often you'll have to pass different kinds of arguments or parameters to a resource. Think filters, query parameters or different headers, just to name a few.

This can be done with the args parameter inside usePagination:

import { reactive } from 'vue'
import { usePagination } from 'vue-use-pagination'

export default {
  setup () {
    const category = ref('all')

    const users = usePagination('users', {
      page: 1,
      pageSize: 10,
      args: reactive({
        category
      })
    })

    return { users }
  }
}

Note that args must be a reactive object, so changes to it can be tracked.

About

Pagination library for Vue 3

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.