Skip to content

Commit 5c1b6c3

Browse files
posvaposva
committed
fix(types): use native vue-router types
BREAKING CHANGE: TODO: write changelog once the changes are confirmed
1 parent 55a1127 commit 5c1b6c3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+355
-1061
lines changed

‎client.d.ts

Lines changed: 3 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -7,86 +7,19 @@ declare module 'vue-router/auto-routes' {
77
export const routes: RouteRecordRaw[]
88
}
99

10-
declare module 'unplugin-vue-router/types' {
11-
import type { RouteNamedMap } from 'vue-router/auto-routes'
12-
export interface TypesConfig {
13-
RouteNamedMap: RouteNamedMap
14-
}
15-
}
16-
1710
declare module 'vue-router' {
18-
import type {
19-
NavigationGuardTyped,
20-
NavigationGuardWithThisTyped,
21-
RouteLocationNormalizedLoadedTypedList,
22-
_RouterTyped,
23-
RouterLinkTyped,
24-
} from 'unplugin-vue-router/types'
25-
2611
import type { RouteNamedMap } from 'vue-router/auto-routes'
27-
export interface TypesConfig {
28-
beforeRouteEnter: NavigationGuardWithThisTyped<undefined, RouteNamedMap>
29-
beforeRouteUpdate: NavigationGuardTyped<RouteNamedMap>
30-
beforeRouteLeave: NavigationGuardTyped<RouteNamedMap>
3112

32-
$route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
33-
$router: _RouterTyped<RouteNamedMap>
34-
35-
RouterLink: RouterLinkTyped<RouteNamedMap>
13+
export interface TypesConfig {
14+
RouteNamedMap: RouteNamedMap
3615
}
3716
}
3817

3918
declare module 'vue-router/auto' {
40-
import type { RouteNamedMap } from 'vue-router/auto-routes'
41-
import type {
42-
_RouterTyped,
43-
_RouterOptions,
44-
RouteLocationNormalizedLoadedTypedList,
45-
NavigationGuardTyped,
46-
RouterLinkPropsTyped,
47-
RouterLinkTyped,
48-
UseLinkFnTyped,
49-
} from 'unplugin-vue-router/types'
50-
5119
// reexport all types that are not augmented by unplugin-vue-router
5220
export * from 'vue-router'
53-
// Augmented types to override the ones exported by vue-router
54-
export type {
55-
Router,
56-
RouteLocationNormalized,
57-
RouteRecordName,
58-
RouteLocationNormalizedLoaded,
59-
RouteLocation,
60-
RouteLocationAsRelativePath,
61-
RouteLocationRaw,
62-
RouteLocationResolved,
63-
RouteParams,
64-
RouteParamsRaw,
65-
NavigationGuard,
66-
NavigationGuardWithThis,
67-
} from 'unplugin-vue-router/types'
68-
69-
/**
70-
* @deprecated use `Router` instead. This type will be a different one in the next major version.
71-
*/
72-
export type RouterTyped = _RouterTyped<RouteNamedMap>
73-
export function useRouter(): _RouterTyped<RouteNamedMap>
74-
export function useRoute<
75-
Name extends keyof RouteNamedMap = keyof RouteNamedMap,
76-
>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
77-
export const useLink: UseLinkFnTyped<RouteNamedMap>
78-
export function onBeforeRouteLeave(
79-
guard: NavigationGuardTyped<RouteNamedMap>
80-
): void
81-
export function onBeforeRouteUpdate(
82-
guard: NavigationGuardTyped<RouteNamedMap>
83-
): void
84-
export const RouterLink: RouterLinkTyped<RouteNamedMap>
85-
export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>
86-
export function createRouter(
87-
options: _RouterOptions
88-
): _RouterTyped<RouteNamedMap>
8921

22+
// TODO: deprecate vue-router/auto
9023
export {
9124
// Experimental Data Fetching
9225
definePage,

‎examples/nuxt/pages/users/[id].vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { defineBasicLoader } from 'unplugin-vue-router/runtime'
2+
import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
33
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
44
55
export const useUserData = defineBasicLoader(

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@
212212
"vitepress": "1.2.3",
213213
"vitest": "^1.6.0",
214214
"vue": "^3.4.27",
215-
"vue-router": "4.3.2",
215+
"vue-router": "4.4.0-alpha.2",
216216
"vue-router-mock": "^1.1.0",
217217
"vue-tsc": "^2.0.21",
218218
"vuefire": "^3.1.23",

‎playground/env.d.ts

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,2 @@
11
/// <reference types="vite/client" />
2-
3-
// manual extension of route types
4-
declare module 'vue-router/auto-routes' {
5-
import type {
6-
RouteRecordInfo,
7-
ParamValue,
8-
ParamValueOneOrMore,
9-
ParamValueZeroOrMore,
10-
ParamValueZeroOrOne,
11-
} from 'unplugin-vue-router'
12-
13-
export interface RouteNamedMap {
14-
'custom-dynamic-name': RouteRecordInfo<
15-
'custom-dynamic-name',
16-
'/added-during-runtime/[...path]',
17-
{ path: ParamValue<true> },
18-
{ path: ParamValue<false> }
19-
>
20-
}
21-
}
2+
/// <reference types="unplugin-vue-router/client" />

‎playground/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313
"json-server": "^0.17.4",
1414
"unplugin-vue-router": "workspace:*",
1515
"vite": "^5.2.13",
16-
"vite-plugin-inspect": "^0.8.4",
17-
"vue": "^3.4.27"
16+
"vite-plugin-inspect": "^0.8.4"
1817
},
1918
"dependencies": {
2019
"@tanstack/vue-query": "^5.41.0",
2120
"mande": "^2.0.9",
2221
"pinia": "^2.1.7",
23-
"vue": "^3.4.27"
22+
"vue": "^3.4.27",
23+
"vue-router": "4.4.0-alpha.2"
2424
}
2525
}

‎playground/src/App.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script setup lang="ts">
2-
import { useLink, useRoute } from 'vue-router/auto'
3-
import type { RouteNamedMap } from 'vue-router/auto-routes'
2+
import { useLink, useRoute } from 'vue-router'
43
import type {
54
RouteLocationNormalizedLoaded,
65
RouteLocationResolved,
76
RouteLocation,
8-
} from 'vue-router/auto'
7+
} from 'vue-router'
98
import { ref } from 'vue'
109
import { routes } from 'vue-router/auto-routes'
1110
@@ -90,7 +89,7 @@ const customRoute = useRoute('/deep/nesting/works/custom-path')
9089
<button @click="$router.push('/oeu')">Click</button>
9190
<RouterLink to="/named-route" v-slot="{ route }">
9291
:name param is:
93-
{{ (route as RouteLocationNormalizedLoaded<'/[name]'>).params.name }}
92+
{{ (route as RouteLocationResolved<'/[name]'>).params.name }}
9493
</RouterLink>
9594
</nav>
9695
</div>

‎playground/src/pages/[...path]+.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts" setup>
2+
import { useRoute } from 'vue-router/auto'
3+
4+
const route = useRoute('/[...path]+')
5+
</script>
6+
7+
<template>
8+
<main>
9+
<h1>Not Found</h1>
10+
<p>{{ route.params.path }} does not exist.</p>
11+
</main>
12+
</template>
13+
14+
<route>
15+
{
16+
"props": true
17+
}
18+
</route>

‎playground/src/pages/[...path].vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
22
<main>
33
<h1>Not Found</h1>
4-
<p>{{ $route.params.path }} does not exist.</p>
4+
<p>
5+
{{ $route.name === '/[...path]' && $route.params.path }} does not exist.
6+
</p>
57
</main>
68
</template>
79

‎playground/src/pages/users/[id].vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
3+
import type { RouteLocationNormalized } from 'vue-router'
34
export const myExport = 'OUTSIDE SETUP TEST'
45
56
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
@@ -47,8 +48,9 @@ const { data: user2 } = useOldData()
4748
4849
definePage({
4950
beforeEnter(to) {
50-
if (Number.isNaN(Number(to.params.id))) {
51-
console.log('invalid param id', to.params.id)
51+
const { id } = (to as RouteLocationNormalized<'/users/[id]'>).params
52+
if (Number.isNaN(Number(id))) {
53+
console.log('invalid param id', id)
5254
return false
5355
}
5456
},

‎playground/src/router.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { createRouter, createWebHistory } from 'vue-router/auto'
1+
import { createRouter, createWebHistory } from 'vue-router'
22
import { routes } from 'vue-router/auto-routes'
3+
import type { RouteRecordInfo, ParamValue } from 'vue-router'
34

45
export const router = createRouter({
56
history: createWebHistory(),
@@ -16,3 +17,15 @@ if (import.meta.hot) {
1617
console.log(mod!.router.getRoutes())
1718
})
1819
}
20+
21+
// manual extension of route types
22+
declare module 'vue-router/auto-routes' {
23+
export interface RouteNamedMap {
24+
'custom-dynamic-name': RouteRecordInfo<
25+
'custom-dynamic-name',
26+
'/added-during-runtime/[...path]',
27+
{ path: ParamValue<true> },
28+
{ path: ParamValue<false> }
29+
>
30+
}
31+
}

0 commit comments

Comments
 (0)