This package was migrated to be a part of https://github.com/TanStack/query.
If you are still on v1
make sure to follow migration guide first and then switch to @tanstack/vue-query
.
If you are already on v2
, just swap vue-query
for @tanstack/vue-query
in both of your package.json
and import
statements. Everything should still work as before.
Hooks for fetching, caching and updating asynchronous data in Vue.
Support for Vue 2.x via vue-demi
Based on react-query
Visit https://vue-query.vercel.app
Visit https://vue-query-next.vercel.app for V2 documentation
For topics not covered in vue-query docs
visit react-query docs as most of the concepts and APIs are the same.
Install vue-query
npm install vue-query
# or
yarn add vue-query
If you are using Vue 2.x, make sure to also setup @vue/composition-api
Initialize Vue Query via VueQueryPlugin
import { createApp } from "vue";
import { VueQueryPlugin } from "vue-query";
import App from "./App.vue";
createApp(App).use(VueQueryPlugin).mount("#app");
Use query
import { defineComponent } from "vue";
import { useQuery } from "vue-query";
export default defineComponent({
name: "MyComponent",
setup() {
const query = useQuery("todos", getTodos);
return {
query,
};
},
});
If you need to update options on your query dynamically, make sure to pass them as reactive variables
const id = ref(1);
const enabled = ref(false);
const query = useQuery(["todos", id], () => getTodos(id), { enabled });