You can install Vue Query via NPM.
npm i @tanstack/vue-query
npm i @tanstack/vue-query
or
pnpm add @tanstack/vue-query
pnpm add @tanstack/vue-query
or
yarn add @tanstack/vue-query
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
Before using Vue Query, you need to initialize it using VueQueryPlugin
import { VueQueryPlugin } from '@tanstack/vue-query'
app.use(VueQueryPlugin)
import { VueQueryPlugin } from '@tanstack/vue-query'
app.use(VueQueryPlugin)
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.
<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>