# @tanstack/vue-query

> Hooks for managing, caching and syncing asynchronous and remote data in Vue

Latest version **5.103.2** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tanstack/vue-query
pnpm add @tanstack/vue-query
yarn add @tanstack/vue-query
bun add @tanstack/vue-query
```

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo; extremely popular.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.103.2 |
| Published | 2026-09-21 |
| First published | 2022-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 50348 |
| Author | Damian Osipiuk |
| Maintainers | tannerlinsley, alemtuzlak, kevinvandy |

## Links

- npm: https://www.npmjs.com/package/@tanstack/vue-query
- Repository: https://github.com/TanStack/query
- Homepage: https://tanstack.com/query
- Funding: https://github.com/sponsors/tannerlinsley
- npm.io page: https://npm.io/package/@tanstack/vue-query

## Dependencies (4)

- [vue-demi](https://npm.io/package/vue-demi.md) ^0.14.10
- [@vue/devtools-api](https://npm.io/package/@vue/devtools-api.md) ^6.6.3
- [@tanstack/query-core](https://npm.io/package/@tanstack/query-core.md) 5.103.2
- [@tanstack/match-sorter-utils](https://npm.io/package/@tanstack/match-sorter-utils.md) ^8.19.4

## Recent versions

- 5.103.2 (latest) — 2026-09-21
- 4.44.0 (previous) — 2026-04-01
- 5.0.0-rc.16 (rc) — 2023-10-16
- 5.0.0-beta.35 (beta) — 2023-09-22
- 5.0.0-alpha.91 (alpha) — 2023-07-24
- 5.103.1 — 2026-09-16
- 5.103.0 — 2026-09-16
- 5.102.8 — 2026-08-27
- 5.102.7 — 2026-08-27
- 5.102.6 — 2026-08-26
- 5.102.5 — 2026-08-26
- 5.102.4 — 2026-08-25
- 5.102.3 — 2026-08-24
- 5.102.2 — 2026-08-23
- 5.102.1 — 2026-08-23
- … 466 more at https://npm.io/package/@tanstack/vue-query/versions

## README

<div align="center">
  <picture>
    <source
      media="(prefers-color-scheme: dark)"
      srcset="https://tanstack.com/api/readme/query.png?framework=vue&theme=dark"
    />
    <source
      media="(prefers-color-scheme: light)"
      srcset="https://tanstack.com/api/readme/query.png?framework=vue"
    />
    <img
      src="https://tanstack.com/api/readme/query.png?framework=vue"
      alt="TanStack Vue Query"
      width="900"
    />
  </picture>
</div>
[![Vue Query logo](https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.png)](https://github.com/TanStack/query/tree/main/packages/vue-query)

[![npm version](https://img.shields.io/npm/v/@tanstack/vue-query)](https://www.npmjs.com/package/@tanstack/vue-query)
[![npm license](https://img.shields.io/npm/l/@tanstack/vue-query)](https://github.com/TanStack/query/blob/main/LICENSE)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@tanstack/vue-query)](https://bundlephobia.com/package/@tanstack/vue-query)
[![npm](https://img.shields.io/npm/dm/@tanstack/vue-query)](https://www.npmjs.com/package/@tanstack/vue-query)

# Vue Query

Hooks for fetching, caching and updating asynchronous data in Vue.

Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)

# Documentation

Visit https://tanstack.com/query/latest/docs/vue/overview

# Quick Features

- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
- Parallel + Dependent Queries
- Mutations + Reactive Query Refetching
- Multi-layer Cache + Automatic Garbage Collection
- Paginated + Cursor-based Queries
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
- Request Cancellation
- (experimental) [Suspense](https://v3.vuejs.org/guide/migration/suspense.html#introduction) + Fetch-As-You-Render Query Prefetching
- (experimental) SSR support
- Dedicated Devtools
- [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@tanstack/vue-query)](https://bundlephobia.com/package/@tanstack/vue-query) (depending on features imported)

# Quick Start

1. Install `vue-query`

   ```bash
   $ npm i @tanstack/vue-query
   ```

   or

   ```bash
   $ pnpm add @tanstack/vue-query
   ```

   or

   ```bash
   $ yarn add @tanstack/vue-query
   ```

   or

   ```bash
   $ bun add @tanstack/vue-query
   ```

   > If you are using Vue 2.6, make sure to also setup [@vue/composition-api](https://github.com/vuejs/composition-api)

2. Initialize **Vue Query** via **VueQueryPlugin**

   ```tsx
   import { createApp } from 'vue'
   import { VueQueryPlugin } from '@tanstack/vue-query'

   import App from './App.vue'

   createApp(App).use(VueQueryPlugin).mount('#app')
   ```

3. Use query

   ```tsx
   import { defineComponent } from 'vue'
   import { useQuery } from '@tanstack/vue-query'

   export default defineComponent({
     name: 'MyComponent',
     setup() {
       const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

       return {
         query,
       }
     },
   })
   ```

4. If you need to update options on your query dynamically, make sure to pass them as reactive variables

   ```tsx
   const id = ref(1)
   const enabled = ref(false)

   const query = useQuery({
     queryKey: ['todos', id],
     queryFn: () => getTodos(id),
     enabled,
   })
   ```

---
_Source: https://npm.io/package/@tanstack/vue-query · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._