diff --git a/package.json b/package.json index 44670a3..e86dda6 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@nuxt/icon": "1.11.0", "@nuxt/ui": "3.0.2", "@tailwindcss/vite": "^4.1.1", + "@tanstack/vue-query": "^5.71.5", "eslint": "^9.0.0", "nuxt": "^3.16.2", "tailwindcss": "^4.1.1", diff --git a/plugins/vue-query.ts b/plugins/vue-query.ts new file mode 100644 index 0000000..eb39dcd --- /dev/null +++ b/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('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); + } +}); \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 81915cb..8dc2d3d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@tailwindcss/vite': specifier: ^4.1.1 version: 4.1.1(vite@6.2.5(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.1)) + '@tanstack/vue-query': + specifier: ^5.71.5 + version: 5.71.5(vue@3.5.13(typescript@5.8.2)) eslint: specifier: ^9.0.0 version: 9.23.0(jiti@2.4.2) @@ -1101,6 +1104,13 @@ 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.71.5': + resolution: {integrity: sha512-XOQ5SyjCdwhxyLksGKWSL5poqyEXYPDnsrZAzJm2LgrMm4Yh6VOrfC+IFosXreDw9HNqC11YAMY3HlfHjNzuaA==} + '@tanstack/table-core@8.21.2': resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==} engines: {node: '>=12'} @@ -1108,6 +1118,15 @@ packages: '@tanstack/virtual-core@3.13.6': resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==} + '@tanstack/vue-query@5.71.5': + resolution: {integrity: sha512-R+mjfL8KuVNOhXevdLrrCW+uXeamN+EkIrANdfaLfHQL4wtYopfSL7+Hl4gehYJGY6jDHQ4hiLAZY/rC5+ogzw==} + peerDependencies: + '@vue/composition-api': ^1.1.2 + vue: ^2.6.0 || ^3.3.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + '@tanstack/vue-table@8.21.2': resolution: {integrity: sha512-KBgOWxha/x4m1EdhVWxOpqHb661UjqAxzPcmXR3QiA7aShZ547x19Gw0UJX9we+m+tVcPuLRZ61JsYW47QZFfQ==} engines: {node: '>=12'} @@ -3344,6 +3363,9 @@ packages: peerDependencies: vue: '>= 3.2.0' + remove-accents@0.5.0: + resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} + require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -5430,10 +5452,24 @@ snapshots: tailwindcss: 4.1.1 vite: 6.2.5(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.1) + '@tanstack/match-sorter-utils@8.19.4': + dependencies: + remove-accents: 0.5.0 + + '@tanstack/query-core@5.71.5': {} + '@tanstack/table-core@8.21.2': {} '@tanstack/virtual-core@3.13.6': {} + '@tanstack/vue-query@5.71.5(vue@3.5.13(typescript@5.8.2))': + dependencies: + '@tanstack/match-sorter-utils': 8.19.4 + '@tanstack/query-core': 5.71.5 + '@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-table@8.21.2(vue@3.5.13(typescript@5.8.2))': dependencies: '@tanstack/table-core': 8.21.2 @@ -7905,6 +7941,8 @@ snapshots: - '@vue/composition-api' - typescript + remove-accents@0.5.0: {} + require-directory@2.1.1: {} resolve-from@4.0.0: {}