docs: update nuxt3 example

Author: DamianOsipiuk

docs/guides/ssr.md

@@ -7,35 +7,35 @@ Vue Query supports prefetching multiple queries on the server and then _dehydrat
 First create `vue-query.ts` file in your `plugins` directory with the following content:
 
 ```ts
-import {
-  VueQueryPlugin,
-  VueQueryPluginOptions,
-  QueryClient,
-  hydrate,
-  dehydrate,
-} from "vue-query";
-
-export default (nuxt) => {
+import type { DehydratedState, VueQueryPluginOptions } from "vue-query";
+import { VueQueryPlugin, QueryClient, hydrate, dehydrate } from "vue-query";
+// Nuxt 3 app aliases
+import { useState } from "#app";
+
+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: 1000 } },
+    defaultOptions: { queries: { staleTime: 5000 } },
   });
   const options: VueQueryPluginOptions = { queryClient };
 
   nuxt.vueApp.use(VueQueryPlugin, options);
 
   if (process.server) {
     nuxt.hooks.hook("app:rendered", () => {
-      nuxt.nuxtState["vue-query"] = dehydrate(queryClient);
+      vueQueryState.value = dehydrate(queryClient);
     });
   }
 
   if (process.client) {
     nuxt.hooks.hook("app:created", () => {
-      hydrate(queryClient, nuxt.nuxtState["vue-query"]);
+      hydrate(queryClient, vueQueryState.value);
     });
   }
-};
+});
+
 ```
 
 Now you are ready to prefetch some data in your pages with `onServerPrefetch`.
@@ -67,7 +67,7 @@ import { VueQueryPlugin, QueryClient, hydrate } from "vue-query";
 export default (context) => {
   // Modify your Vue Query global settings here
   const queryClient = new QueryClient({
-    defaultOptions: { queries: { staleTime: 1000 } },
+    defaultOptions: { queries: { staleTime: 5000 } },
   });
   const options = { queryClient };
 

examples/nuxt3-simple/app.vue

@@ -10,7 +10,7 @@ const fetcher = async () =>
     response.json()
   );
 
-const { data, suspense } = useQuery("test", fetcher);
+const { data, suspense } = useQuery(["test"], fetcher);
 
 await suspense();
 </script>

examples/nuxt3-simple/package.json

@@ -6,7 +6,7 @@
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
-    "nuxt": "npm:nuxt3@latest"
+    "nuxt": "^3.0.0-rc.8"
   },
   "dependencies": {
     "vue-query": ">=1.0.0"

examples/nuxt3-simple/plugins/vue-query.ts

@@ -1,12 +1,11 @@
-import {
-  VueQueryPlugin,
-  VueQueryPluginOptions,
-  QueryClient,
-  hydrate,
-  dehydrate,
-} from "vue-query";
+import type { DehydratedState, VueQueryPluginOptions } from "vue-query";
+import { VueQueryPlugin, QueryClient, hydrate, dehydrate } from "vue-query";
+// Nuxt 3 app aliases
+import { useState } from "#app";
+
+export default defineNuxtPlugin((nuxt) => {
+  const vueQueryState = useState<DehydratedState | null>("vue-query");
 
-export default (nuxt) => {
   // Modify your Vue Query global settings here
   const queryClient = new QueryClient({
     defaultOptions: { queries: { staleTime: 5000 } },
@@ -15,17 +14,15 @@ export default (nuxt) => {
 
   nuxt.vueApp.use(VueQueryPlugin, options);
 
-  // @ts-expect-error Nuxt process variable
   if (process.server) {
     nuxt.hooks.hook("app:rendered", () => {
-      nuxt.nuxtState["vue-query"] = dehydrate(queryClient);
+      vueQueryState.value = dehydrate(queryClient);
     });
   }
 
-  // @ts-expect-error Nuxt process variable
   if (process.client) {
     nuxt.hooks.hook("app:created", () => {
-      hydrate(queryClient, nuxt.nuxtState["vue-query"]);
+      hydrate(queryClient, vueQueryState.value);
     });
   }
-};
+});