How do the TanStack libraries compose into a full application stack, and what is TanStack Start?

Each library is independently useful, but together they form a coherent, type-safe, headless application stack — no additional state management or routing library required.

// Typical page: Router search params → Query key → Table state
<script setup lang="ts">
import { computed }               from "vue"
import { useSearch, useNavigate } from "@tanstack/vue-router"
import { useQuery }               from "@tanstack/vue-query"
import { useVueTable, getCoreRowModel, createColumnHelper } from "@tanstack/vue-table"

// 1. URL state via Router
const search=useSearch({ from:"/users" })

// 2. Server data via Query (key mirrors URL state)
const { data }=useQuery({
  queryKey: computed(()=>["users",{page:search.page,q:search.q}]),
  queryFn:  ()=>fetchUsers({page:search.page,q:search.q}),
})

// 3. Table UI logic via Table
const ch=createColumnHelper<User>()
const table=useVueTable({
  get data(){ return data.value?.users??[] },
  columns:[ch.accessor("name",{header:"Name"})],
  manualPagination:true,
  getCoreRowModel:getCoreRowModel(),
})
</script>
// TanStack Start (2024-2025):
// Full-stack framework built on TanStack Router adding SSR,
// server functions, streaming, and file-based routing.
// Stable for React; Vue support in progress.