@tanstack/vue-router

TanStack Vue Router

🤖 Type-safe router w/ built-in caching & URL state management for Vue!

Visit tanstack.com/router for docs, guides, API and more!

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/basic-file-routes/ project

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