feat(front): integrate @tanstack/vue-query for improved data fetching and state management

front/package.json

@@ -13,6 +13,7 @@
     "@pinia/nuxt": "^0.11.0",
     "@tailwindcss/postcss": "^4.1.3",
     "@tailwindcss/vite": "^4.1.3",
+    "@tanstack/vue-query": "^5.76.0",
     "@tiptap/extension-blockquote": "^2.11.7",
     "@tiptap/extension-bold": "^2.11.7",
     "@tiptap/extension-heading": "^2.11.7",

front/plugins/vue-query.ts

@@ -0,0 +1,36 @@
+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) {
+      nuxt.hooks.hook('app:created', () => {
+        hydrate(queryClient, vueQueryState.value)
+      })
+    }
+  })

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.3
         version: 4.1.3(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
+      '@tanstack/vue-query':
+        specifier: ^5.76.0
+        version: 5.76.0(vue@3.5.13(typescript@5.8.2))
       '@tiptap/extension-blockquote':
         specifier: ^2.11.7
         version: 2.11.7(@tiptap/core@2.11.7(@tiptap/pm@2.11.7))
@@ -1188,9 +1191,25 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6
 
+  '@tanstack/match-sorter-utils@8.19.4':
+    resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/query-core@5.76.0':
+    resolution: {integrity: sha512-FN375hb8ctzfNAlex5gHI6+WDXTNpe0nbxp/d2YJtnP+IBM6OUm7zcaoCW6T63BawGOYZBbKC0iPvr41TteNVg==}
+
   '@tanstack/virtual-core@3.13.6':
     resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}
 
+  '@tanstack/vue-query@5.76.0':
+    resolution: {integrity: sha512-Ow1JPfAqjam/hH2WJj15Y+a7FT5LS/So2b4jMAI3lLKUcpIjVRLEOLQXdCYZ/29YbDrL66trwLPXjA9tYrHung==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.2
+      vue: ^2.6.0 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@tanstack/vue-virtual@3.13.6':
     resolution: {integrity: sha512-GYdZ3SJBQPzgxhuCE2fvpiH46qzHiVx5XzBSdtESgiqh4poj8UgckjGWYEhxaBbcVt1oLzh1m3Ql4TyH32TOzQ==}
     peerDependencies:
@@ -4400,6 +4419,9 @@ packages:
     peerDependencies:
       vue: '>= 3.2.0'
 
+  remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+
   replace-in-file@6.3.5:
     resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
     engines: {node: '>=10'}
@@ -6534,8 +6556,22 @@ snapshots:
       tailwindcss: 4.1.3
       vite: 6.2.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0)
 
+  '@tanstack/match-sorter-utils@8.19.4':
+    dependencies:
+      remove-accents: 0.5.0
+
+  '@tanstack/query-core@5.76.0': {}
+
   '@tanstack/virtual-core@3.13.6': {}
 
+  '@tanstack/vue-query@5.76.0(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@tanstack/match-sorter-utils': 8.19.4
+      '@tanstack/query-core': 5.76.0
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.8.2)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.8.2))
+
   '@tanstack/vue-virtual@3.13.6(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@tanstack/virtual-core': 3.13.6
@@ -10243,6 +10279,8 @@ snapshots:
       - '@vue/composition-api'
       - typescript
 
+  remove-accents@0.5.0: {}
+
   replace-in-file@6.3.5:
     dependencies:
       chalk: 4.1.2