Add and configure Tanstack/vue-query

plugins/vue-query.ts

@@ -0,0 +1,34 @@
+import type {
+  DehydratedState,
+  VueQueryPluginOptions,
+} from '@tanstack/vue-query';
+import {
+  VueQueryPlugin,
+  QueryClient,
+  hydrate,
+  dehydrate,
+} from '@tanstack/vue-query';
+// Nuxt 3 app aliases
+import { defineNuxtPlugin, useState } from '#imports';
+
+export default defineNuxtPlugin((nuxt) => {
+  const vueQueryState = useState<DehydratedState | null>('vue-query');
+
+  // Modify your Vue Query global settings here
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { staleTime: 5000 } },
+  });
+  const options: VueQueryPluginOptions = { queryClient };
+
+  nuxt.vueApp.use(VueQueryPlugin, options);
+
+  if (import.meta.server) {
+    nuxt.hooks.hook('app:rendered', () => {
+      vueQueryState.value = dehydrate(queryClient);
+    });
+  }
+
+  if (import.meta.client) {
+    hydrate(queryClient, vueQueryState.value);
+  }
+});