Installation | TanStack Query Vue Docs

You can install Vue Query via NPM.

NPM

npm i @tanstack/vue-query

npm i @tanstack/vue-query

pnpm add @tanstack/vue-query

pnpm add @tanstack/vue-query

yarn add @tanstack/vue-query

yarn add @tanstack/vue-query

bun add @tanstack/vue-query

bun add @tanstack/vue-query

Vue Query is compatible with Vue v2.6+ and v3.3+.

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

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

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>