Skip to content

Commit caa9299

Browse files
committed
docs: update README for clarity and add new images
1 parent 4ad7c00 commit caa9299

File tree

3 files changed

+15
-11
lines changed

3 files changed

+15
-11
lines changed

README.md

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
[![License][license-src]][license-href]
66
[![Nuxt][nuxt-src]][nuxt-href]
77

8-
Nuxt Query is a module for integrating [Tanstack Query](https://tanstack.com/query/latest/docs/framework/vue/overview) (formerly known as Vue Query) into your Nuxt application, providing a powerful solution for fetching, caching, synchronizing and updating server state.
8+
A powerful Nuxt module for integrating [TanStack Query](https://tanstack.com/query/latest/docs/framework/vue/overview) (formerly Vue Query) into your Nuxt application. Provides robust server state management with intelligent caching, background updates, and seamless data synchronization.
99

1010
- [ Release Notes](/CHANGELOG.md)
11+
- [🏀  Online playground](https://stackblitz.com/github/peterbud/nuxt-query/tree/main/examples/minimal)
1112

1213
## Features
1314

14-
<!-- Highlight some of the features your module provide here -->
15-
- ⚙️ &nbsp; 0 config integration
16-
- 💪 &nbsp; Full support of Vue Query config settings
17-
- 🏆 &nbsp; Support for complex `QueryClient` setup with handlers via hooks
15+
- ⚙️ &nbsp; Zero-configuration integration
16+
- 💪 &nbsp; Full TypeScript support with Vue Query configuration
17+
- 🏆 &nbsp; Advanced `QueryClient` setup with custom handlers via hooks
1818
- 🤖 &nbsp; Configurable auto-imports for Vue Query composables
19-
- 🧩 &nbsp; Nuxt DevTools integration for easy debugging
19+
- 🧩 &nbsp; Nuxt DevTools integration for debugging and inspection
2020

2121
## Installation
2222

@@ -29,7 +29,7 @@ npx nuxi module add @peterbud/nuxt-query
2929
or via npm:
3030

3131
```bash
32-
pnpm dlx nuxi module add @peterbud/nuxt-query
32+
npm install @peterbud/nuxt-query
3333
```
3434

3535
## Configuration
@@ -42,12 +42,12 @@ export default defineNuxtConfig({
4242
modules: ['@peterbud/nuxt-query'],
4343
nuxtQuery: {
4444
/**
45-
* Specify which Vue Query composable(s) to auto-import
46-
* Default to `false`, set to `true` to auto-import all Vue Query composables
45+
* Specify which Vue Query composables to auto-import
46+
* Default: `false`, set to `true` to auto-import all Vue Query composables
4747
*/
4848
autoImports: ['useQuery', 'useMutation'],
4949

50-
// Enable / disable Nuxt DevTools integration (default: true).
50+
// Enable/disable Nuxt DevTools integration (default: true)
5151
devtools: true,
5252

5353
/**
@@ -93,7 +93,7 @@ That's it! You can now use Nuxt Query in your Nuxt app ✨
9393

9494
## Module Hooks
9595

96-
Nuxt Query provides a hook that you can use in your application if you need a more complex setup for Vue Query, like custom query client with centralized `onSuccess` or `onError` handlers, which would not be possible to configure with the options available in the `nuxt.config.ts`.
96+
Nuxt Query provides a hook that you can use in your application if you need a more complex setup for TanStack Query, such as a custom query client with centralized `onSuccess` or `onError` handlers, which would not be possible to configure with the options available in the `nuxt.config.ts`.
9797

9898
The hook is called `nuxt-query:configure` and you can use it in a plugin to return a custom `QueryClient` object in the following way:
9999

@@ -128,6 +128,10 @@ Nuxt Query integrates with Nuxt DevTools to provide a dedicated tab for Vue Quer
128128

129129
![Nuxt DevTools](assets/devtools.png)
130130

131+
Also, you can inspect your mutation cache using the same DevTools in a convenient way.
132+
133+
![Mutation Cache](assets/mutationcache.png)
134+
131135
## Contribution
132136

133137
<details>

assets/devtools.png

-22.6 KB
Loading

assets/mutationcache.png

73 KB
Loading

0 commit comments

Comments
 (0)