Web / TanStack Interview Questions
What is TanStack Router and how does it differ from Vue Router?
TanStack Router is a fully type-safe client-side router with end-to-end TypeScript inference for route params, search params, and loaders. A misspelled param or a navigation to a non-existent route is a compile-time error, not a runtime bug.
| Feature | TanStack Router | Vue Router |
|---|---|---|
| Type safety | Full inference on params, search params, loaders | Manual typing via module augmentation |
| Search params | First-class typed, validated, serialised state | Plain string parsing, manual validation |
| Data loading | Built-in route loaders with pending/error UI | Manual Pinia/Query integration |
| File-based routing | Yes (optional) | Not built-in |
// main.ts import { createRouter } from "@tanstack/vue-router" import { rootRoute } from "./routes/__root" export const router = createRouter({ routeTree: rootRoute, defaultPreload: "intent", // prefetch on hover }) createApp(App).use(router).mount("#app") // Type-safe navigation import { useNavigate } from "@tanstack/vue-router" const navigate = useNavigate() navigate({ to:"/users/$userId", params:{ userId:"42" } }) // TS error if "userId" is not a valid param for that route
More Related questions...