⚗️ Vue Query Nuxt

🚀 Welcome to Vue Query Nuxt!

This Nuxt Module automatically installs and configure Vue Query for your Nuxt application. It has 0 config out-of-the box and extremely lightweight.

⚠️ Disclaimer

🧪 This module is in active development.

Refer to the Vue Query documentation for more information about Vue Query.

📦 Installation

Use npm, pnpm or yarn to install the dependencies.

npm i @hebilicious/vue-query-nuxt @tanstack/vue-query

pnpm i @hebilicious/vue-query-nuxt @tanstack/vue-query

yarn i @hebilicious/vue-query-nuxt @tanstack/vue-query

Add the modules to your Nuxt modules

// In nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@hebilicious/vue-query-nuxt"],
  // These are the default values, you do not need to specify them.
  // Refer to the vue-query docs for more information.
  vueQuery: {
    stateKey: "vue-query-nuxt",
    queryClientOptions: {
      defaultOptions: { queries: { staleTime: 5000 } } // default
    },
    vueQueryPluginOptions: {}
  }
})

Use right away

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

// Access QueryClient instance
const queryClient = useQueryClient()

// Define a fetching function 
const getTodos = () => $fetch("/api/todos")

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

// Mutation
const mutation = useMutation({
  mutationFn: postTodo,
  onSuccess: () => {
    // Invalidate and refetch
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

function onButtonClick() {
  mutation.mutate({
    id: Date.now(),
    title: 'Do Laundry',
  })
}
</script>

<template>
  <span v-if="isLoading">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <!-- We can assume by this point that `isSuccess === true` -->
  <ul v-else>
    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
  </ul>
  <button @click="onButtonClick">Add Todo</button>
</template>

Advanced configuration

Create a vue-query.config.ts file at the root of your project.

// vue-query.config.ts
import { library } from "@example/libray"

export default defineVueQueryPluginCallback((vueQueryOptions) => {
  console.log(vueQueryOptions) // You can access the queryClient here
  return { provide: { library, test: console } }
})

This callback will be run directly after the Vue Query plugin is installed, so you can use it to provide something here. This can be useful if you want to configure something that needs the queryClient or you want to provide a library.

📦 Contributing

Contributions, issues and feature requests are welcome!

Fork this repo
Install node and pnpm Use corepack enable && corepack prepare pnpm@latest --activate to install pnpm easily
Use pnpm i at the mono-repo root.
Make modifications and follow conventional commits.
Open a PR 🚀🚀🚀