⚗️ Vue Query Nuxt

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]

[npm-version-src]: https://img.shields.io/npm/v/@hebilicious/vue-query-nuxt
[npm-version-href]: https://npmjs.com/package/@hebilicious/vue-query-nuxt
[npm-downloads-src]: https://img.shields.io/npm/dm/@hebilicious/vue-query-nuxt
[npm-downloads-href]: https://npmjs.com/package/@hebilicious/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.

Features

- 0 config out-of-the box
- All configurations options available
- Auto Imports for Vue Query composables

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

📦 How to use

$3

``bash


npm

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

pnpm

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

yarn

yarn add @hebilicious/vue-query-nuxt @tanstack/vue-query
`

$3

In nuxt.config.ts :

`ts
export default defineNuxtConfig({
modules: ["@hebilicious/vue-query-nuxt"]
})
`

$3

In a vue component :

`html



`

$3

You can specify the options under the vueQuery key in your nuxt.config.ts file.
Everything is typed.

In nuxt.config.ts :

`ts
export default defineNuxtConfig({
modules: ["@hebilicious/vue-query-nuxt"],
vueQuery: {
// useState key used by nuxt for the vue query state.
stateKey: "vue-query-nuxt", // default
// If you only want to import some functions, specify them here.
// You can pass false or an empty array to disable this feature.
// default: ["useQuery", "useQueries", "useInfiniteQuery", "useMutation", "useIsFetching", "useIsMutating", "useQueryClient"]
autoImports: ["useQuery"],
// Pass the vue query client options here ...
queryClientOptions: {
defaultOptions: { queries: { staleTime: 5000 } } // default
},
// Pass the vue query plugin options here ....
vueQueryPluginOptions: {}
}
})
`

If you need to modify the plugin that installs vue query, you can create a vue-query.config.ts file at the root of your project.

In vue-query.config.ts :

`ts
import { library } from "@example/libray"

export default defineVueQueryPluginHook(({ queryClient, nuxt }) => {
console.log(queryClient, nuxt) // You can access the queryClient here
return {
pluginReturn: { provide: { library, test: console } }, // nuxt plugin return value
vueQueryPluginOptions: { queryClient } // You can pass dynamic options
}
})
`

This hook will be run within the nuxt plugin installed by the module, so you can use it to provide something or replace the vue query options.
This can be useful if you need to run custom logic when the queryClient is being installed.

📦 Contributing

Contributions, issues and feature requests are welcome!

1. Fork this repo

2. Install node and pnpm _Use corepack enable && corepack prepare pnpm@latest --activate to install pnpm easily_

3. Use pnpm i` at the mono-repo root.

4. Make modifications and follow conventional commits.

5. Open a PR 🚀🚀🚀