TanStack · birkskyum · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025 · coderabbitai
diff --git a/e2e/vue-router/basic-vue-query-file-based/.gitignore b/e2e/vue-router/basic-vue-query-file-based/.gitignore
@@ -0,0 +1,11 @@
+node_modules
+.DS_Store
+dist
+dist-hash
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/vue-router/basic-vue-query-file-based/index.html b/e2e/vue-router/basic-vue-query-file-based/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/e2e/vue-router/basic-vue-query-file-based/package.json b/e2e/vue-router/basic-vue-query-file-based/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "tanstack-router-e2e-vue-basic-vue-query-file-based",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "dev:e2e": "vite",
+    "build": "vite build && vue-tsc --noEmit",
+    "preview": "vite preview",
+    "start": "vite",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
+    "@tanstack/vue-query": "^5.90.0",
+    "@tanstack/vue-query-devtools": "^6.1.2",
+    "@tanstack/vue-router": "workspace:^",
+    "@tanstack/vue-router-devtools": "workspace:^",
+    "@tanstack/router-plugin": "workspace:^",
+    "postcss": "^8.5.1",
+    "redaxios": "^0.5.1",
+    "tailwindcss": "^4.1.17",
+    "vue": "^3.5.16",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7",
+    "vue-tsc": "^3.1.5"
+  }
+}
diff --git a/e2e/vue-router/basic-vue-query-file-based/playwright.config.ts b/e2e/vue-router/basic-vue-query-file-based/playwright.config.ts
@@ -0,0 +1,40 @@
+import { defineConfig, devices } from '@playwright/test'
+import {
+  getDummyServerPort,
+  getTestServerPort,
+} from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const EXTERNAL_PORT = await getDummyServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+
+  reporter: [['line']],
+  globalSetup: './tests/setup/global.setup.ts',
+  globalTeardown: './tests/setup/global.teardown.ts',
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+  },
+
+  webServer: {
+    command: `VITE_NODE_ENV="test" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && VITE_NODE_ENV="test" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm preview --port ${PORT}`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})
diff --git a/e2e/vue-router/basic-vue-query-file-based/postcss.config.mjs b/e2e/vue-router/basic-vue-query-file-based/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
diff --git a/e2e/vue-router/basic-vue-query-file-based/src/main.tsx b/e2e/vue-router/basic-vue-query-file-based/src/main.tsx
@@ -0,0 +1,39 @@
+import { createApp } from 'vue'
+import { RouterProvider, createRouter } from '@tanstack/vue-router'
+import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
+import { routeTree } from './routeTree.gen'
+import './styles.css'
+
+const queryClient = new QueryClient()
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  context: {
+    queryClient,
+  },
+  scrollRestoration: true,
+  defaultPreload: 'intent',
+  // Since we're using Vue Query, we don't want loader calls to ever be stale
+  // This will ensure that the loader is always called when the route is preloaded or visited
+  defaultPreloadStaleTime: 0,
+})
+
+// Register things for typesafety
+declare module '@tanstack/vue-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+  createApp({
+    setup() {
+      return () => <RouterProvider router={router} />
+    },
+  })
+    .use(VueQueryPlugin, { queryClient })
+    .mount('#app')
+}
diff --git a/e2e/vue-router/basic-vue-query-file-based/src/postQueryOptions.tsx b/e2e/vue-router/basic-vue-query-file-based/src/postQueryOptions.tsx
@@ -0,0 +1,8 @@
+import { queryOptions } from '@tanstack/vue-query'
+import { fetchPost } from './posts'
+
+export const postQueryOptions = (postId: string) =>
+  queryOptions({
+    queryKey: ['posts', { postId }],
+    queryFn: () => fetchPost(postId),
+  })
diff --git a/e2e/vue-router/basic-vue-query-file-based/src/posts.tsx b/e2e/vue-router/basic-vue-query-file-based/src/posts.tsx
@@ -0,0 +1,37 @@
+import axios from 'redaxios'
+
+export type PostType = {
+  id: string
+  title: string
+  body: string
+}
+
+export class PostNotFoundError extends Error {}
+
+let queryURL = 'https://jsonplaceholder.typicode.com'
+
+if (import.meta.env.VITE_NODE_ENV === 'test') {
+  queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`
+}
+
+export const fetchPost = async (postId: string) => {
+  console.info(`Fetching post with id ${postId}...`)
+  const post = await axios
+    .get<PostType>(`${queryURL}/posts/${postId}`)
+    .then((r) => r.data)
+    .catch((err) => {
+      if (err.status === 404) {
+        throw new PostNotFoundError(`Post with id "${postId}" not found!`)
+      }
+      throw err
+    })
+
+  return post
+}
+
+export const fetchPosts = async () => {
+  console.info('Fetching posts...')
+  return axios
+    .get<Array<PostType>>(`${queryURL}/posts`)
+    .then((r) => r.data.slice(0, 10))
+}
diff --git a/e2e/vue-router/basic-vue-query-file-based/src/postsQueryOptions.tsx b/e2e/vue-router/basic-vue-query-file-based/src/postsQueryOptions.tsx
@@ -0,0 +1,7 @@
+import { queryOptions } from '@tanstack/vue-query'
+import { fetchPosts } from './posts'
+
+export const postsQueryOptions = queryOptions({
+  queryKey: ['posts'],
+  queryFn: () => fetchPosts(),
+})