Installation

Installation

You can install Vue Query via NPM.

NPM

bash

$ npm i @tanstack/vue-query
# or
$ pnpm add @tanstack/vue-query
# or
$ yarn add @tanstack/vue-query

$ npm i @tanstack/vue-query
# or
$ pnpm add @tanstack/vue-query
# or
$ yarn 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 { isLoading, isFetching, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})
</script>

<template>...</template>

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

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

<template>...</template>

NPM

Vue Query Initialization

Use of Composition API with <script setup>

Want to Skip the Docs?

Want to Skip the Docs?