@tanstack/vue-router 1.140.1 → 1.141.0

package/src/Transitioner.tsx

@@ -8,206 +8,227 @@ import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
 import { usePrevious } from './utils'
 
-export const Transitioner = Vue.defineComponent({
-  name: 'Transitioner',
-  setup() {
-    const router = useRouter()
-    let mountLoadForRouter = { router, mounted: false }
-
-    if (router.isServer) {
-      return () => null
+// Track mount state per router to avoid double-loading
+let mountLoadForRouter = { router: null as any, mounted: false }
+
+/**
+ * Composable that sets up router transition logic.
+ * This is called from MatchesContent to set up:
+ * - router.startTransition
+ * - router.startViewTransition
+ * - History subscription
+ * - Router event watchers
+ *
+ * Must be called during component setup phase.
+ */
+export function useTransitionerSetup() {
+  const router = useRouter()
+
+  // Skip on server - no transitions needed
+  if (router.isServer) {
+    return
+  }
+
+  const isLoading = useRouterState({
+    select: ({ isLoading }) => isLoading,
+  })
+
+  // Track if we're in a transition - using a ref to track async transitions
+  const isTransitioning = Vue.ref(false)
+
+  // Track pending state changes
+  const hasPendingMatches = useRouterState({
+    select: (s) => s.matches.some((d) => d.status === 'pending'),
+  })
+
+  const previousIsLoading = usePrevious(() => isLoading.value)
+
+  const isAnyPending = Vue.computed(
+    () => isLoading.value || isTransitioning.value || hasPendingMatches.value,
+  )
+  const previousIsAnyPending = usePrevious(() => isAnyPending.value)
+
+  const isPagePending = Vue.computed(
+    () => isLoading.value || hasPendingMatches.value,
+  )
+  const previousIsPagePending = usePrevious(() => isPagePending.value)
+
+  // Implement startTransition similar to React/Solid
+  // Vue doesn't have a native useTransition like React 18, so we simulate it
+  // We also update the router state's isTransitioning flag so useMatch can check it
+  router.startTransition = (fn: () => void | Promise<void>) => {
+    isTransitioning.value = true
+    // Also update the router state so useMatch knows we're transitioning
+    try {
+      router.__store.setState((s) => ({ ...s, isTransitioning: true }))
+    } catch {
+      // Ignore errors if component is unmounted
     }
 
-    const isLoading = useRouterState({
-      select: ({ isLoading }) => isLoading,
-    })
-
-    // Track if we're in a transition - using a ref to track async transitions
-    const isTransitioning = Vue.ref(false)
+    // Helper to end the transition
+    const endTransition = () => {
+      // Use nextTick to ensure Vue has processed all reactive updates
+      Vue.nextTick(() => {
+        try {
+          isTransitioning.value = false
+          router.__store.setState((s) => ({ ...s, isTransitioning: false }))
+        } catch {
+          // Ignore errors if component is unmounted
+        }
+      })
+    }
 
-    // Track pending state changes
-    const hasPendingMatches = useRouterState({
-      select: (s) => s.matches.some((d) => d.status === 'pending'),
+    // Execute the function synchronously
+    // The function internally may call startViewTransition which schedules async work
+    // via document.startViewTransition, but we don't need to wait for it here
+    // because Vue's reactivity will trigger re-renders when state changes
+    fn()
+
+    // End the transition on next tick to allow Vue to process reactive updates
+    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.
+  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()
+  }
+
+  // Subscribe to location changes
+  // and try to load the new location
+  let unsubscribe: (() => void) | undefined
+
+  Vue.onMounted(() => {
+    unsubscribe = router.history.subscribe(router.load)
+
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+      _includeValidateSearch: true,
     })
 
-    const previousIsLoading = usePrevious(() => isLoading.value)
-
-    const isAnyPending = Vue.computed(
-      () => isLoading.value || isTransitioning.value || hasPendingMatches.value,
-    )
-    const previousIsAnyPending = usePrevious(() => isAnyPending.value)
-
-    const isPagePending = Vue.computed(
-      () => isLoading.value || hasPendingMatches.value,
-    )
-    const previousIsPagePending = usePrevious(() => isPagePending.value)
-
-    // Implement startTransition similar to React/Solid
-    // Vue doesn't have a native useTransition like React 18, so we simulate it
-    // We also update the router state's isTransitioning flag so useMatch can check it
-    router.startTransition = (fn: () => void | Promise<void>) => {
-      isTransitioning.value = true
-      // Also update the router state so useMatch knows we're transitioning
-      try {
-        router.__store.setState((s) => ({ ...s, isTransitioning: true }))
-      } catch {
-        // Ignore errors if component is unmounted
-      }
+    if (
+      trimPathRight(router.latestLocation.href) !==
+      trimPathRight(nextLocation.href)
+    ) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+  })
 
-      // Helper to end the transition
-      const endTransition = () => {
-        // Use nextTick to ensure Vue has processed all reactive updates
-        Vue.nextTick(() => {
-          try {
-            isTransitioning.value = false
-            router.__store.setState((s) => ({ ...s, isTransitioning: false }))
-          } catch {
-            // Ignore errors if component is unmounted
-          }
-        })
-      }
+  // Track if component is mounted to prevent updates after unmount
+  const isMounted = Vue.ref(false)
 
-      // Execute the function synchronously
-      // The function internally may call startViewTransition which schedules async work
-      // via document.startViewTransition, but we don't need to wait for it here
-      // because Vue's reactivity will trigger re-renders when state changes
-      fn()
+  Vue.onMounted(() => {
+    isMounted.value = true
+  })
 
-      // End the transition on next tick to allow Vue to process reactive updates
-      endTransition()
+  Vue.onUnmounted(() => {
+    isMounted.value = false
+    if (unsubscribe) {
+      unsubscribe()
     }
-
-    // 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.
-    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()
+  })
+
+  // Try to load the initial location
+  Vue.onMounted(() => {
+    if (
+      (typeof window !== 'undefined' && router.ssr) ||
+      (mountLoadForRouter.router === router && mountLoadForRouter.mounted)
+    ) {
+      return
     }
-
-    // Subscribe to location changes
-    // and try to load the new location
-    let unsubscribe: (() => void) | undefined
-
-    Vue.onMounted(() => {
-      unsubscribe = router.history.subscribe(router.load)
-
-      const nextLocation = router.buildLocation({
-        to: router.latestLocation.pathname,
-        search: true,
-        params: true,
-        hash: true,
-        state: true,
-        _includeValidateSearch: true,
-      })
-
-      if (
-        trimPathRight(router.latestLocation.href) !==
-        trimPathRight(nextLocation.href)
-      ) {
-        router.commitLocation({ ...nextLocation, replace: true })
-      }
-    })
-
-    // Track if component is mounted to prevent updates after unmount
-    const isMounted = Vue.ref(false)
-
-    Vue.onMounted(() => {
-      isMounted.value = true
-    })
-
-    Vue.onUnmounted(() => {
-      isMounted.value = false
-      if (unsubscribe) {
-        unsubscribe()
-      }
-    })
-
-    // Try to load the initial location
-    Vue.onMounted(() => {
-      if (
-        (typeof window !== 'undefined' && router.ssr) ||
-        (mountLoadForRouter.router === router && mountLoadForRouter.mounted)
-      ) {
-        return
-      }
-      mountLoadForRouter = { router, mounted: true }
-      const tryLoad = async () => {
-        try {
-          await router.load()
-        } catch (err) {
-          console.error(err)
-        }
+    mountLoadForRouter = { router, mounted: true }
+    const tryLoad = async () => {
+      try {
+        await router.load()
+      } catch (err) {
+        console.error(err)
       }
-      tryLoad()
-    })
-
-    // Setup watchers for emitting events
-    // All watchers check isMounted to prevent updates after unmount
-    Vue.watch(
-      () => isLoading.value,
-      (newValue) => {
-        if (!isMounted.value) return
-        try {
-          if (previousIsLoading.value.previous && !newValue) {
-            router.emit({
-              type: 'onLoad',
-              ...getLocationChangeInfo(router.state),
-            })
-          }
-        } catch {
-          // Ignore errors if component is unmounted
-        }
-      },
-    )
-
-    Vue.watch(isPagePending, (newValue) => {
+    }
+    tryLoad()
+  })
+
+  // Setup watchers for emitting events
+  // All watchers check isMounted to prevent updates after unmount
+  Vue.watch(
+    () => isLoading.value,
+    (newValue) => {
       if (!isMounted.value) return
       try {
-        // emit onBeforeRouteMount
-        if (previousIsPagePending.value.previous && !newValue) {
+        if (previousIsLoading.value.previous && !newValue) {
           router.emit({
-            type: 'onBeforeRouteMount',
+            type: 'onLoad',
             ...getLocationChangeInfo(router.state),
           })
         }
       } catch {
         // Ignore errors if component is unmounted
       }
-    })
-
-    Vue.watch(isAnyPending, (newValue) => {
-      if (!isMounted.value) return
-      try {
-        // The router was pending and now it's not
-        if (previousIsAnyPending.value.previous && !newValue) {
-          const changeInfo = getLocationChangeInfo(router.state)
-          router.emit({
-            type: 'onResolved',
-            ...changeInfo,
-          })
+    },
+  )
+
+  Vue.watch(isPagePending, (newValue) => {
+    if (!isMounted.value) return
+    try {
+      // emit onBeforeRouteMount
+      if (previousIsPagePending.value.previous && !newValue) {
+        router.emit({
+          type: 'onBeforeRouteMount',
+          ...getLocationChangeInfo(router.state),
+        })
+      }
+    } catch {
+      // Ignore errors if component is unmounted
+    }
+  })
+
+  Vue.watch(isAnyPending, (newValue) => {
+    if (!isMounted.value) return
+    try {
+      // The router was pending and now it's not
+      if (previousIsAnyPending.value.previous && !newValue) {
+        const changeInfo = getLocationChangeInfo(router.state)
+        router.emit({
+          type: 'onResolved',
+          ...changeInfo,
+        })
 
-          router.__store.setState((s) => ({
-            ...s,
-            status: 'idle',
-            resolvedLocation: s.location,
-          }))
+        router.__store.setState((s) => ({
+          ...s,
+          status: 'idle',
+          resolvedLocation: s.location,
+        }))
 
-          if (changeInfo.hrefChanged) {
-            handleHashScroll(router)
-          }
+        if (changeInfo.hrefChanged) {
+          handleHashScroll(router)
         }
-      } catch {
-        // Ignore errors if component is unmounted
       }
-    })
-
+    } catch {
+      // Ignore errors if component is unmounted
+    }
+  })
+}
+
+/**
+ * @deprecated Use useTransitionerSetup() composable instead.
+ * This component is kept for backwards compatibility but the setup logic
+ * has been moved to useTransitionerSetup() for better SSR hydration.
+ */
+export const Transitioner = Vue.defineComponent({
+  name: 'Transitioner',
+  setup() {
+    useTransitionerSetup()
     return () => null
   },
 })

package/src/awaited.tsx

@@ -23,32 +23,21 @@ export function useAwaited<T>({
   return [promise[TSR_DEFERRED_PROMISE].data, promise]
 }
 
-export function Await<T>(
-  props: AwaitOptions<T> & {
-    fallback?: Vue.VNode
-    children: (result: T) => Vue.VNode
+export const Await = Vue.defineComponent({
+  name: 'Await',
+  props: {
+    promise: {
+      type: Promise,
+      required: true,
+    },
+    children: {
+      type: Function,
+      required: true,
+    },
   },
-) {
-  const data = Vue.ref<T | null>(null)
-  const error = Vue.ref<Error | null>(null)
-  const pending = Vue.ref(true)
-
-  Vue.watchEffect(async () => {
-    pending.value = true
-    try {
-      data.value = await props.promise
-    } catch (err) {
-      error.value = err as Error
-    } finally {
-      pending.value = false
-    }
-  })
-
-  const inner = Vue.computed(() => {
-    if (error.value) throw error.value
-    if (pending.value) return props.fallback
-    return props.children(data.value as T)
-  })
-
-  return () => inner.value
-}
+  async setup(props) {
+    const deferred = defer(props.promise)
+    const data = await deferred
+    return () => (props.children as (result: unknown) => Vue.VNode)(data)
+  },
+})

package/src/index.tsx

@@ -339,6 +339,8 @@ export { ScriptOnce } from './ScriptOnce'
 export { Asset } from './Asset'
 export { HeadContent } from './HeadContent'
 export { Scripts } from './Scripts'
+export { Body } from './Body'
+export { Html } from './Html'
 export { composeRewrites } from '@tanstack/router-core'
 export type {
   LocationRewrite,

package/src/lazyRouteComponent.tsx

@@ -98,7 +98,8 @@ export function lazyRouteComponent<
     name: 'LazyRouteComponent',
     setup(props: any) {
       // Create refs to track component state
-      const component = Vue.ref<any>(comp)
+      // Use shallowRef for component to avoid making it reactive (Vue warning)
+      const component = Vue.shallowRef<any>(comp ? Vue.markRaw(comp) : comp)
       const errorState = Vue.ref<any>(error)
       const loading = Vue.ref(!component.value && !errorState.value)
 
@@ -109,7 +110,8 @@ export function lazyRouteComponent<
 
           load()
             .then((result) => {
-              component.value = result
+              // Use markRaw to prevent Vue from making the component reactive
+              component.value = result ? Vue.markRaw(result) : result
               loading.value = false
             })
             .catch((err) => {

package/src/link.tsx

@@ -446,13 +446,8 @@ export function useLinkProps<
     return hrefValue
   })
 
-  // Create a reactive proxy that reads computed values on access
-  // This allows the returned object to stay reactive when used in templates
-  // Use shallowReactive to preserve the ref object without unwrapping it
-  const reactiveProps: HTMLAttributes = Vue.shallowReactive({
-    ...getPropsSafeToSpread(),
-    href: undefined as string | undefined,
-    ref,
+  // Create static event handlers that don't change between renders
+  const staticEventHandlers = {
     onClick: composeEventHandlers<MouseEvent>([
       options.onClick,
       handleClick,
@@ -481,72 +476,67 @@ export function useLinkProps<
       options.onTouchStart,
       handleTouchStart,
     ]) as any,
-    disabled: !!options.disabled,
-    target: options.target,
-  })
-
-  // Watch computed values and update reactive props
-  Vue.watchEffect(() => {
-    // Update from resolved active/inactive props
-    const activeP = resolvedActiveProps.value
-    const inactiveP = resolvedInactiveProps.value
+  }
 
-    // Update href
-    reactiveProps.href = href.value
+  // Compute all props synchronously to avoid hydration mismatches
+  // Using Vue.computed ensures props are calculated at render time, not after
+  const computedProps = Vue.computed<HTMLAttributes>(() => {
+    const result: HTMLAttributes = {
+      ...getPropsSafeToSpread(),
+      href: href.value,
+      ref,
+      ...staticEventHandlers,
+      disabled: !!options.disabled,
+      target: options.target,
+    }
 
-    // Update style
+    // Add style if present
     if (resolvedStyle.value) {
-      reactiveProps.style = resolvedStyle.value
-    } else {
-      delete reactiveProps.style
+      result.style = resolvedStyle.value
     }
 
-    // Update class
+    // Add class if present
     if (resolvedClassName.value) {
-      reactiveProps.class = resolvedClassName.value
-    } else {
-      delete reactiveProps.class
+      result.class = resolvedClassName.value
     }
 
-    // Update disabled props
+    // Add disabled props
     if (options.disabled) {
-      reactiveProps.role = 'link'
-      reactiveProps['aria-disabled'] = true
-    } else {
-      delete reactiveProps.role
-      delete reactiveProps['aria-disabled']
+      result.role = 'link'
+      result['aria-disabled'] = true
     }
 
-    // Update active status
+    // Add active status
     if (isActive.value) {
-      reactiveProps['data-status'] = 'active'
-      reactiveProps['aria-current'] = 'page'
-    } else {
-      delete reactiveProps['data-status']
-      delete reactiveProps['aria-current']
+      result['data-status'] = 'active'
+      result['aria-current'] = 'page'
     }
 
-    // Update transitioning status
+    // Add transitioning status
     if (isTransitioning.value) {
-      reactiveProps['data-transitioning'] = 'transitioning'
-    } else {
-      delete reactiveProps['data-transitioning']
+      result['data-transitioning'] = 'transitioning'
     }
 
     // Merge active/inactive props (excluding class and style which are handled above)
+    const activeP = resolvedActiveProps.value
+    const inactiveP = resolvedInactiveProps.value
+
     for (const key of Object.keys(activeP)) {
       if (key !== 'class' && key !== 'style') {
-        reactiveProps[key] = activeP[key]
+        result[key] = activeP[key]
       }
     }
     for (const key of Object.keys(inactiveP)) {
       if (key !== 'class' && key !== 'style') {
-        reactiveProps[key] = inactiveP[key]
+        result[key] = inactiveP[key]
       }
     }
+
+    return result
   })
 
-  return reactiveProps
+  // Return the computed ref itself - callers should access .value
+  return computedProps as unknown as HTMLAttributes
 }
 
 // Type definitions
@@ -682,13 +672,18 @@ const LinkImpl = Vue.defineComponent({
   ],
   setup(props, { attrs, slots }) {
     // Call useLinkProps ONCE during setup with combined props and attrs
-    // The returned object includes computed values that update reactively
+    // The returned object is a computed ref that updates reactively
     const allProps = { ...props, ...attrs }
-    const linkProps = useLinkProps(allProps as any)
+    const linkPropsComputed = useLinkProps(
+      allProps as any,
+    ) as unknown as Vue.ComputedRef<HTMLAttributes>
 
     return () => {
       const Component = props._asChild || 'a'
 
+      // Access the computed value to get fresh props each render
+      const linkProps = linkPropsComputed.value
+
       const isActive = linkProps['data-status'] === 'active'
       const isTransitioning =
         linkProps['data-transitioning'] === 'transitioning'