TanStack · birkskyum · Mar 19, 2025 · Mar 19, 2025 · Mar 21, 2025 · Mar 21, 2025
diff --git a/e2e/vue-router/basic-file-based-jsx/eslint.config.js b/e2e/vue-router/basic-file-based-jsx/eslint.config.js
@@ -0,0 +1,49 @@
+import js from '@eslint/js'
+import typescript from '@typescript-eslint/eslint-plugin'
+import typescriptParser from '@typescript-eslint/parser'
+import vue from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+
+export default [
+  js.configs.recommended,
+  ...vue.configs['flat/recommended'],
+  {
+    files: ['**/*.{js,jsx,ts,tsx,vue}'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: typescriptParser,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescript,
+      vue,
+    },
+    rules: {
+      // Vue specific rules
+      'vue/multi-word-component-names': 'off',
+      'vue/no-unused-vars': 'error',
+
+      // TypeScript rules
+      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-explicit-any': 'warn',
+
+      // General rules
+      'no-unused-vars': 'off', // Let TypeScript handle this
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: typescriptParser,
+      },
+    },
+  },
+]
diff --git a/e2e/vue-router/basic-file-based-jsx/index.html b/e2e/vue-router/basic-file-based-jsx/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/e2e/vue-router/basic-file-based-jsx/package.json b/e2e/vue-router/basic-file-based-jsx/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "tanstack-router-e2e-vue-basic-file-based-jsx",
+  "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/router-plugin": "workspace:^",
+    "@tanstack/vue-router": "workspace:^",
+    "@tanstack/vue-router-devtools": "workspace:^",
+    "@tanstack/zod-adapter": "workspace:^",
+    "postcss": "^8.5.1",
+    "redaxios": "^0.5.1",
+    "tailwindcss": "^4.1.15",
+    "vue": "^3.5.16",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@playwright/test": "^1.50.1",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "eslint-plugin-vue": "^9.33.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^3.1.5"
+  }
+}
diff --git a/e2e/vue-router/basic-file-based-jsx/playwright.config.ts b/e2e/vue-router/basic-file-based-jsx/playwright.config.ts
@@ -0,0 +1,41 @@
+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_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} pnpm build && VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${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-file-based-jsx/postcss.config.mjs b/e2e/vue-router/basic-file-based-jsx/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/EditingAComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/components/EditingAComponent.tsx
@@ -0,0 +1,41 @@
+import { ref, defineComponent } from 'vue'
+import { useBlocker, useNavigate } from '@tanstack/vue-router'
+
+export const EditingAComponent = defineComponent({
+  setup() {
+    const navigate = useNavigate()
+    const input = ref('')
+
+    const blocker = useBlocker({
+      shouldBlockFn: ({ next }) => {
+        if (next.fullPath === '/editing-b' && input.value.length > 0) {
+          return true
+        }
+        return false
+      },
+      withResolver: true,
+    })
+
+    return () => (
+      <div>
+        <h1>Editing A</h1>
+        <label>
+          Enter your name:
+          <input
+            name="input"
+            value={input.value}
+            onInput={(e) =>
+              (input.value = (e.target as HTMLInputElement).value)
+            }
+          />
+        </label>
+        <button onClick={() => navigate({ to: '/editing-b' })}>
+          Go to next step
+        </button>
+        {blocker.value.status === 'blocked' && (
+          <button onClick={() => blocker.value.proceed?.()}>Proceed</button>
+        )}
+      </div>
+    )
+  },
+})
diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/EditingBComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/components/EditingBComponent.tsx
@@ -0,0 +1,34 @@
+import { ref, toValue, defineComponent } from 'vue'
+import { useBlocker, useNavigate } from '@tanstack/vue-router'
+
+export const EditingBComponent = defineComponent({
+  setup() {
+    const navigate = useNavigate()
+    const input = ref('')
+
+    const blocker = useBlocker({
+      shouldBlockFn: () => !!toValue(input),
+      withResolver: true,
+    })
+
+    return () => (
+      <div>
+        <h1>Editing B</h1>
+        <label>
+          Enter your name:
+          <input
+            name="input"
+            value={input.value}
+            onInput={(e) =>
+              (input.value = (e.target as HTMLInputElement).value)
+            }
+          />
+        </label>
+        <button onClick={() => navigate({ to: '/editing-a' })}>Go back</button>
+        {blocker.value.status === 'blocked' && (
+          <button onClick={() => blocker.value.proceed?.()}>Proceed</button>
+        )}
+      </div>
+    )
+  },
+})
diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/NotFoundComponent.vue b/e2e/vue-router/basic-file-based-jsx/src/components/NotFoundComponent.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Link } from '@tanstack/vue-router'
+</script>
+
+<template>
+  <div>
+    <p>This is the notFoundComponent configured on root route</p>
+    <Link to="/">Start Over</Link>
+  </div>
+</template>
diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/components/NotRemountDepsComponent.tsx
@@ -0,0 +1,37 @@
+import { ref, onMounted, defineComponent } from 'vue'
+import { useSearch, useNavigate } from '@tanstack/vue-router'
+
+export const NotRemountDepsComponent = defineComponent({
+  setup() {
+    // Component-scoped ref - will be recreated on component remount
+    const mounts = ref(0)
+    const search = useSearch({ from: '/notRemountDeps' })
+    const navigate = useNavigate()
+
+    onMounted(() => {
+      mounts.value++
+    })
+
+    return () => (
+      <div class="p-2">
+        <button
+          onClick={() =>
+            navigate({
+              to: '/notRemountDeps',
+              search: {
+                searchParam: Math.random().toString(36).substring(2, 8),
+              },
+            })
+          }
+        >
+          Regenerate search param
+        </button>
+
+        <div>Search: {search.value.searchParam}</div>
+        <div data-testid="component-mounts">
+          Page component mounts: {mounts.value}
+        </div>
+      </div>
+    )
+  },
+})
diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/PostErrorComponent.vue b/e2e/vue-router/basic-file-based-jsx/src/components/PostErrorComponent.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ErrorComponent } from '@tanstack/vue-router'
+import type { ErrorComponentProps } from '@tanstack/vue-router'
+
+defineProps<ErrorComponentProps>()
+</script>
+
+<template>
+  <ErrorComponent :error="error" />
+</template>
diff --git a/e2e/vue-router/basic-file-based-jsx/src/components/RemountDepsComponent.tsx b/e2e/vue-router/basic-file-based-jsx/src/components/RemountDepsComponent.tsx
@@ -0,0 +1,38 @@
+import { ref, onMounted, defineComponent } from 'vue'
+import { useSearch, useNavigate } from '@tanstack/vue-router'
+
+// Module-scoped ref to persist across component remounts
+const mounts = ref(0)
+
+export const RemountDepsComponent = defineComponent({
+  setup() {
+    const search = useSearch({ from: '/remountDeps' })
+    const navigate = useNavigate()
+
+    onMounted(() => {
+      mounts.value++
+    })
+
+    return () => (
+      <div class="p-2">
+        <button
+          onClick={() =>
+            navigate({
+              to: '/remountDeps',
+              search: {
+                searchParam: Math.random().toString(36).substring(2, 8),
+              },
+            })
+          }
+        >
+          Regenerate search param
+        </button>
+
+        <div>Search: {search.value.searchParam}</div>
+        <div data-testid="component-mounts">
+          Page component mounts: {mounts.value}
+        </div>
+      </div>
+    )
+  },
+})