How to implement polling with VueRequest in Vue 3?

Use the pollingInterval option in the useRequest hook. For example, set pollingInterval: 1000 to refetch data every second, as shown in the documentation for real-time updates and demonstrated in the GIF example.

VueRequest vs Axios: which should I use for my Vue app?

Axios is an HTTP client for making requests, while VueRequest manages the state of those requests. Use Axios to send API calls, and VueRequest to handle loading, error, caching, and reactive states in your Vue components, combining them for a full solution.

Does VueRequest work with Vuex or Pinia?

Yes, VueRequest can be integrated with Vuex or Pinia. It focuses on API state management, so you can use it alongside global state managers for handling asynchronous data, but you'll need to manage the integration manually as it's not built-in.

How to handle pagination with VueRequest?

VueRequest provides dedicated pagination extensions. Use hooks like usePagination to manage page states, load more, and infinite scrolling, with details available in the pagination section of the official documentation.

Is VueRequest similar to SWR in React?

Yes, VueRequest is inspired by SWR and brings similar features like stale-while-revalidate and caching to Vue.js. It's tailored for Vue's reactivity system, offering a comparable experience but within the Vue ecosystem.

Can I use VueRequest with server-side rendering in Nuxt.js?

VueRequest is client-side focused, so for SSR with Nuxt.js, you might need to adapt it or use Nuxt's built-in asyncData or fetch methods. The README doesn't specify SSR support, which could lead to hydration issues if not handled carefully.

What's the learning curve for VueRequest's advanced features?

While basic usage is straightforward, advanced features like SWR configuration, error retry logic, and cache management require understanding specific options and Vue's reactivity, which might take time for developers new to such patterns.

Open-Awesome

vue-request

MITTypeScriptv2.0.4

A Vue.js library for managing request states with SWR, polling, error retry, caching, and pagination.

Visit Website GitHub

1.4k stars96 forks0 contributors

What is vue-request?

VueRequest is a Vue.js library that simplifies API state management by providing hooks and utilities for handling common data-fetching patterns. It solves the problem of repetitive implementation of loading states, caching, error retries, and pagination in Vue applications, offering a unified and reactive approach to managing asynchronous data.

Target Audience

Vue.js developers building applications that require efficient data fetching, real-time updates, and complex state management for API interactions.

Value Proposition

Developers choose VueRequest for its comprehensive feature set out-of-the-box, seamless integration with Vue 2 and 3, and strong TypeScript support, reducing boilerplate and ensuring consistent data handling across projects.

Overview

⚡️ This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc. ⚡️ 这是一个能够轻松帮助你管理请求状态的库，支持 SWR、轮询、错误重试、缓存、分页等常用功能。

Use Cases

Best For

Building Vue applications with real-time data synchronization across tabs
Implementing SWR (Stale-While-Revalidate) patterns in Vue projects
Managing paginated data or infinite scrolling in Vue components
Reducing boilerplate for loading, error, and caching states in API calls
Handling polling requests for dashboards or live updates
Ensuring consistent data fetching logic across team projects

Not Ideal For

Projects using server-side rendering frameworks like Nuxt.js where data fetching is primarily handled on the server, as VueRequest is client-focused and might not integrate seamlessly with SSR lifecycle hooks.
Applications heavily reliant on GraphQL with tools like Apollo Client, which have built-in caching and state management optimized for GraphQL queries and mutations.
Simple Vue apps with only a few basic API calls, where the overhead of configuring and learning a full-featured library isn't justified compared to using native fetch or axios directly.
Teams migrating from React who are already using SWR or TanStack Query, as switching might not offer significant new features and could introduce unnecessary complexity.

Pros & Cons

Pros

Comprehensive Feature Set

Includes SWR, polling, error retry, caching, and pagination out-of-the-box, reducing boilerplate for common data-fetching patterns, as highlighted in the Key Features section.

Vue 2 & 3 Compatibility

Seamlessly works with both major Vue versions, easing migration and adoption, as stated under the Features list with the Vue 2 & 3 compatibility note.

Strong TypeScript Support

Fully written in TypeScript with strong type hints, improving developer experience and code safety, as emphasized in the TypeScript Support feature.

Real-time Synchronization

Features like focus revalidation and polling ensure data consistency across tabs and devices, demonstrated in the cool features section with gifs and code examples.

Lightweight and Performant

Small bundle size and built-in caching optimize performance, with the README showing a minimal size badge and caching features to avoid redundant network calls.

Cons

Vue Ecosystem Lock-in

Exclusively designed for Vue.js, so it's not suitable for projects using other frameworks like React or Angular, limiting its versatility in cross-framework teams.

Complex Configuration Overhead

The extensive options for features like SWR, polling, and caching require careful setup, which can be overwhelming for simple use cases and might lead to misconfiguration.

Limited Community and Ecosystem

Compared to established alternatives like SWR for React, VueRequest has a smaller community, which might affect the availability of third-party integrations, plugins, and support resources.

Server-side Rendering Limitations

Primarily focused on client-side data fetching, so it may not handle server-side execution natively, requiring additional work for frameworks like Nuxt.js with SSR, as not explicitly addressed in the README.

Frequently Asked Questions

Related Projects

tanstack-query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

Stale-while-revalidate data fetching for Vue

Stars2,280

Forks77

Last commit5 days ago

vue-api-query

💎 Elegant and simple way to build requests for REST API

Stars1,667

Forks128

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub