diff --git a/packages/router/src/RouterLink.ts b/packages/router/src/RouterLink.ts index 731dfbf75..d7d5ada63 100644 --- a/packages/router/src/RouterLink.ts +++ b/packages/router/src/RouterLink.ts @@ -83,6 +83,11 @@ export interface RouterLinkProps extends RouterLinkOptions { | 'time' | 'true' | 'false' + + /** + * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported. + */ + viewTransition?: boolean } /** @@ -106,7 +111,13 @@ export interface UseLinkOptions { | RouteLocationAsPath | RouteLocationRaw > + replace?: MaybeRef + + /** + * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported. + */ + viewTransition?: boolean } /** @@ -214,10 +225,19 @@ export function useLink( e: MouseEvent = {} as MouseEvent ): Promise { if (guardEvent(e)) { - return router[unref(props.replace) ? 'replace' : 'push']( + const p = router[unref(props.replace) ? 'replace' : 'push']( unref(props.to) // avoid uncaught errors are they are logged anyway ).catch(noop) + if ( + props.viewTransition && + typeof document !== 'undefined' && + 'startViewTransition' in document + ) { + // @ts-expect-error: not added to types yet + document.startViewTransition(() => p) + } + return p } return Promise.resolve() }