Vue router RFC #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 multiple vue files like this:

File-Based Routing Conventions

Suffix/Pattern	Purpose
`.route.ts`	Route configuration (loader, validateSearch, head, etc.)
`.component.vue`	The component rendered for the route
`.errorComponent.vue`	Error boundary component for the route
`.notFoundComponent.vue`	Not found component for the route
`.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

Examples from e2e/vue-router/basic-file-routes/

src/routes/
├── __root.ts                   # Root route config
├── __root.component.vue        # Root layout component
├── __root.notFoundComponent.vue # Global not found component
├── index.route.ts              # "/" route config
├── index.component.vue         # "/" component
├── posts.route.ts              # "/posts" route config
├── posts.component.vue         # "/posts" layout component
├── posts.index.component.vue   # "/posts" index component
├── posts.$postId.route.ts      # "/posts/:postId" route config
├── posts.$postId.component.vue # "/posts/:postId" component
├── posts.$postId.errorComponent.vue  # Error boundary for post
├── posts_.$postId.edit.route.ts      # "/posts/:postId/edit" (unnested)
├── (group)/                    # Route group (no URL impact)
│   ├── _layout.route.ts        # Layout for group
│   ├── _layout.component.vue
│   └── inside.component.vue    # "/inside"
└── 대한민국.component.vue        # Unicode routes supported

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

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

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

✨ Finishing touches

🧪 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 937ea6c

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

☁️ Nx Cloud last updated this comment at 2025-11-30 02:22:35 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: 937ea6c

The previous change to inferFullPath incorrectly affected layout routes by returning '/' for their fullPath instead of ''. This broke the FileRoutesByTo and FileRoutesByFullPath type mappings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Updated TypeScript test versions from ts53-ts58 to ts54-ts59 - Fixed description to say "Vue applications" instead of "Solid" - Changed keyword from "react" to "vue" - Removed "solid" export condition - Updated build script to just "vite build" (no tsc) - Updated dependencies to match react-router-devtools pattern - Added @tanstack/router-core as optional peer dependency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

The root index route was being excluded from FileRoutesByTo because inferFullPath returned empty string instead of '/'. The fix checks if fullPath equals '/' (after removing layout segments) and preserves it. This allows `<Link to="/">` to work correctly in components. Updated snapshots for route-groups and nested-route-groups-with-layouts-before-physical tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

birkskyum added 30 commits November 29, 2025 04:20

first pass

dc37def

calling .value on refs

b6f1635

use template

4f94114

more work on jsx

55bca62

fix routerprovider type test

3ee477d

fix matches type test

edac4ce

fix link type test

df90df5

cleanup additionalProps

76a6a21

align vue to solid/react

2e5edbc

work on routerContext

03dd20f

use getRouterContext

0ae9e6d

vue example

4673c12

work on devtools

4cbc175

less noisy catch boundary

f42dcd3

working devtools

45585fb

add the devtools panel

09e5b9e

fix loading of posts

a3fe721

add vue to router-plugin

ee8455b

add basic-file-based-jsx

c09dac1

.value instead of ()

33893c8

remove double dash

b45910a

fix import source

d89c62d

fix import source

bc62ad2

lockfile

5f6d7bb

fix lint issues

f0f9dd5

add hybrid file based example

0cf8c76

add @testing-library/jest-dom

992b377

lockfile

8e8d739

make build work again

60edbc0

work on transitioner

10c070a

birkskyum added 16 commits November 29, 2025 14:53

work on matches

6cffe6b

fix link

f81d534

fix catch

d775ad1

fix catch boundary

5fe28ed

basic e2e

aceedf0

view transition

3ac0c5f

enable view trasntision

120682e

import vue in file based

a0708d8

use new syntax

f39d153

use new comp system

f3d10a8

readme

82b723c

allow __root.component and __root.notFoundComponent

1ca81d9

add missing postcss

1c06ca3

auto wire root

3c33703

keep / route in manifest

039d1f5

fix import order

f177384

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

birkskyum and others added 9 commits November 30, 2025 02:37

store update

b404f78

lint

058e917

lint

604cc3c

fix devtools

1cba234

fix route generator root link

a8546bc

lockfile

937ea6c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Vue router RFC #5997

Vue router RFC #5997

birkskyum commented Nov 30, 2025

Uh oh!

coderabbitai bot commented Nov 30, 2025

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Vue router RFC #5997

Are you sure you want to change the base?

Vue router RFC #5997

Conversation

birkskyum commented Nov 30, 2025

File-Based Routing Conventions

Examples from e2e/vue-router/basic-file-routes/

Uh oh!

coderabbitai bot commented Nov 30, 2025

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nx-cloud bot commented Nov 30, 2025 •

edited

Loading

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

edited

Loading