@tanstack/vue-router 1.141.2 → 1.141.6

package/src/Scripts.tsx

@@ -4,10 +4,6 @@ import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
-// Script that sets the defer flag for Vue - must run BEFORE TSR bootstrap script
-// This prevents $_TSR.c() from removing scripts until Vue hydration is complete
-const VUE_DEFER_SCRIPT = 'self.$_TSR_DEFER=true'
-
 export const Scripts = Vue.defineComponent({
   name: 'Scripts',
   setup() {
@@ -68,12 +64,6 @@ export const Scripts = Vue.defineComponent({
       const allScripts: Array<RouterManagedTag> = []
 
       if (router.serverSsr) {
-        allScripts.push({
-          tag: 'script',
-          attrs: { nonce },
-          children: VUE_DEFER_SCRIPT,
-        } as RouterManagedTag)
-
         const serverBufferedScript = router.serverSsr.takeBufferedScripts()
         if (serverBufferedScript) {
           allScripts.push(serverBufferedScript)
@@ -89,7 +79,6 @@ export const Scripts = Vue.defineComponent({
           tag: 'script',
           attrs: {
             nonce,
-            class: '$tsr',
             id: '$tsr-stream-barrier',
             'data-allow-mismatch': true,
           },

package/src/Transitioner.tsx

@@ -88,18 +88,23 @@ export function useTransitionerSetup() {
     endTransition()
   }
 
-  // For Vue, we need to completely override startViewTransition because Vue's
-  // async rendering doesn't work well with the View Transitions API's requirement
-  // for synchronous DOM updates. The browser expects the DOM to be updated
-  // when the callback promise resolves, but Vue updates asynchronously.
-  //
-  // Our approach: Skip the actual view transition animation but still update state.
-  // This ensures navigation works correctly even without the visual transition.
-  // In the future, we could explore using viewTransition.captured like vue-view-transitions does.
+  // Vue updates DOM asynchronously (next tick). The View Transitions API expects the
+  // update callback promise to resolve only after the DOM has been updated.
+  // Wrap the router-core implementation to await a Vue flush before resolving.
+  const originalStartViewTransition:
+    | undefined
+    | ((fn: () => Promise<void>) => void) =
+    (router as any).__tsrOriginalStartViewTransition ??
+    router.startViewTransition
+
+  ;(router as any).__tsrOriginalStartViewTransition =
+    originalStartViewTransition
+
   router.startViewTransition = (fn: () => Promise<void>) => {
-    // Just run the callback directly without wrapping in document.startViewTransition
-    // This ensures the state updates happen and Vue can render them normally
-    fn()
+    return originalStartViewTransition?.(async () => {
+      await fn()
+      await Vue.nextTick()
+    })
   }
 
   // Subscribe to location changes
@@ -131,6 +136,13 @@ export function useTransitionerSetup() {
 
   Vue.onMounted(() => {
     isMounted.value = true
+    if (!isAnyPending.value) {
+      router.__store.setState((s) =>
+        s.status === 'pending'
+          ? { ...s, status: 'idle', resolvedLocation: s.location }
+          : s,
+      )
+    }
   })
 
   Vue.onUnmounted(() => {
@@ -196,6 +208,14 @@ export function useTransitionerSetup() {
   Vue.watch(isAnyPending, (newValue) => {
     if (!isMounted.value) return
     try {
+      if (!newValue && router.__store.state.status === 'pending') {
+        router.__store.setState((s) => ({
+          ...s,
+          status: 'idle',
+          resolvedLocation: s.location,
+        }))
+      }
+
       // The router was pending and now it's not
       if (previousIsAnyPending.value.previous && !newValue) {
         const changeInfo = getLocationChangeInfo(router.state)
@@ -204,12 +224,6 @@ export function useTransitionerSetup() {
           ...changeInfo,
         })
 
-        router.__store.setState((s) => ({
-          ...s,
-          status: 'idle',
-          resolvedLocation: s.location,
-        }))
-
         if (changeInfo.hrefChanged) {
           handleHashScroll(router)
         }

package/src/index.tsx

@@ -219,6 +219,7 @@ export type {
   ActiveLinkOptions,
   LinkProps,
   LinkComponent,
+  LinkComponentRoute,
   LinkComponentProps,
   CreateLinkProps,
 } from './link'
@@ -346,3 +347,4 @@ export type {
   LocationRewrite,
   LocationRewriteFunction,
 } from '@tanstack/router-core'
+export { ClientOnly } from './ClientOnly'

package/src/lazyRouteComponent.tsx

@@ -1,5 +1,6 @@
 import * as Vue from 'vue'
 import { Outlet } from './Match'
+import { ClientOnly } from './ClientOnly'
 import type { AsyncRouteComponent } from './route'
 
 // If the load fails due to module not found, it may mean a new version of
@@ -19,34 +20,6 @@ function isModuleNotFoundError(error: any): boolean {
   )
 }
 
-export function ClientOnly(props: { children?: any; fallback?: Vue.VNode }) {
-  const hydrated = useHydrated()
-
-  return () => {
-    if (hydrated.value) {
-      return props.children
-    }
-    return props.fallback || null
-  }
-}
-
-export function useHydrated() {
-  // Only hydrate on client-side, never on server
-  const hydrated = Vue.ref(false)
-
-  // If on server, return false
-  if (typeof window === 'undefined') {
-    return Vue.computed(() => false)
-  }
-
-  // On client, set to true once mounted
-  Vue.onMounted(() => {
-    hydrated.value = true
-  })
-
-  return hydrated
-}
-
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',
@@ -156,10 +129,15 @@ export function lazyRouteComponent<
 
         // If SSR is disabled for this component
         if (ssr?.() === false) {
-          return Vue.h(ClientOnly, {
-            fallback: Vue.h(Outlet),
-            children: Vue.h(component.value, props),
-          })
+          return Vue.h(
+            ClientOnly,
+            {
+              fallback: Vue.h(Outlet),
+            },
+            {
+              default: () => Vue.h(component.value, props),
+            },
+          )
         }
 
         // Regular render with the loaded component

package/src/link.tsx

@@ -630,6 +630,26 @@ export type LinkComponent<TComp> = <
   props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ) => Vue.VNode
 
+export interface LinkComponentRoute<
+  in out TDefaultFrom extends string = string,
+> {
+  defaultFrom: TDefaultFrom
+  <
+    TRouter extends AnyRouter = RegisteredRouter,
+    const TTo extends string | undefined = undefined,
+    const TMaskTo extends string = '',
+  >(
+    props: LinkComponentProps<
+      'a',
+      TRouter,
+      this['defaultFrom'],
+      TTo,
+      this['defaultFrom'],
+      TMaskTo
+    >,
+  ): Vue.VNode
+}
+
 export function createLink<const TComp>(
   Comp: Constrain<TComp, any, (props: CreateLinkProps) => Vue.VNode>,
 ): LinkComponent<TComp> {

package/src/route.ts

@@ -4,6 +4,8 @@ import {
   BaseRouteApi,
   notFound,
 } from '@tanstack/router-core'
+import * as Vue from 'vue'
+import { Link } from './link'
 import { useLoaderData } from './useLoaderData'
 import { useLoaderDeps } from './useLoaderDeps'
 import { useParams } from './useParams'
@@ -42,8 +44,8 @@ import type { UseMatchRoute } from './useMatch'
 import type { UseLoaderDepsRoute } from './useLoaderDeps'
 import type { UseParamsRoute } from './useParams'
 import type { UseSearchRoute } from './useSearch'
-import type * as Vue from 'vue'
 import type { UseRouteContextRoute } from './useRouteContext'
+import type { LinkComponentRoute } from './link'
 
 // Structural type for Vue SFC components (.vue files)
 // Uses structural matching to accept Vue components without breaking
@@ -73,6 +75,7 @@ declare module '@tanstack/router-core' {
     useLoaderDeps: UseLoaderDepsRoute<TId>
     useLoaderData: UseLoaderDataRoute<TId>
     useNavigate: () => UseNavigateResult<TFullPath>
+    Link: LinkComponentRoute<TFullPath>
   }
 }
 
@@ -140,6 +143,19 @@ export class RouteApi<
   notFound = (opts?: NotFoundError) => {
     return notFound({ routeId: this.id as string, ...opts })
   }
+
+  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> = ((
+    props,
+    ctx?: Vue.SetupContext,
+  ) => {
+    const router = useRouter()
+    const fullPath = router.routesById[this.id as string].fullPath
+    return Vue.h(
+      Link as any,
+      { from: fullPath as never, ...(props as any) },
+      ctx?.slots,
+    )
+  }) as LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']>
 }
 
 export class Route<
@@ -277,6 +293,14 @@ export class Route<
   useNavigate = (): UseNavigateResult<TFullPath> => {
     return useNavigate({ from: this.fullPath })
   }
+
+  Link: LinkComponentRoute<TFullPath> = ((props, ctx?: Vue.SetupContext) => {
+    return Vue.h(
+      Link as any,
+      { from: this.fullPath as never, ...(props as any) },
+      ctx?.slots,
+    )
+  }) as LinkComponentRoute<TFullPath>
 }
 
 export function createRoute<
@@ -515,6 +539,14 @@ export class RootRoute<
   useNavigate = (): UseNavigateResult<'/'> => {
     return useNavigate({ from: this.fullPath })
   }
+
+  Link: LinkComponentRoute<'/'> = ((props, ctx?: Vue.SetupContext) => {
+    return Vue.h(
+      Link as any,
+      { from: this.fullPath as never, ...(props as any) },
+      ctx?.slots,
+    )
+  }) as LinkComponentRoute<'/'>
 }
 
 export function createRouteMask<