diff --git a/package.json b/package.json
index 00d84562d..71eeb529f 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,12 @@
       "import": "./dist/data-loaders/pinia-colada.js",
       "require": "./dist/data-loaders/pinia-colada.cjs"
     },
+    "./volar/sfc-route-blocks": {
+      "require": "./dist/volar/sfc-route-blocks.cjs"
+    },
+    "./volar/sfc-typed-router": {
+      "require": "./dist/volar/sfc-typed-router.cjs"
+    },
     "./client": {
       "types": "./client.d.ts"
     }
@@ -134,6 +140,7 @@
   "dependencies": {
     "@babel/types": "^7.26.8",
     "@vue-macros/common": "^1.16.1",
+    "@vue/language-core": "^2.2.4",
     "ast-walker-scope": "^0.6.2",
     "chokidar": "^4.0.3",
     "fast-glob": "^3.3.3",
@@ -141,6 +148,7 @@
     "local-pkg": "^1.0.0",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
+    "muggle-string": "^0.4.1",
     "pathe": "^2.0.2",
     "picomatch": "^4.0.2",
     "scule": "^1.3.0",
@@ -165,7 +173,6 @@
     "@types/picomatch": "^3.0.2",
     "@vitest/coverage-v8": "^3.0.5",
     "@vitest/ui": "^3.0.5",
-    "@vue/language-core": "^2.2.4",
     "@vue/test-utils": "^2.4.6",
     "chalk": "^5.4.1",
     "conventional-changelog-cli": "^5.0.0",
diff --git a/playground/src/pages/@[profileId].vue b/playground/src/pages/@[profileId].vue
index 9237c490d..fed806fda 100644
--- a/playground/src/pages/@[profileId].vue
+++ b/playground/src/pages/@[profileId].vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Alias } from 'vite'
-const route = useRoute('/@[profileId]')
+const route = useRoute()
 
 const route2 = definePage<{ thing: string; alias: Alias }>({
   meta: {
diff --git a/playground/src/pages/[...path]+.vue b/playground/src/pages/[...path]+.vue
index aa2454fc6..3284ca7a5 100644
--- a/playground/src/pages/[...path]+.vue
+++ b/playground/src/pages/[...path]+.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
 
-const route = useRoute('/[...path]+')
+const route = useRoute()
 </script>
 
 <template>
@@ -11,7 +11,7 @@ const route = useRoute('/[...path]+')
   </main>
 </template>
 
-<route>
+<route lang="json">
 {
   "props": true
 }
diff --git a/playground/src/pages/[...path].vue b/playground/src/pages/[...path].vue
index e8bf8e24e..7efacb197 100644
--- a/playground/src/pages/[...path].vue
+++ b/playground/src/pages/[...path].vue
@@ -1,13 +1,11 @@
 <template>
   <main>
     <h1>Not Found</h1>
-    <p>
-      {{ $route.name === '/[...path]' && $route.params.path }} does not exist.
-    </p>
+    <p>{{ $route.params.path }} does not exist.</p>
   </main>
 </template>
 
-<route>
+<route lang="json">
 {
   "props": true
 }
diff --git a/playground/src/pages/[name].vue b/playground/src/pages/[name].vue
index 1631b08b9..b97b87a80 100644
--- a/playground/src/pages/[name].vue
+++ b/playground/src/pages/[name].vue
@@ -49,6 +49,7 @@ import {
   onBeforeRouteUpdate,
   type RouteLocationNormalized,
 } from 'vue-router'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 
 const thing = 'THING'
 
@@ -90,8 +91,8 @@ if (routeLocation.name === '/[name]') {
   routeLocation.params.id
 }
 
-const route = useRoute('/[name]')
-const anyRoute = useRoute()
+const route = useRoute()
+const anyRoute = useRoute<keyof RouteNamedMap>()
 if (anyRoute.name == '/articles/[id]') {
   console.log('anyRoute.params', anyRoute.params.id)
 }
@@ -133,7 +134,7 @@ definePage({
 
 <template>
   <main>
-    <h1>Param: {{ $route.name === '/[name]' && $route.params.name }}</h1>
+    <h1>Param: {{ $route.params.name }}</h1>
     <h2>Param: {{ route.params.name }}</h2>
     <p v-show="false">{{ thing }}</p>
     <p v-if="isLoading">Loading user...</p>
diff --git a/playground/src/pages/custom-name-and-path.vue b/playground/src/pages/custom-name-and-path.vue
index 59a93096f..bc63ae263 100644
--- a/playground/src/pages/custom-name-and-path.vue
+++ b/playground/src/pages/custom-name-and-path.vue
@@ -1,6 +1,5 @@
 <route lang="json">
 {
-  "$schema": "https://raw.githubusercontent.com/posva/unplugin-vue-router/main/route.schema.json",
   "name": "the most rebel",
   "path": "/most-rebel",
   "props": true
@@ -10,3 +9,7 @@
 <!-- For some reason, a local link doesn't work... -->
 
 <template>custom names</template>
+
+<script setup lang="ts">
+useRoute().name satisfies 'the most rebel'
+</script>
diff --git a/playground/src/pages/deep/nesting/works/custom-name-and-path.vue b/playground/src/pages/deep/nesting/works/custom-name-and-path.vue
index 7a346ab9c..167bb16db 100644
--- a/playground/src/pages/deep/nesting/works/custom-name-and-path.vue
+++ b/playground/src/pages/deep/nesting/works/custom-name-and-path.vue
@@ -1,6 +1,5 @@
 <route lang="json">
 {
-  "$schema": "https://raw.githubusercontent.com/posva/unplugin-vue-router/main/route.schema.json",
   "name": "deep the most rebel",
   "path": "/deep-most-rebel"
 }
diff --git a/playground/src/pages/named-views/parent.vue b/playground/src/pages/named-views/parent.vue
new file mode 100644
index 000000000..1c6934a29
--- /dev/null
+++ b/playground/src/pages/named-views/parent.vue
@@ -0,0 +1,7 @@
+<template>
+  <RouterView name="default" />
+  <RouterView name="a" />
+  <RouterView name="b" />
+  <!-- @vue-expect-error TODO: -->
+  <RouterView name="c" />
+</template>
diff --git a/playground/src/pages/named-views/parent/index.vue b/playground/src/pages/named-views/parent/index.vue
new file mode 100644
index 000000000..fe4f2257e
--- /dev/null
+++ b/playground/src/pages/named-views/parent/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>Default</h1>
+</template>
diff --git a/playground/src/pages/named-views/parent/index@a.vue b/playground/src/pages/named-views/parent/index@a.vue
new file mode 100644
index 000000000..17c471c6c
--- /dev/null
+++ b/playground/src/pages/named-views/parent/index@a.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>A</h1>
+</template>
diff --git a/playground/src/pages/named-views/parent/index@b.vue b/playground/src/pages/named-views/parent/index@b.vue
new file mode 100644
index 000000000..d78b64064
--- /dev/null
+++ b/playground/src/pages/named-views/parent/index@b.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>B</h1>
+</template>
diff --git a/playground/src/pages/partial-[name].vue b/playground/src/pages/partial-[name].vue
index 6f5baff23..346d7fa72 100644
--- a/playground/src/pages/partial-[name].vue
+++ b/playground/src/pages/partial-[name].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const route = useRoute('/partial-[name]')
+const route = useRoute()
 </script>
 
 <template>
diff --git a/playground/src/pages/test-[a-id].vue b/playground/src/pages/test-[a-id].vue
index f6c9726b0..ab07a3a57 100644
--- a/playground/src/pages/test-[a-id].vue
+++ b/playground/src/pages/test-[a-id].vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
-const route = useRoute('/test-[a-id]')
+const route = useRoute()
 </script>
 
 <template>
diff --git a/playground/src/pages/users/[id].vue b/playground/src/pages/users/[id].vue
index 1644a1d4c..de1284678 100644
--- a/playground/src/pages/users/[id].vue
+++ b/playground/src/pages/users/[id].vue
@@ -41,7 +41,7 @@ export const useUserData = defineBasicLoader(
 </script>
 
 <script lang="ts" setup>
-const route = useRoute('/users/[id]')
+const route = useRoute()
 
 const { data: user, isLoading, error } = useUserData()
 const { data: user2 } = useOldData()
diff --git a/playground/src/pages/users/colada-loader.[id].vue b/playground/src/pages/users/colada-loader.[id].vue
index a0878a647..d979d1777 100644
--- a/playground/src/pages/users/colada-loader.[id].vue
+++ b/playground/src/pages/users/colada-loader.[id].vue
@@ -9,7 +9,7 @@ definePage({
   },
 })
 
-const route = useRoute('/users/colada-loader.[id]')
+const route = useRoute()
 
 const pinia = getActivePinia()!
 function copy() {
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
index 7d5fdc430..3bfd00252 100644
--- a/playground/tsconfig.json
+++ b/playground/tsconfig.json
@@ -35,7 +35,8 @@
   },
   "vueCompilerOptions": {
     "plugins": [
-      "../volar/index.cjs"
+      "unplugin-vue-router/volar/sfc-route-blocks",
+      "unplugin-vue-router/volar/sfc-typed-router"
     ]
   },
   "references": [
diff --git a/playground/typed-router.d.ts b/playground/typed-router.d.ts
index 1cce685e1..4d9fc127b 100644
--- a/playground/typed-router.d.ts
+++ b/playground/typed-router.d.ts
@@ -55,6 +55,8 @@ declare module 'vue-router/auto-routes' {
     '/n-[[n]]/': RouteRecordInfo<'/n-[[n]]/', '/n-:n?', { n?: ParamValueZeroOrOne<true> }, { n?: ParamValueZeroOrOne<false> }>,
     '/n-[[n]]/[[more]]+/': RouteRecordInfo<'/n-[[n]]/[[more]]+/', '/n-:n?/:more*', { n?: ParamValueZeroOrOne<true>, more?: ParamValueZeroOrMore<true> }, { n?: ParamValueZeroOrOne<false>, more?: ParamValueZeroOrMore<false> }>,
     '/n-[[n]]/[[more]]+/[final]': RouteRecordInfo<'/n-[[n]]/[[more]]+/[final]', '/n-:n?/:more*/:final', { n?: ParamValueZeroOrOne<true>, more?: ParamValueZeroOrMore<true>, final: ParamValue<true> }, { n?: ParamValueZeroOrOne<false>, more?: ParamValueZeroOrMore<false>, final: ParamValue<false> }>,
+    '/named-views/parent': RouteRecordInfo<'/named-views/parent', '/named-views/parent', Record<never, never>, Record<never, never>>,
+    '/named-views/parent/': RouteRecordInfo<'/named-views/parent/', '/named-views/parent', Record<never, never>, Record<never, never>>,
     '/nested-group/(group)': RouteRecordInfo<'/nested-group/(group)', '/nested-group', Record<never, never>, Record<never, never>>,
     '/nested-group/(nested-group-first-level)/(nested-group-deep)/nested-group-deep-child': RouteRecordInfo<'/nested-group/(nested-group-first-level)/(nested-group-deep)/nested-group-deep-child', '/nested-group/nested-group-deep-child', Record<never, never>, Record<never, never>>,
     '/nested-group/(nested-group-first-level)/nested-group-first-level-child': RouteRecordInfo<'/nested-group/(nested-group-first-level)/nested-group-first-level-child', '/nested-group/nested-group-first-level-child', Record<never, never>, Record<never, never>>,
@@ -73,4 +75,253 @@ declare module 'vue-router/auto-routes' {
     '/vuefire-tests/get-doc': RouteRecordInfo<'/vuefire-tests/get-doc', '/vuefire-tests/get-doc', Record<never, never>, Record<never, never>>,
     '/with-extension': RouteRecordInfo<'/with-extension', '/with-extension', Record<never, never>, Record<never, never>>,
   }
+
+  /**
+   * File path to route names map by unplugin-vue-router
+   */
+  export interface RouteFileInfoMap {
+    'src/pages/(test-group).vue': {
+      routes: '/(test-group)' | '/(test-group)/test-group-child',
+      views: 'default',
+    },
+    'src/pages/(test-group)/test-group-child.vue': {
+      routes: '/(test-group)/test-group-child',
+      views: never,
+    },
+    'src/pages/index.vue': {
+      routes: 'home',
+      views: never,
+    },
+    'src/pages/index@named.vue': {
+      routes: 'home',
+      views: never,
+    },
+    'src/pages/[name].vue': {
+      routes: '/[name]',
+      views: never,
+    },
+    'src/pages/[...path].vue': {
+      routes: '/[...path]',
+      views: never,
+    },
+    'src/pages/[...path]+.vue': {
+      routes: '/[...path]+',
+      views: never,
+    },
+    'src/pages/@[profileId].vue': {
+      routes: '/@[profileId]',
+      views: never,
+    },
+    'src/pages/about.vue': {
+      routes: '/about',
+      views: never,
+    },
+    'src/pages/about.extra.nested.vue': {
+      routes: '/about.extra.nested',
+      views: never,
+    },
+    'src/pages/articles.vue': {
+      routes: '/articles' | '/articles/' | '/articles/[id]' | '/articles/[id]+',
+      views: 'default',
+    },
+    'src/pages/articles/index.vue': {
+      routes: '/articles/',
+      views: never,
+    },
+    'src/pages/articles/[id].vue': {
+      routes: '/articles/[id]',
+      views: never,
+    },
+    'src/pages/articles/[id]+.vue': {
+      routes: '/articles/[id]+',
+      views: never,
+    },
+    'src/pages/custom-definePage.vue': {
+      routes: '/custom-definePage',
+      views: never,
+    },
+    'src/pages/custom-name.vue': {
+      routes: 'a rebel',
+      views: never,
+    },
+    'src/pages/deep/nesting/works/too.vue': {
+      routes: '/custom/page',
+      views: never,
+    },
+    'src/pages/deep/nesting/works/[[files]]+.vue': {
+      routes: '/deep/nesting/works/[[files]]+',
+      views: never,
+    },
+    'src/pages/deep/nesting/works/too.vue': {
+      routes: '/deep/nesting/works/at-root-but-from-nested',
+      views: never,
+    },
+    'src/pages/deep/nesting/works/custom-name-and-path.vue': {
+      routes: 'deep the most rebel',
+      views: never,
+    },
+    'src/pages/deep/nesting/works/custom-path.vue': {
+      routes: '/deep/nesting/works/custom-path',
+      views: never,
+    },
+    'src/pages/deep/nesting/works/custom-name.vue': {
+      routes: 'deep a rebel',
+      views: never,
+    },
+    'src/docs/real/index.md': {
+      routes: '/docs/[lang]/real/',
+      views: never,
+    },
+    'src/features/feature-1/pages/index.vue': {
+      routes: '/feature-1/',
+      views: never,
+    },
+    'src/features/feature-1/pages/about.vue': {
+      routes: '/feature-1/about',
+      views: never,
+    },
+    'src/features/feature-2/pages/index.vue': {
+      routes: '/feature-2/',
+      views: never,
+    },
+    'src/features/feature-2/pages/about.vue': {
+      routes: '/feature-2/about',
+      views: never,
+    },
+    'src/features/feature-3/pages/index.vue': {
+      routes: '/feature-3/',
+      views: never,
+    },
+    'src/features/feature-3/pages/about.vue': {
+      routes: '/feature-3/about',
+      views: never,
+    },
+    'src/pages/file(ignored-parentheses).vue': {
+      routes: '/file(ignored-parentheses)',
+      views: never,
+    },
+    'src/pages/index.vue': {
+      routes: '/from-root',
+      views: never,
+    },
+    'src/pages/group/(thing).vue': {
+      routes: '/group/(thing)',
+      views: never,
+    },
+    'src/pages/custom-name-and-path.vue': {
+      routes: 'the most rebel',
+      views: never,
+    },
+    'src/pages/multiple-[a]-[b]-params.vue': {
+      routes: '/multiple-[a]-[b]-params',
+      views: never,
+    },
+    'src/pages/my-optional-[[slug]].vue': {
+      routes: '/my-optional-[[slug]]',
+      views: never,
+    },
+    'src/pages/n-[[n]]/index.vue': {
+      routes: '/n-[[n]]/',
+      views: never,
+    },
+    'src/pages/n-[[n]]/[[more]]+/index.vue': {
+      routes: '/n-[[n]]/[[more]]+/',
+      views: never,
+    },
+    'src/pages/n-[[n]]/[[more]]+/[final].vue': {
+      routes: '/n-[[n]]/[[more]]+/[final]',
+      views: never,
+    },
+    'src/pages/named-views/parent.vue': {
+      routes: '/named-views/parent' | '/named-views/parent/',
+      views: 'default' | 'a' | 'b',
+    },
+    'src/pages/named-views/parent/index.vue': {
+      routes: '/named-views/parent/',
+      views: never,
+    },
+    'src/pages/named-views/parent/index@a.vue': {
+      routes: '/named-views/parent/',
+      views: never,
+    },
+    'src/pages/named-views/parent/index@b.vue': {
+      routes: '/named-views/parent/',
+      views: never,
+    },
+    'src/pages/nested-group/(group).vue': {
+      routes: '/nested-group/(group)',
+      views: never,
+    },
+    'src/pages/nested-group/(nested-group-first-level)/(nested-group-deep)/nested-group-deep-child.vue': {
+      routes: '/nested-group/(nested-group-first-level)/(nested-group-deep)/nested-group-deep-child',
+      views: never,
+    },
+    'src/pages/nested-group/(nested-group-first-level)/nested-group-first-level-child.vue': {
+      routes: '/nested-group/(nested-group-first-level)/nested-group-first-level-child',
+      views: never,
+    },
+    'src/pages/partial-[name].vue': {
+      routes: '/partial-[name]',
+      views: never,
+    },
+    'src/pages/custom-path.vue': {
+      routes: '/custom-path',
+      views: never,
+    },
+    'src/pages/test-[a-id].vue': {
+      routes: '/test-[a-id]',
+      views: never,
+    },
+    'src/pages/todos/index.vue': {
+      routes: '/todos/',
+      views: never,
+    },
+    'src/pages/users/index.vue': {
+      routes: '/users/',
+      views: never,
+    },
+    'src/pages/users/[id].vue': {
+      routes: '/users/[id]',
+      views: never,
+    },
+    'src/pages/users/[id].edit.vue': {
+      routes: '/users/[id].edit',
+      views: never,
+    },
+    'src/pages/users/colada-loader.[id].vue': {
+      routes: '/users/colada-loader.[id]',
+      views: never,
+    },
+    'src/pages/users/nested.route.deep.vue': {
+      routes: '/users/nested.route.deep',
+      views: never,
+    },
+    'src/pages/users/pinia-colada.[id].vue': {
+      routes: '/users/pinia-colada.[id]',
+      views: never,
+    },
+    'src/pages/users/query.[id].vue': {
+      routes: '/users/query.[id]',
+      views: never,
+    },
+    'src/pages/users/tq-query.[id].vue': {
+      routes: '/users/tq-query.[id]',
+      views: never,
+    },
+    'src/pages/vuefire-tests/get-doc.vue': {
+      routes: '/vuefire-tests/get-doc',
+      views: never,
+    },
+    'src/pages/with-extension.page.vue': {
+      routes: '/with-extension',
+      views: never,
+    },
+  }
+
+  /**
+   * Get a union of possible route names in a certain route component file
+   */
+  export type GetPossibleRouteNamesByFilePath<T extends string> = T extends keyof RouteFileInfoMap
+    ? RouteFileInfoMap[T]['routes']
+    : keyof import('vue-router/auto-routes').RouteNamedMap
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e215ea6f9..4c8d3302f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@vue-macros/common':
         specifier: ^1.16.1
         version: 1.16.1(vue@3.5.13(typescript@5.7.3))
+      '@vue/language-core':
+        specifier: ^2.2.4
+        version: 2.2.4(typescript@5.7.3)
       ast-walker-scope:
         specifier: ^0.6.2
         version: 0.6.2
@@ -35,6 +38,9 @@ importers:
       mlly:
         specifier: ^1.7.4
         version: 1.7.4
+      muggle-string:
+        specifier: ^0.4.1
+        version: 0.4.1
       pathe:
         specifier: ^2.0.2
         version: 2.0.2
@@ -78,9 +84,6 @@ importers:
       '@vitest/ui':
         specifier: ^3.0.5
         version: 3.0.5(vitest@3.0.5)
-      '@vue/language-core':
-        specifier: ^2.2.4
-        version: 2.2.4(typescript@5.7.3)
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
@@ -8283,7 +8286,7 @@ snapshots:
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
       magic-string: 0.30.17
-      postcss: 8.5.1
+      postcss: 8.5.3
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.13':
@@ -12577,7 +12580,7 @@ snapshots:
   vite@5.4.14(@types/node@22.13.1)(terser@5.39.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.5.1
+      postcss: 8.5.3
       rollup: 4.34.6
     optionalDependencies:
       '@types/node': 22.13.1
diff --git a/src/codegen/generateDTS.ts b/src/codegen/generateDTS.ts
index 02cba64c2..8b35320fa 100644
--- a/src/codegen/generateDTS.ts
+++ b/src/codegen/generateDTS.ts
@@ -1,12 +1,25 @@
 import { ts } from '../utils'
 
+/**
+ * Removes empty lines and indent by two spaces to match the rest of the file.
+ */
+function normalizeLines(code: string) {
+  return code
+    .split('\n')
+    .filter((line) => line.length !== 0)
+    .map((line) => '  ' + line)
+    .join('\n')
+}
+
 export function generateDTS({
   routesModule,
   routeNamedMap,
+  routeFileInfoMap,
 }: {
   vueRouterModule: string
   routesModule: string
   routeNamedMap: string
+  routeFileInfoMap: string
 }) {
   return ts`
 /* eslint-disable */
@@ -28,12 +41,19 @@ declare module '${routesModule}' {
   /**
    * Route name map generated by unplugin-vue-router
    */
-${routeNamedMap
-  // remove empty lines and indent by two spaces to match the rest of the file
-  .split('\n')
-  .filter((line) => line.length !== 0)
-  .map((line) => '  ' + line)
-  .join('\n')}
+${normalizeLines(routeNamedMap)}
+
+  /**
+   * File path to route names map by unplugin-vue-router
+   */
+${normalizeLines(routeFileInfoMap)}
+
+  /**
+   * Get a union of possible route names in a certain route component file
+   */
+  export type GetPossibleRouteNamesByFilePath<T extends string> = T extends keyof RouteFileInfoMap
+    ? RouteFileInfoMap[T]['routes']
+    : keyof import('${routesModule}').RouteNamedMap
 }
 `.trimStart()
 }
diff --git a/src/codegen/generateRouteFileInfoMap.spec.ts b/src/codegen/generateRouteFileInfoMap.spec.ts
new file mode 100644
index 000000000..0143b0b27
--- /dev/null
+++ b/src/codegen/generateRouteFileInfoMap.spec.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import { generateRouteFileInfoMap } from './generateRouteFileInfoMap'
+import { PrefixTree } from '../core/tree'
+import { resolveOptions } from '../options'
+
+const DEFAULT_OPTIONS = resolveOptions({})
+
+function formatExports(exports: string) {
+  return exports
+    .split('\n')
+    .filter((line) => line.length > 0)
+    .join('\n')
+}
+
+describe('generateRouteFileInfoMap', () => {
+  it('works with some paths at root', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+    tree.insert('index', 'src/pages/index.vue')
+    tree.insert('a', 'src/pages/a.vue')
+    tree.insert('b', 'src/pages/b.vue')
+    tree.insert('c', 'src/pages/c.vue')
+    expect(formatExports(generateRouteFileInfoMap(tree, { root: '' })))
+      .toMatchInlineSnapshot(`
+      "export interface RouteFileInfoMap {
+        'src/pages/index.vue': {
+          routes: '/',
+          views: never,
+        },
+        'src/pages/a.vue': {
+          routes: '/a',
+          views: never,
+        },
+        'src/pages/b.vue': {
+          routes: '/b',
+          views: never,
+        },
+        'src/pages/c.vue': {
+          routes: '/c',
+          views: never,
+        },
+      }"
+    `)
+  })
+
+  it('works with children', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+    tree.insert('parent', 'src/pages/parent.vue')
+    tree.insert('parent/child', 'src/pages/parent/child.vue')
+    expect(formatExports(generateRouteFileInfoMap(tree, { root: '' })))
+      .toMatchInlineSnapshot(`
+      "export interface RouteFileInfoMap {
+        'src/pages/parent.vue': {
+          routes: '/parent' | '/parent/child',
+          views: 'default',
+        },
+        'src/pages/parent/child.vue': {
+          routes: '/parent/child',
+          views: never,
+        },
+      }"
+    `)
+  })
+
+  it('works with named views', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+    tree.insert('parent', 'src/pages/parent.vue')
+    tree.insert('parent/child', 'src/pages/parent/child.vue')
+    tree.insert('parent/child@test', 'src/pages/parent/child@test.vue')
+    expect(formatExports(generateRouteFileInfoMap(tree, { root: '' })))
+      .toMatchInlineSnapshot(`
+      "export interface RouteFileInfoMap {
+        'src/pages/parent.vue': {
+          routes: '/parent' | '/parent/child',
+          views: 'default' | 'test',
+        },
+        'src/pages/parent/child.vue': {
+          routes: '/parent/child',
+          views: never,
+        },
+        'src/pages/parent/child@test.vue': {
+          routes: '/parent/child',
+          views: never,
+        },
+      }"
+    `)
+  })
+})
diff --git a/src/codegen/generateRouteFileInfoMap.ts b/src/codegen/generateRouteFileInfoMap.ts
new file mode 100644
index 000000000..5fc05a428
--- /dev/null
+++ b/src/codegen/generateRouteFileInfoMap.ts
@@ -0,0 +1,90 @@
+import { relative } from 'node:path'
+import type { PrefixTree, TreeNode } from '../core/tree'
+
+export type GenerateRouteFileInfoMapOptions = {
+  root: string
+}
+
+export function generateRouteFileInfoMap(
+  node: PrefixTree,
+  options: GenerateRouteFileInfoMapOptions
+): string {
+  if (!node.isRoot()) {
+    throw new Error('The provided node is not a root node')
+  }
+
+  return `export interface RouteFileInfoMap {
+${generateRouteFileInfoLines(node, options)}}`
+}
+
+function generateRouteFileInfoLines(
+  node: TreeNode,
+  options: GenerateRouteFileInfoMapOptions
+): string {
+  const children = node.children.size > 0 ? node.getSortedChildren() : null
+
+  const routeNamesUnion = recursiveGetRouteNames(node)
+    .map((name) => `'${name}'`)
+    .join(' | ')
+
+  const childrenNamedViewsUnion = children
+    ? Array.from(
+        new Set(
+          children
+            .map((child) => Array.from(child.value.components.keys()))
+            .flat()
+        )
+      )
+        .map((name) => `'${name}'`)
+        .join(' | ')
+    : null
+
+  return (
+    // if the node has a filePath, it's a component, it has a routeName and it should be
+    // referenced in the RouteFileInfoMap otherwise it should be skipped
+    // TODO: can we use `RouteNameWithChildren` from https://github.com/vuejs/router/pull/2475 here if merged?
+    Array.from(node.value.components.values())
+      .map((file) =>
+        generateRouteFileInfoEntry(
+          file,
+          { routes: routeNamesUnion, namedViews: childrenNamedViewsUnion },
+          options
+        )
+      )
+      .join('') +
+    (children
+      ?.map((child) => generateRouteFileInfoLines(child, options))
+      .join('\n') ?? '')
+  )
+}
+
+type GenerateRouteFileInfoEntryData = {
+  /** A union of possible route names in the route component file  */
+  routes: string
+  namedViews: string | null
+}
+
+function generateRouteFileInfoEntry(
+  file: string,
+  data: GenerateRouteFileInfoEntryData,
+  options: GenerateRouteFileInfoMapOptions
+): string {
+  const relativeFilePath = (file: string) =>
+    relative(options.root, file).replaceAll('\\', '/')
+
+  // TODO: check 'views' implementation
+  return `  '${relativeFilePath(file)}': {
+    routes: ${data.routes},
+    views: ${data.namedViews ?? 'never'},
+  },\n`
+}
+
+/**
+ * Gets the name of the provided node and all of its children
+ */
+function recursiveGetRouteNames(node: TreeNode): TreeNode['name'][] {
+  return [
+    node.name,
+    ...node.getSortedChildren().map((child) => recursiveGetRouteNames(child)),
+  ].flat()
+}
diff --git a/src/core/context.ts b/src/core/context.ts
index 5d9de314e..6ad8f0ac6 100644
--- a/src/core/context.ts
+++ b/src/core/context.ts
@@ -3,6 +3,7 @@ import { TreeNode, PrefixTree } from './tree'
 import { promises as fs } from 'fs'
 import { asRoutePath, ImportsMap, logTree, throttle } from './utils'
 import { generateRouteNamedMap } from '../codegen/generateRouteMap'
+import { generateRouteFileInfoMap } from '../codegen/generateRouteFileInfoMap'
 import { MODULE_ROUTES_PATH, MODULE_VUE_ROUTER_AUTO } from './moduleConstants'
 import { generateRouteRecord } from '../codegen/generateRouteRecords'
 import fg from 'fast-glob'
@@ -240,6 +241,9 @@ if (import.meta.hot) {
       vueRouterModule: MODULE_VUE_ROUTER_AUTO,
       routesModule: MODULE_ROUTES_PATH,
       routeNamedMap: generateRouteNamedMap(routeTree),
+      routeFileInfoMap: generateRouteFileInfoMap(routeTree, {
+        root,
+      }),
     })
   }
 
diff --git a/src/volar/entries/sfc-route-blocks.ts b/src/volar/entries/sfc-route-blocks.ts
new file mode 100644
index 000000000..1471b608b
--- /dev/null
+++ b/src/volar/entries/sfc-route-blocks.ts
@@ -0,0 +1,66 @@
+import { allCodeFeatures, type VueLanguagePlugin } from '@vue/language-core'
+import { replace, toString } from 'muggle-string'
+
+const plugin: VueLanguagePlugin = () => {
+  const routeBlockIdPrefix = 'route_'
+  const routeBlockIdRe = new RegExp(`^${routeBlockIdPrefix}(\\d+)$`)
+
+  return {
+    version: 2.1,
+    getEmbeddedCodes(_fileName, sfc) {
+      const embeddedCodes = []
+
+      // we add an embedded code for every route block we find with the same index as the block
+      for (let i = 0; i < sfc.customBlocks.length; i++) {
+        const block = sfc.customBlocks[i]!
+
+        // TODO:
+        // `<route>` blocks without `lang="json"` are still interpreted as text right now.
+        // See: https://github.com/vuejs/language-tools/issues/185#issuecomment-1173742726
+        // This seems to be because `custom_block_x` is still seen as txt, even though the corresponding `route_x` is json.
+        if (block.type === 'route') {
+          const lang = block.lang === 'txt' ? 'json' : block.lang
+          embeddedCodes.push({ id: `${routeBlockIdPrefix}${i}`, lang })
+        }
+      }
+
+      return embeddedCodes
+    },
+    resolveEmbeddedCode(_fileName, sfc, embeddedCode) {
+      const match = embeddedCode.id.match(routeBlockIdRe)
+
+      if (match) {
+        const i = parseInt(match[1]!)
+        const block = sfc.customBlocks[i]
+
+        // this shouldn't happen, but just in case
+        if (!block) {
+          return
+        }
+
+        embeddedCode.content.push([
+          block.content,
+          block.name,
+          0,
+          allCodeFeatures,
+        ])
+
+        if (embeddedCode.lang === 'json') {
+          const contentStr = toString(embeddedCode.content)
+          if (
+            contentStr.trim().startsWith('{') &&
+            !contentStr.includes('$schema')
+          ) {
+            replace(
+              embeddedCode.content,
+              '{',
+              '{\n  "$schema": "https://raw.githubusercontent.com/posva/unplugin-vue-router/main/route.schema.json",'
+            )
+          }
+        }
+      }
+    },
+  }
+}
+
+export default plugin
diff --git a/src/volar/entries/sfc-typed-router.ts b/src/volar/entries/sfc-typed-router.ts
new file mode 100644
index 000000000..52e731d7b
--- /dev/null
+++ b/src/volar/entries/sfc-typed-router.ts
@@ -0,0 +1,96 @@
+import { relative } from 'node:path'
+import type { VueLanguagePlugin } from '@vue/language-core'
+import { replaceAll, toString } from 'muggle-string'
+import { augmentVlsCtx } from '../utils/augment-vls-ctx'
+
+/*
+  Future ideas:
+  - Enhance typing of `useRouter().currentRoute` and `$router.currentRoute`
+  - Enhance typing of `to` route in `beforeEnter` route guards defined in `definePage`
+  - Enhance typing of `<RouterView>`
+    - Typed `name` attribute for named views
+    - Typed `route` slot prop when using `<RouterView v-slot="{route}">`
+*/
+
+const plugin: VueLanguagePlugin = (ctx) => {
+  const RE = {
+    USE_ROUTE: {
+      /** Targets the spot between `useRoute` and `()` */
+      BEFORE_PARENTHESES: /(?<=useRoute)(\s*)(?=\(\))/g,
+      /** Targets the spot right before `useRoute()` */
+      BEFORE: /(?=useRoute(\s*)\(\))/g,
+      /** Targets the spot right after `useRoute()` */
+      AFTER: /(?<=useRoute(\s*)\(\))/g,
+    },
+    DOLLAR_ROUTE: {
+      /**
+       * When using `$route` in a template, it is referred
+       * to as `__VLS_ctx.$route` in the virtual file.
+       */
+      VLS_CTX: /\b__VLS_ctx.\$route\b/g,
+    },
+  }
+
+  return {
+    version: 2.1,
+    resolveEmbeddedCode(fileName, _sfc, embeddedCode) {
+      if (!embeddedCode.id.startsWith('script_')) {
+        return
+      }
+
+      // TODO: Do we want to apply this to EVERY .vue file or only to components that the user wrote themselves?
+
+      const relativeFilePath = ctx.compilerOptions.baseUrl
+        ? relative(ctx.compilerOptions.baseUrl, fileName).replaceAll('\\', '/')
+        : fileName
+
+      const routeNameGetter = `import('vue-router/auto-routes').GetPossibleRouteNamesByFilePath<'${relativeFilePath}'>`
+      const routeNameGetterGeneric = `<${routeNameGetter}>`
+      const typedCall = `useRoute${routeNameGetterGeneric}`
+
+      if (embeddedCode.id.startsWith('script_ts')) {
+        // Inserts generic into `useRoute()` calls.
+        // We only apply this mutation on <script setup> blocks with lang="ts".
+        replaceAll(
+          embeddedCode.content,
+          RE.USE_ROUTE.BEFORE_PARENTHESES,
+          routeNameGetterGeneric
+        )
+      } else if (embeddedCode.id.startsWith('script_js')) {
+        // Typecasts `useRoute()` calls.
+        // We only apply this mutation on plain JS <script setup> blocks.
+        replaceAll(embeddedCode.content, RE.USE_ROUTE.BEFORE, `(`)
+        replaceAll(
+          embeddedCode.content,
+          RE.USE_ROUTE.AFTER,
+          ` as ReturnType<typeof ${typedCall}>)`
+        )
+      }
+
+      const contentStr = toString(embeddedCode.content)
+
+      const vlsCtxAugmentations: string[] = []
+
+      // Augment `__VLS_ctx.$route` to override the typings of `$route` in template blocks
+      if (contentStr.match(RE.DOLLAR_ROUTE.VLS_CTX)) {
+        vlsCtxAugmentations.push(`$route: ReturnType<typeof ${typedCall}>;`)
+      }
+
+      // We can try augmenting the types for `RouterView` below.
+      // if (contentStr.includes(`__VLS_WithComponent<'RouterView', __VLS_LocalComponents`)) {
+      //   vlsCtxAugmentations.push(`RouterView: 'test';`)
+      // }
+
+      if (vlsCtxAugmentations.length > 0) {
+        augmentVlsCtx(
+          embeddedCode.content,
+          () => ` & {
+  ${vlsCtxAugmentations.join('\n  ')}
+}`
+        )
+      }
+    },
+  }
+}
+
+export default plugin
diff --git a/src/volar/utils/augment-vls-ctx.ts b/src/volar/utils/augment-vls-ctx.ts
new file mode 100644
index 000000000..46233893f
--- /dev/null
+++ b/src/volar/utils/augment-vls-ctx.ts
@@ -0,0 +1,27 @@
+import type { Code } from '@vue/language-core'
+
+export function augmentVlsCtx(content: Code[], getCodes: () => ` & ${string}`) {
+  let from = -1
+  let to = -1
+
+  for (let i = 0; i < content.length; i++) {
+    const code = content[i]
+
+    if (typeof code !== 'string') {
+      continue
+    }
+
+    if (from === -1 && code.startsWith(`const __VLS_ctx`)) {
+      from = i
+    } else if (from !== -1 && code === `;\n`) {
+      to = i
+      break
+    }
+  }
+
+  if (to === -1) {
+    return
+  }
+
+  content.splice(to, 0, ...getCodes())
+}
diff --git a/tsup-runtime.config.ts b/tsup-runtime.config.ts
index 3dc8625c5..ecfce30a1 100644
--- a/tsup-runtime.config.ts
+++ b/tsup-runtime.config.ts
@@ -8,7 +8,6 @@ export default defineConfig([
     entry: ['./src/runtime.ts'],
     external: [...commonOptions.external, 'unplugin-vue-router/types'],
   },
-
   {
     ...commonOptions,
     clean: false,
@@ -22,4 +21,20 @@ export default defineConfig([
       'unplugin-vue-router/data-loaders',
     ],
   },
+  // TODO: place here or somewhere else?
+  {
+    ...commonOptions,
+    clean: false,
+    // splitting: false,
+    format: ['cjs'],
+    entry: ['./src/volar/entries/*'],
+    // to work with node10 moduleResolution mode
+    outDir: 'dist/volar',
+    external: [
+      ...commonOptions.external,
+      'unplugin-vue-router/volar',
+      '@vue/language-core',
+      'muggle-string',
+    ],
+  },
 ])
diff --git a/volar/index.cjs b/volar/index.cjs
deleted file mode 100644
index 8de4fc1e6..000000000
--- a/volar/index.cjs
+++ /dev/null
@@ -1,43 +0,0 @@
-// @ts-check
-
-/**
- * @type {import('@vue/language-core').VueLanguagePlugin}
- */
-const plugin = () => {
-  return {
-    version: 2.1,
-    getEmbeddedCodes(fileName, sfc) {
-      const names = [];
-      for (let i = 0; i < sfc.customBlocks.length; i++) {
-        const block = sfc.customBlocks[i]
-        if (block.type === 'route') {
-          const lang = block.lang === 'txt' ? 'json' : block.lang
-          names.push({ id: `route_${i}`, lang })
-        }
-      }
-      return names
-    },
-    resolveEmbeddedCode(fileName, sfc, embeddedCode) {
-      const match = embeddedCode.id.match(/^route_(\d+)$/)
-      if (match) {
-        const index = parseInt(match[1])
-        const block = sfc.customBlocks[index]
-        embeddedCode.content.push([
-          block.content,
-          block.name,
-          0,
-          {
-            verification: true,
-            completion: true,
-            semantic: true,
-            navigation: true,
-            structure: true,
-            format: true,
-          },
-        ])
-      }
-    },
-  }
-}
-
-module.exports = plugin