vue-router-ssr-query

Author: birkskyum

package.json

@@ -100,6 +100,7 @@
       "@tanstack/router-ssr-query-core": "workspace:*",
       "@tanstack/react-router-ssr-query": "workspace:*",
       "@tanstack/solid-router-ssr-query": "workspace:*",
+      "@tanstack/vue-router-ssr-query": "workspace:*",
       "@tanstack/zod-adapter": "workspace:*",
       "@tanstack/valibot-adapter": "workspace:*",
       "@tanstack/arktype-adapter": "workspace:*",

packages/vue-router-ssr-query/README.md

@@ -0,0 +1,23 @@
+# @tanstack/vue-router-ssr-query
+
+SSR Query integration for TanStack Vue Router.
+
+## Installation
+
+```bash
+npm install @tanstack/vue-router-ssr-query
+```
+
+## Usage
+
+```ts
+import { setupRouterSsrQueryIntegration } from '@tanstack/vue-router-ssr-query'
+import { QueryClient } from '@tanstack/vue-query'
+
+const queryClient = new QueryClient()
+
+setupRouterSsrQueryIntegration({
+  router,
+  queryClient,
+})
+```

packages/vue-router-ssr-query/eslint.config.ts

@@ -0,0 +1,13 @@
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  {
+    files: ['src/**/*.{ts,tsx}', 'tests/**/*.{ts,tsx}'],
+    plugins: {},
+    rules: {
+      'unused-imports/no-unused-vars': 'off',
+      '@typescript-eslint/no-unnecessary-condition': 'off',
+    },
+  },
+]

packages/vue-router-ssr-query/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@tanstack/vue-router-ssr-query",
+  "version": "1.0.0",
+  "description": "Modern and scalable routing for Vue applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/router.git",
+    "directory": "packages/vue-router-ssr-query"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "vue",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:eslint": "eslint ./src",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
+    "test:types:ts59": "tsc",
+    "test:unit": "exit 0; vitest",
+    "test:unit:dev": "pnpm run test:unit --watch",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "vite build"
+  },
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@tanstack/router-ssr-query-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@tanstack/vue-query": "^5.92.0",
+    "@tanstack/vue-router": "workspace:*",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "vue": "^3.5.25"
+  },
+  "peerDependencies": {
+    "@tanstack/query-core": ">=5.90.0",
+    "@tanstack/vue-query": ">=5.90.0",
+    "@tanstack/vue-router": ">=1.127.0",
+    "vue": "^3.3.0"
+  }
+}

packages/vue-router-ssr-query/src/index.tsx

@@ -0,0 +1,49 @@
+import * as Vue from 'vue'
+import { setupCoreRouterSsrQueryIntegration } from '@tanstack/router-ssr-query-core'
+import type { RouterSsrQueryOptions } from '@tanstack/router-ssr-query-core'
+import type { AnyRouter } from '@tanstack/vue-router'
+import type { QueryClient } from '@tanstack/query-core'
+
+// Vue Query uses this string as the injection key
+const VUE_QUERY_CLIENT = 'VUE_QUERY_CLIENT'
+
+export type Options<TRouter extends AnyRouter> =
+  RouterSsrQueryOptions<TRouter> & {
+    wrapQueryClient?: boolean
+  }
+
+export function setupRouterSsrQueryIntegration<TRouter extends AnyRouter>(
+  opts: Options<TRouter>,
+) {
+  setupCoreRouterSsrQueryIntegration(opts)
+
+  if (opts.wrapQueryClient === false) {
+    return
+  }
+
+  const OGWrap =
+    opts.router.options.Wrap ||
+    ((props: { children: any }) => props.children)
+
+  opts.router.options.Wrap = (props) => {
+    return Vue.h(
+      QueryClientProvider,
+      { client: opts.queryClient },
+      () => Vue.h(OGWrap, null, () => props.children),
+    )
+  }
+}
+
+const QueryClientProvider = Vue.defineComponent({
+  name: 'QueryClientProvider',
+  props: {
+    client: {
+      type: Object as () => QueryClient,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    Vue.provide(VUE_QUERY_CLIENT, props.client)
+    return () => slots.default?.()
+  },
+})

packages/vue-router-ssr-query/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "vue"
+  },
+  "include": ["src", "tests", "vite.config.ts", "eslint.config.ts"]
+}

packages/vue-router-ssr-query/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/config/vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import packageJson from './package.json'
+import type { UserConfig } from 'vitest/config'
+
+const config = defineConfig({
+  plugins: [vueJsx()] as UserConfig['plugins'],
+  test: {
+    name: packageJson.name,
+    dir: './tests',
+    watch: false,
+    environment: 'jsdom',
+    typecheck: { enabled: true },
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: './src/index.tsx',
+    srcDir: './src',
+  }),
+)

pnpm-lock.yaml

@@ -36,6 +36,10 @@ await publish({
       name: '@tanstack/react-router-ssr-query',
       packageDir: 'packages/react-router-ssr-query',
     },
+    {
+      name: '@tanstack/vue-router-ssr-query',
+      packageDir: 'packages/vue-router-ssr-query',
+    },
     {
       name: '@tanstack/router-ssr-query-core',
       packageDir: 'packages/router-ssr-query-core',