product-card

plugins/vue-query.ts

@@ -2,7 +2,6 @@ import type {
   DehydratedState,
   VueQueryPluginOptions,
 } from '@tanstack/vue-query'
-// Nuxt 3 app aliases
 import { defineNuxtPlugin, useState } from '#imports'
 import {
   dehydrate,
@@ -11,10 +10,12 @@ import {
   VueQueryPlugin,
 } from '@tanstack/vue-query'
 
+// импортируем Devtools
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+
 export default defineNuxtPlugin((nuxt) => {
   const vueQueryState = useState<DehydratedState | null>('vue-query')
 
-  // Modify your Vue Query global settings here
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -40,6 +41,11 @@ export default defineNuxtPlugin((nuxt) => {
   if (import.meta.client) {
     nuxt.hooks.hook('app:created', () => {
       hydrate(queryClient, vueQueryState.value)
+
+      // Монтируем Devtools только на клиенте
+      nuxt.vueApp.use(VueQueryDevtools, {
+        initialIsOpen: false, // открыть/закрыть по умолчанию
+      })
     })
   }
 })