Skip to main content

​
VueList

Simplified API-based list rendering for Vue 3. Build listing layouts faster by abstracting away the boilerplate of API calls, pagination, and state management.

Headless Components

Fully customizable UI with complete control over styling and markup. Use the default slots or build your own.

Centralized Request Handling

Configure your API logic once in the plugin. All list components use the same request handler.

Reactive State Management

Automatic state synchronization across pagination, search, filters, and sorting. No manual state management needed.

URL Sync & Persistence

Built-in URL query parameter sync for pagination and localStorage persistence to restore user’s list state.

​
The Problem

Listing pages are everywhere in web applications — users, products, orders, tasks. And every time you build one, you write the same boilerplate:
  • page, perPage state variables
  • filters, search, sortBy logic
  • isLoading, data, error handling
  • API calls with complex parameter management
  • URL synchronization for pagination
  • State persistence across page navigation
VueList eliminates this repetition.

​
The Solution

With VueList, you configure your API logic once and use declarative components to build any list: 
<VueList endpoint="users" :per-page="10" pagination-mode="pagination">
  <VueListSearch />
  <VueListInitialLoader />
  <VueListItems #default="{items}">
    <UserCard v-for="user in items" :key="user.id" :user="user" />
  </VueListItems>
  <VueListPagination />
</VueList>
No state variables. No API calls. No boilerplate. Just components.

​
Next Steps

Why VueList?

Learn more about the problems VueList solves

Installation

Install VueList in your Vue 3 project

Quick Start

Build your first list in 5 minutes

Components

Explore all available components

​
Need inspiration?

See complete examples

Browse our showcase of exceptional documentation sites.

Build docs developers (and LLMs) love

Get started for freeTalk to us