Vue router #5997

birkskyum · 2025-11-30T01:13:55Z

Since a Vue single-file component (SFC) only can export one component, and most tanstack router routes export multiple (main component, error compoentn, not found component etc.) the iteration here uses either JSX or multiple vue files like this:

File-Based Routing Conventions

optional vue-specific route files

Suffix/Pattern	Purpose
`.component.vue`	The component rendered for the route
`.errorComponent.vue`	Error boundary component for the route
`.notFoundComponent.vue`	Not found component for the route
`.pendingComponent.vue`	Pending component for the route

existing

Suffix/Pattern	Purpose
`.ts`	Route configuration (loader, validateSearch, head, etc.)
`.lazy.ts`	Lazy-loaded route configuration
`_layout` prefix	Layout routes that wrap child routes
`_` suffix (e.g., `posts_.$postId`)	Unnested routes (break out of parent layout)
`(groupName)` directory	Route groups (organizational, don't affect URL)
`$param`	Dynamic route parameters

coderabbitai · 2025-11-30T01:14:00Z

Important

Review skipped

More than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review.

193 files out of 300 files are above the max files limit of 100. Please upgrade to Pro plan to get higher limits.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch vue-router

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2025-11-30T01:14:29Z

View your CI Pipeline Execution ↗ for commit b3eac9e

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	49s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-03 04:31:41 UTC

pkg-pr-new · 2025-11-30T01:17:56Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5997

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5997

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5997

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5997

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5997

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5997

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5997

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5997

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5997

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5997

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5997

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5997

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5997

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5997

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5997

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5997

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5997

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5997

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5997

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5997

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5997

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5997

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5997

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5997

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5997

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5997

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5997

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5997

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5997

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5997

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5997

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5997

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5997

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5997

@tanstack/vue-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router@5997

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-devtools@5997

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5997

commit: b3eac9e

SeanCassiere · 2025-12-05T22:29:46Z

packages/vue-router-devtools/README.md

@@ -0,0 +1,5 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=d988eb79-b0fc-4a2b-8514-6a1ab932d188" />
+
+# TanStack Solid Router Devtools


Suggested change

# TanStack Solid Router Devtools

# TanStack Vue Router Devtools

SeanCassiere · 2025-12-05T22:31:38Z

packages/vue-router-devtools/tsconfig.build.json

+    "declaration": true,
+    "sourceMap": true,
+    "paths": {
+      "@tanstack/router-devtools-core": ["../../router-devtools-core/src"]


Is this necessary? Or just for initial dev?

SeanCassiere · 2025-12-05T22:34:45Z

packages/vue-router/src/ScrollRestoration.tsx

+/**
+ * @deprecated use createRouter's `scrollRestoration` option instead
+ */
+export function ScrollRestoration(_props: ScrollRestorationOptions) {


Do we need to provide this component?

github-actions bot added package: router-plugin package: router-generator labels Nov 30, 2025

birkskyum changed the title ~~Vue router RFC~~ Vue router Dec 3, 2025

birkskyum marked this pull request as ready for review December 3, 2025 02:55

birkskyum added 23 commits December 3, 2025 05:24

first pass

b50dee0

calling .value on refs

6608e6e

use template

d8d874a

more work on jsx

3215eff

fix routerprovider type test

1f38448

fix matches type test

e009a5f

fix link type test

074f2b5

cleanup additionalProps

88a6951

align vue to solid/react

0b90bad

work on routerContext

a5bbabe

use getRouterContext

d9e5be1

vue example

bedf4de

work on devtools

ad8ad0f

less noisy catch boundary

c7b80d8

working devtools

5e297af

add the devtools panel

ee64791

fix loading of posts

f377449

add vue to router-plugin

6b07240

add basic-file-based-jsx

9990ed6

.value instead of ()

cca11da

remove double dash

3a26545

fix import source

86e2886

fix import source

9674059

birkskyum and others added 27 commits December 3, 2025 05:25

dd vue linting

6f34695

allow vue component in types

2d416ad

use Vue.Component

8bfdf1b

use vueComponent wrapper

c904d8a

structural matching

68dc497

add vue sfc for demonstration

e076142

fix e2e

f1ed258

reset snapshots

ea61216

dont use .route.ts syntax

f391f46

clen utils

517d6d7

update vue examples

8591874

add vue logo

64a1c2a

add eslint file

8a9f13e

adjust examples

e3e17c9

lockfile

2fdbafd

add vue plugin

7a0cb52

fix e2e

9d6d5c5

remove redundant files

920ae00

vue-tsc

9c221a5

ci: apply automated fixes

0ffbcf6

add to publish

af74e8e

fix e2e

7213983

ci: apply automated fixes

73fc4dc

add vue-router-devtools to publish

852c887

use workspace for example until first public release

94f6955

cleanup lock

126abb9

fix e2e

51c15a5

birkskyum force-pushed the vue-router branch from ce11f53 to 51c15a5 Compare December 3, 2025 04:26

use workspace until public release

b3eac9e

SeanCassiere reviewed Dec 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Vue router #5997

Vue router #5997

birkskyum commented Nov 30, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 30, 2025 •

edited

Loading

Review skipped

Uh oh!

nx-cloud bot commented Nov 30, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Nov 30, 2025 •

edited

Loading

Uh oh!

SeanCassiere Dec 5, 2025

Uh oh!

SeanCassiere Dec 5, 2025

Uh oh!

SeanCassiere Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -0,0 +1,5 @@
		<img src="https://static.scarf.sh/a.png?x-pxid=d988eb79-b0fc-4a2b-8514-6a1ab932d188" />

		# TanStack Solid Router Devtools

	# TanStack Solid Router Devtools
	# TanStack Vue Router Devtools

Uh oh!

Vue router #5997

Are you sure you want to change the base?

Vue router #5997

Conversation

birkskyum commented Nov 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File-Based Routing Conventions

Uh oh!

coderabbitai bot commented Nov 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

nx-cloud bot commented Nov 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Nov 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SeanCassiere Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

SeanCassiere Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

SeanCassiere Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

birkskyum commented Nov 30, 2025 •

edited

Loading

coderabbitai bot commented Nov 30, 2025 •

edited

Loading

nx-cloud bot commented Nov 30, 2025 •

edited

Loading

pkg-pr-new bot commented Nov 30, 2025 •

edited

Loading