Nuxt Vue Query

Features

• Adds all Tanstack Vue Query composables: useQuery, useMutation, etc.
• Add extra composables useApiGet, useApiPost, useApiPut and useApiDelete to easy access to Nuxt APIs.
• Generates and returns Query Keys automatically.
• Type safety for Nuxt API query, post, parameters and responses.
• Uses useFetch() under the hood to support SSR. (Why not $fetch? See)
• Clears queries from Nuxt cache immediately, because TanStack Query provides its own cache.

Quick Setup

1. Add nuxt-vue-query and @tanstack/vue-query  dependency to your project

1npm install --save-dev nuxt-vue-query
2npm install @tanstack/vue-query

2. Add nuxt-vue-query to the modules section of nuxt.config.ts. Provide vue-query configuration.

1export default defineNuxtConfig({
2  modules: ['nuxt-vue-query'],
3  vueQuery: { queryClientConfig: { defaultOptions: { queries: { staleTime: 60000 } } } }
4})

Usage

All Tanstack Vue Query features can be used as is:

1const { isLoading, isError, data, error } = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
2
3const { isLoading, isError, error, isSuccess, mutate } = useMutation({
4  mutationFn: (newTodo) => axios.post('/todos', newTodo),
5})
6mutate({ id: new Date(), title: 'Do Laundry' })

Extra Features

Typed Server Routes

Add type to server routes. For example /api/item/[id]/[category]

1import type { H3Event } from "h3";
2
3// Export `Query` and `Body` types.
4export type Query = { language: string };
5export type Body = { status: string };
6
7export default eventHandler(async (event: H3Event) => {
8
9});

Using with Zod

Zod adds runtime data validation in addition to Type Script's type safety.

1// Zod is optional, but really useful.
2import type { H3Event } from "h3";
3import { z, parseQueryAs, parseBodyAs, parseParamsAs } from "@sidebase/nuxt-parse";
4
5const querySchema = z.object({ language: z.string().default("tr") });
6const bodySchema = z.object({ status: z.string().default("ok") });
7const parametersSchema = z.object({ id: z.preprocess(Number, z.number()), category: z.string() }).required({ id: true, name: true });
8
9// Export `Query`, `Body` and `Parameters` types using Zod.
10export type Query = z.infer<typeof querySchema>;
11export type Body = z.infer<typeof bodySchema>;
12export type Parameters = z.infer<typeof parametersSchema>;
13
14export default eventHandler(async (event: H3Event) => {
15  const { language } = parseQueryAs(event, querySchema);
16  const { status } = parseBodyAs(event, bodySchema);
17  const { id, name } = await parseParamsAs(event, parametersSchema);
18});

Using on Components

Query for Nuxt API (get)

1const id = ref(123);
2const category = ref("new-arrivals")
3const query = reactive({ draft: true })
4
5// Pass URL parameters:
6const { isLoading, isError, data, error, queryKey } = await useApiGet(["/api/item/:category/:id", category, id], query, options);
7
8// Without URL parameters:
9const { isLoading, isError, data, error, queryKey } = await useApiGet("/api/prefs", query, options);

Query for Nuxt API (post, put, delete)

1// Pass URL parameters:
2const { isLoading, isError, error, isSuccess, mutate, mutateAsync } = await useApiPost("/api/item/:category/:id", options);
3const data = await mutateAsync([category, id, { color: "red" }]);
4
5// Without URL parameters:
6const { isLoading, isError, error, isSuccess, mutate, mutateAsync } = await useApiPost("/api/prefs", options);
7const data = await mutateAsync({ theme: "dark" });
8
9const { isLoading, isError, error, isSuccess, mutate, mutateAsync } = await useApiPut("/api/prefs", options);
10const { isLoading, isError, error, isSuccess, mutate, mutateAsync } = await useApiDelete("/api/prefs", options);