npm install @tanstack/vue-query

Hooks for managing, caching and syncing asynchronous and remote data in Vue

About @tanstack/vue-query

The @tanstack/vue-query package is a powerful tool designed to enrich Vue applications by efficiently managing, caching, and synchronizing asynchronous and remote data. This node module leverages the robustness of Vue's reactive system to provide hooks that simplify handling data fetching, sharing state between components, and maintaining data consistency across your application. By employing @tanstack/vue-query, developers can significantly reduce the complexity involved in data management operations, thus speeding up the development process and improving the scalability of their applications. The hooks provided by this package not only help in fetching data but also in caching it, making subsequent data retrieval instantaneous and reducing the load on server resources.

To integrate @tanstack/vue-query into your Vue project, you can easily start by running the command `npm install @tanstack/vue-query`. This installation process hooks your application up with all the necessary functionalities to begin fetching, caching, and synchronizing your data through a simplified API. The simplicity of setting up @tanstack/vue-query allows developers to quickly leverage its benefits without the steep learning curve often associated with similar technologies. Once installed, developers can utilize various hooks like `useQuery` to fetch data and `useMutation` to handle data mutations, all while maintaining a clean and reactive component architecture.

The benefits of using @tanstack/vue-query extend beyond just technical enhancements. By incorporating this module, applications become more efficient and user-friendly. The caching mechanism reduces the need for frequent data fetching, which in turn decreases network traffic and lowers server load. This efficiency gain not only boosts the performance of the application but also enhances the user experience by providing faster load times and a more responsive interface. Additionally, @tanstack/vue-query’s built-in mechanisms for updating stale data and synchronizing data across components ensure that users always view the most current information, which is crucial for applications dealing with real-time data.

More from TanStack

TanStack npm packages

Find the best node modules for your project.

Search npm

@tanstack/react-query

Hooks for managing, caching and syncing asynchronous and remote data in...

Read more
,

@tanstack/react-query-devtools

Developer tools to interact with and visualize the TanStack/react-query...

Read more
,

@tanstack/vue-query

Hooks for managing, caching and syncing asynchronous and remote data in...

Read more

Dependencies

Core dependencies of this npm package and its dev dependencies.

@arethetypeswrong/cli, @cspell/eslint-plugin, @solidjs/testing-library, @tanstack/config, @testing-library/jest-dom, @testing-library/react, @types/eslint, @types/node, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vitest/coverage-istanbul, cpy-cli, esbuild-plugin-file-path-extensions, eslint, eslint-config-prettier, eslint-import-resolver-typescript, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, husky, jsdom, knip, lint-staged, nx, prettier, prettier-plugin-svelte, publint, react, react-dom, rimraf, sherif, solid-js, tsup, typescript, vite, vitest

Documentation

A README file for the @tanstack/vue-query code repository. View Code

Vue Query logo

npm version npm license bundle size npm

Vue Query

Hooks for fetching, caching and updating asynchronous data in Vue.

Support for Vue 2.x via vue-demi

Documentation

Visit https://tanstack.com/query/latest/docs/vue/overview

Quick Features

Quick Start

  1. Install vue-query

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

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

  2. Initialize Vue Query via VueQueryPlugin

    import { createApp } from 'vue'
    import { VueQueryPlugin } from '@tanstack/vue-query'
    
    import App from './App.vue'
    
    createApp(App).use(VueQueryPlugin).mount('#app')
    
  3. Use query

    import { defineComponent } from 'vue'
    import { useQuery } from '@tanstack/vue-query'
    
    export default defineComponent({
      name: 'MyComponent',
      setup() {
        const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })
    
        return {
          query,
        }
      },
    })
    
  4. 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({
      queryKey: ['todos', id],
      queryFn: () => getTodos(id),
      enabled,
    })