Source: https://tanstack.com/query/v5/docs/framework/vue/installation

TanStack

Query v5v5

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Vue

Version

v5

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  vue

• Installation
  
  vue

• Quick Start
  
  vue

• Devtools
  
  vue

• TypeScript
  
  vue

• Reactivity
  
  vue

• GraphQL
  
  vue

Guides & Concepts

• Important Defaults
  
  vue

• Queries
  
  vue

• Query Keys
  
  vue

• Query Functions
  
  vue

• Query Options
  
  vue

• Network Mode
  
  vue

• Parallel Queries
  
  vue

• Dependent Queries
  
  vue

• Background Fetching Indicators
  
  vue

• Window Focus Refetching
  
  vue

• Disabling/Pausing Queries
  
  vue

• Query Retries
  
  vue

• Paginated Queries
  
  vue

• Infinite Queries
  
  vue

• Initial Query Data
  
  vue

• Placeholder Query Data
  
  vue

• Mutations
  
  vue

• Query Invalidation
  
  vue

• Invalidation from Mutations
  
  vue

• Updates from Mutation Responses
  
  vue

• Optimistic Updates
  
  vue

• Query Cancellation
  
  vue

• Scroll Restoration
  
  vue

• Filters
  
  vue

• Prefetching
  
  vue

• SSR & Nuxt
  
  vue

• Caching
  
  vue

• Default Query Fn
  
  vue

• Suspense
  
  vue

• Testing
  
  vue

• Custom Client
  
  vue

• Does this replace [Vuex, Pinia]?
  
  vue

• Migrating to v5
  
  vue

API Reference

• QueryClient
  
  core

• QueryCache
  
  core

• MutationCache
  
  core

• QueryObserver
  
  core

• InfiniteQueryObserver
  
  core

• QueriesObserver
  
  core

• streamedQuery
  
  core

• focusManager
  
  core

• onlineManager
  
  core

• notifyManager
  
  core

• timeoutManager
  
  core

• useQuery
  
  vue

• useQueries
  
  vue

• useInfiniteQuery
  
  vue

• useMutation
  
  vue

• useIsFetching
  
  vue

• useIsMutating
  
  vue

• useMutationState
  
  vue

• useQueryClient
  
  vue

• queryOptions
  
  vue

• infiniteQueryOptions
  
  vue

• hydration
  
  vue

ESLint

• ESLint Plugin Query
  
  core

• Exhaustive Deps
  
  core

• Stable Query Client
  
  core

• No Rest Destructuring
  
  core

• No Unstable Deps
  
  core

• Infinite Query Property Order
  
  core

Examples

• Basic
  
  vue

• Vue 2.6
  
  vue

• Nuxt 3
  
  vue

• Persister
  
  vue

Plugins

• broadcastQueryClient (Experimental)
  
  vue

• createPersister (Experimental)
  
  vue

Framework

Vue

Version

v5

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  vue

• Installation
  
  vue

• Quick Start
  
  vue

• Devtools
  
  vue

• TypeScript
  
  vue

• Reactivity
  
  vue

• GraphQL
  
  vue

Guides & Concepts

• Important Defaults
  
  vue

• Queries
  
  vue

• Query Keys
  
  vue

• Query Functions
  
  vue

• Query Options
  
  vue

• Network Mode
  
  vue

• Parallel Queries
  
  vue

• Dependent Queries
  
  vue

• Background Fetching Indicators
  
  vue

• Window Focus Refetching
  
  vue

• Disabling/Pausing Queries
  
  vue

• Query Retries
  
  vue

• Paginated Queries
  
  vue

• Infinite Queries
  
  vue

• Initial Query Data
  
  vue

• Placeholder Query Data
  
  vue

• Mutations
  
  vue

• Query Invalidation
  
  vue

• Invalidation from Mutations
  
  vue

• Updates from Mutation Responses
  
  vue

• Optimistic Updates
  
  vue

• Query Cancellation
  
  vue

• Scroll Restoration
  
  vue

• Filters
  
  vue

• Prefetching
  
  vue

• SSR & Nuxt
  
  vue

• Caching
  
  vue

• Default Query Fn
  
  vue

• Suspense
  
  vue

• Testing
  
  vue

• Custom Client
  
  vue

• Does this replace [Vuex, Pinia]?
  
  vue

• Migrating to v5
  
  vue

API Reference

• QueryClient
  
  core

• QueryCache
  
  core

• MutationCache
  
  core

• QueryObserver
  
  core

• InfiniteQueryObserver
  
  core

• QueriesObserver
  
  core

• streamedQuery
  
  core

• focusManager
  
  core

• onlineManager
  
  core

• notifyManager
  
  core

• timeoutManager
  
  core

• useQuery
  
  vue

• useQueries
  
  vue

• useInfiniteQuery
  
  vue

• useMutation
  
  vue

• useIsFetching
  
  vue

• useIsMutating
  
  vue

• useMutationState
  
  vue

• useQueryClient
  
  vue

• queryOptions
  
  vue

• infiniteQueryOptions
  
  vue

• hydration
  
  vue

ESLint

• ESLint Plugin Query
  
  core

• Exhaustive Deps
  
  core

• Stable Query Client
  
  core

• No Rest Destructuring
  
  core

• No Unstable Deps
  
  core

• Infinite Query Property Order
  
  core

Examples

• Basic
  
  vue

• Vue 2.6
  
  vue

• Nuxt 3
  
  vue

• Persister
  
  vue

Plugins

• broadcastQueryClient (Experimental)
  
  vue

• createPersister (Experimental)
  
  vue

On this page

• NPM

• Vue Query Initialization

• Use of Composition API with <script setup>

Installation

Copy Markdown

You can install Vue Query via NPM .

### NPM

bash

npm i @tanstack/vue-query


npm i @tanstack/vue-query

or

bash

pnpm add @tanstack/vue-query


pnpm add @tanstack/vue-query

or

bash

yarn add @tanstack/vue-query


yarn add @tanstack/vue-query

or

bash

bun add @tanstack/vue-query


bun add @tanstack/vue-query

Wanna give it a spin before you download? Try out the basic example!

Vue Query is compatible with Vue 2.x and 3.x

If you are using Vue 2.6, make sure to also setup @vue/composition-api

### Vue Query Initialization

Before using Vue Query, you need to initialize it using VueQueryPlugin

tsx

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

app.use(VueQueryPlugin)


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

app.use(VueQueryPlugin)

### Use of Composition API with <script setup>

All examples in our documentation use <script setup> syntax.

Vue 2 users can also use that syntax using this plugin . Please check the plugin documentation for installation details.

If you are not a fan of <script setup> syntax, you can easily translate all the examples into normal Composition API syntax by moving the code under setup() function and returning the values used in the template.

vue

<script setup>
import { useQuery } from '@tanstack/vue-query'

const { isPending, isFetching, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})
</script>

<template>...</template>


<script setup>
import { useQuery } from '@tanstack/vue-query'

const { isPending, isFetching, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})
</script>

<template>...</template>

Edit on GitHub

Overview

Quick Start

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)