@tanstack/vue-query

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.

@tanstack/vue-query

Vue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.

npm GitHub Docs

Fit

Bundle (gzip)

13.8 kB

47.8 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Fetching data in Vue with fetch or axios means manually managing loading/error state, cache invalidation, background updates, and retry logic in every component — leading to duplicate code and inconsistent UX.

What It Does

TanStack Query for Vue provides useQuery and useMutation composables that handle the entire async lifecycle. Results are cached and shared across components, stale data is refetched in the background, and failed requests retry automatically. The devtools show cache state in real time.

Installation

bash

npm install @tanstack/vue-query

Usage Example

vue

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query';

const { data, isPending, isError } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then((r) => r.json()),
  staleTime: 5 * 60 * 1000, // cache for 5 minutes
});
</script>

<template>
  <div v-if="isPending">Loading...</div>
  <div v-else-if="isError">Error fetching users</div>
  <ul v-else>
    <li v-for="user in data" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

floating-vueVue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

naive-uiVue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

unplugin-vue-componentsVue

On-demand auto-import for Vue components — eliminate all manual component imports and registrations in your Vue 3 project.