Skip to content

feat: add Vue Router 5 typed routes for TypeScript projects#957

Open
MaBbKhawaja wants to merge 1 commit intovuejs:mainfrom
MaBbKhawaja:feat/router-typed-routes
Open

feat: add Vue Router 5 typed routes for TypeScript projects#957
MaBbKhawaja wants to merge 1 commit intovuejs:mainfrom
MaBbKhawaja:feat/router-typed-routes

Conversation

@MaBbKhawaja
Copy link

Summary

Closes #920

When both TypeScript and Vue Router are selected, the scaffolded project now includes Vue Router 5's typed routes configuration out of the box:

  • Adds vueRouter() from vue-router/vite as a Vite plugin (using lowercase naming per Vite conventions)
  • Configures tsconfig.app.json with typed-router.d.ts include, rootDir, and Volar plugins (sfc-typed-router, sfc-route-blocks)
  • Adds typed-router.d.ts to .gitignore (generated file)

This does not add file-based/auto routes — it only enables typed routes for the existing manual route definitions, as discussed in the issue.

Non-TypeScript router projects are unaffected.

Generated output (TypeScript + Router)

vite.config.ts gains:

import vueRouter from 'vue-router/vite'
// ...
plugins: [vueRouter(), vue(), vueDevTools()]

tsconfig.app.json gains:

{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "typed-router.d.ts"],
  "compilerOptions": { "rootDir": "." },
  "vueCompilerOptions": {
    "plugins": ["vue-router/volar/sfc-typed-router", "vue-router/volar/sfc-route-blocks"]
  }
}

Test plan

  • Run pnpm run snapshot and verify TypeScript + Router snapshots include the new vite plugin and tsconfig changes
  • Run pnpm run test to confirm existing tests pass
  • Scaffold a project with --typescript --router and verify typed routes work
  • Scaffold a project with --router (no TS) and verify it's unaffected

…ects

When both TypeScript and Vue Router are selected, the scaffolded project
now includes the vue-router/vite plugin and Volar plugins for typed routes
out of the box, enabling type-safe route names and automatic useRoute() typing.

Closes vuejs#920
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Vue Router 5 TypeScript/Vite Configuration

1 participant