"ALWAYS use when writing code importing \"@tanstack/vue-router\". Consult for debugging, best practices, or modifying @tanstack/vue-router, tanstack/vue-router, tanstack vue-router, tanstack vue router, router."
Install
npx skillscat add harlan-zw/vue-ecosystem-skills/tanstack-vue-router-skilld Install via the SkillsCat registry.
TanStack/router @tanstack/vue-router
Version: 1.161.1 (Feb 2026)
Deps: @tanstack/vue-store@^0.8.0, @vue/runtime-dom@^3.5.25, isbot@^5.1.22, jsesc@^3.0.2, tiny-invariant@^1.3.3, tiny-warning@^1.0.3, @tanstack/history@1.154.14, @tanstack/router-core@1.161.1
Tags: latest: 1.161.1 (Feb 2026)
References: Docs â API reference, guides ⢠GitHub Issues â bugs, workarounds, edge cases ⢠GitHub Discussions â Q&A, patterns, recipes ⢠Releases â changelog, breaking changes, new APIs
API Changes
This section documents version-specific API changes â prioritize recent major/minor releases.
BREAKING:
NotFoundRoute¬FoundRouteâ v1.x deprecated theNotFoundRouteAPI and therouterOptions.notFoundRouteproperty. UsenotFoundComponentin route options ordefaultNotFoundComponentincreateRouterinstead sourceBREAKING:
opts.navigateâopts.navigateinsidebeforeLoadandloaderis deprecated since v1.x. Usethrow redirect({ to: '...' })for navigation-triggered redirects instead sourceDEPRECATED:
parseParams&stringifyParamsâ these top-level route properties are deprecated in favor of nestedparams.parseandparams.stringifyobjects for better organization sourceDEPRECATED:
preSearchFilters&postSearchFiltersâ deprecated since v1.x in favor of the more powerfulsearch.middlewaresarray for transforming search parameters sourceDEPRECATED:
<ScrollRestoration />â the component is deprecated. Use theuseScrollRestorationhook or thedefaultHashScrollIntoViewrouter option for automatic hash scrolling sourceNEW:
protocolAllowlistâ newcreateRouteroption to prevent XSS by restricting allowed URL protocols in links and redirects (defaults to safe web protocols) sourceNEW: SSR Methods â
head,headers, andscriptsmethods added to route options for server-side SEO metadata, script injection, and custom HTTP headers sourceNEW:
search.middlewaresâ new array-based middleware system supportingretainSearchParamsandstripSearchParamshelpers to manage query params in generated links sourceNEW: Validation Adapters â
@tanstack/zod-adapter,@tanstack/valibot-adapter, and@tanstack/arktype-adapterprovide type-safe validation with distinct input/output type inference sourceNEW:
defaultViewTransitionâ added tocreateRouterto enable native View Transitions API support during navigation where supported by the browser sourceNEW:
rewriteâcreateRouteroption for bidirectional URL transformation, allowing patterns like stripping locale prefixes before matching and adding them back in links sourceNEW:
Wrap&InnerWrapâ newcreateRouterproperties for injecting global providers (e.g., Theme, Auth) that wrap the entire router or its inner content sourceNEW:
codeSplitGroupingsâ provides fine-grained control over how the router groups lazy-loaded route assets (loader, component, etc.) into chunks sourceDEPRECATED: Router Classes â
Router,Route,RootRoute, andFileRouteclasses are deprecated in favor of factory functions likecreateRouter,createRoute, andcreateFileRoutesource
Also changed: rootRouteWithContext renamed to createRootRouteWithContext · defaultRemountDeps new · defaultStructuralSharing new · NotFoundError.global deprecated · search.strict new · SearchSchemaInput new tag · standard-schema support new
Best Practices
Use
getRouteApi(routeId)for type-safe hook access in child components to avoid circular dependencies with route definitions sourceFollow the specific property order (e.g.,
beforeLoadbeforeloader) increateFileRouteto ensure correct TypeScript inference forcontextand other properties sourceThrow
redirect()frombeforeLoadfor authentication to stop the loading lifecycle before any child route or loader executes sourceUse
zodValidatorwith thefallback()generic from@tanstack/zod-adapterto provide defaults for invalid search params, keepingLinksearch props optional and type-safe sourceConfigure
retainSearchParamsmiddleware in the root route to automatically persist global URL state (like themes or sessions) across all generated links sourceInclude only necessary search params in
loaderDepsto prevent unrelated URL changes from triggering redundant loader executions sourcePass the
abortController.signalfrom loader context to async fetch calls to automatically cancel stale requests when users navigate away sourceReturn promises directly from loaders for deferred data loadingâmanual wrapping with
defer()is no longer required as promises are handled automatically sourceSet
defaultPreload: 'intent'increateRouterto enable global hover/touch-based preloading, which significantly improves perceived performance for most applications sourceEnable
defaultStructuralSharing: trueincreateRouterto preserve object references in search param selectors and minimize unnecessary Vue component re-renders source