https://github.com/7span/vue-list

Build listing layouts quickly.
https://github.com/7span/vue-list

Last synced: 5 months ago
JSON representation

Build listing layouts quickly.

• Host: GitHub
• URL: https://github.com/7span/vue-list
• Owner: 7span
• Created: 2019-09-13T06:23:06.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2025-02-10T11:28:13.000Z (about 1 year ago)
• Last Synced: 2025-02-25T13:13:16.372Z (about 1 year ago)
• Language: Vue
• Size: 999 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🗂️ VueList

Simplified API-based list rendering.

Build listing layouts faster by abstracting away the boilerplate of API calls, pagination, and state management.

✅ Headless\

✅ Centralized Request Handling\

✅ Reactive\

✅ State Manager\

✅ Opinionated

Listing pages are everywhere — users, products, orders. And every time, you write the same boilerplate:

`page`, `perPage`, `filters`, `isLoading`, `data`, `error`... again and again.

**VueList eliminates this repetition.**

Write less. List more ✨

## ⚙️ Configuring the Plugin

```js

app.use(VueList, {

  requestHandler(context) {

    const {

      endpoint,

      page,

      perPage,

      sortBy,

      sortOrder,

      version,

      filters,

      search,

      meta,

      isRefresh,

    } = context;

    // Make the API as per your requirements

    // This should return a Promise

    return axios

      .get(`${import.meta.baseUrl}/api/${endpoint}`, {

        params: {

          page,

          limit: perPage,

          search: search,

          // ...

        },

      })

      .then(({ data }) => {

        // Process the response data and return it in a defined format

        return {

          items: data, // This should be the array of data items

          count: count, // This should be the total count of data items available

        };

      });

  },

});

```

## 🧩 Using in Components

```vue

  

    

      

      

      

      

        

        
{{ items }}

      

      

      

    

  


```

## 🤔 Interesting?

Check out the [documentation](https://7span.com/open-source/vue-list/) for more information.