feat: volar plugins

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,13 +140,15 @@
   "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",
     "json5": "^2.2.3",
     "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",

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: {

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
 }

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
 }

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>

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>

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"
 }

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>

playground/src/pages/named-views/parent/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Default</h1>
+</template>

playground/src/pages/named-views/parent/index@a.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>A</h1>
+</template>

playground/src/pages/named-views/parent/index@b.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>B</h1>
+</template>

playground/src/pages/partial-[name].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const route = useRoute('/partial-[name]')
+const route = useRoute()
 </script>
 
 <template>

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>

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()

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() {

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": [