Vue bindings for TanStack Start: useServerFn hook, tanstackStart Vite plugin, StartClient, StartServer, Vue-specific setup, re-exports from @tanstack/start-client-core. Full project setup with Vue.
@tanstack/vue-start)This skill builds on start-core. Read start-core first for foundational concepts.
This skill covers the Vue-specific bindings, setup, and patterns for TanStack Start.
CRITICAL: All code is ISOMORPHIC by default. Loaders run on BOTH server and client. Use
createServerFnfor server-only logic.
CRITICAL: Do not confuse
@tanstack/vue-startwith Nuxt. They are completely different frameworks with different APIs.
: Types are FULLY INFERRED. Never cast, never annotate inferred values.
@tanstack/vue-start re-exports everything from @tanstack/start-client-core plus:
useServerFn — Vue composable for calling server functions from componentsAll core APIs (createServerFn, createMiddleware, createStart, createIsomorphicFn, createServerOnlyFn, createClientOnlyFn) are available from @tanstack/vue-start.
Server utilities (getRequest, getRequestHeader, setResponseHeader, setCookie, getCookie, useSession) are imported from @tanstack/vue-start/server.
npm i @tanstack/vue-start @tanstack/vue-router vue
npm i -D vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx typescript
{
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"start": "node .output/server/index.mjs"
}
}
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "vue",
"moduleResolution": "Bundler",
"module": "ESNext",
"target": "ES2022",
"skipLibCheck": true,
"strictNullChecks": true
}
}
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/vue-start/plugin/vite'
import vuePlugin from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
tanstackStart(), // MUST come before vue plugin
vuePlugin(),
vueJsx(), // Required for JSX/TSX route files
],
})
import { createRouter } from '@tanstack/vue-router'
import { routeTree } from './routeTree.gen'
export function getRouter() {
const router = createRouter({
routeTree,
scrollRestoration: true,
})
return router
}
import {
Outlet,
createRootRoute,
HeadContent,
Scripts,
Html,
Body,
} from '@tanstack/vue-router'
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ title: 'My TanStack Start App' },
],
}),
component: RootComponent,
})
function RootComponent() {
return (
<Html>
<head>
<HeadContent />
</head>
<Body>
<Outlet />
<Scripts />
</Body>
</Html>
)
}
import { createFileRoute } from '@tanstack/vue-router'
import { createServerFn } from '@tanstack/vue-start'
const getGreeting = createServerFn({ method: 'GET' }).handler(async () => {
return 'Hello from TanStack Start!'
})
export const Route = createFileRoute('/')({
loader: () => getGreeting(),
component: HomePage,
})
function HomePage() {
const greeting = Route.useLoaderData()
return <h1>{greeting.value}</h1>
}
Use useServerFn to call server functions from Vue components with automatic redirect handling:
import { createServerFn, useServerFn } from '@tanstack/vue-start'
import { ref } from 'vue'
const updatePost = createServerFn({ method: 'POST' })
.inputValidator((data: { id: string; title: string }) => data)
.handler(async ({ data }) => {
await db.posts.update(data.id, { title: data.title })
return { success: true }
})
// In a component setup:
const updatePostFn = useServerFn(updatePost)
const title = ref('')
async function handleSubmit(postId: string) {
await updatePostFn({ data: { id: postId, title: title.value } })
}
Unlike the React version, useServerFn does NOT wrap the returned function in useCallback — Vue's setup() runs once per component instance, so no memoization is needed.
All routing components from @tanstack/vue-router work in Start:
<Outlet> — renders matched child route<Link> — type-safe navigation with scoped slots<Navigate> — declarative redirect<HeadContent> — renders head tags (must be in <head>)<Scripts> — renders body scripts (must be in <body>)<Await> — renders deferred data with Vue <Suspense><ClientOnly> — renders children only after onMounted<CatchBoundary> — error boundary via onErrorCaptured<Html> — SSR shell <html> wrapper<Body> — SSR shell <body> wrapperAll composables from @tanstack/vue-router work in Start. Most return Ref<T> — access via .value:
useRouter() — router instance (NOT a Ref)useRouterState() — Ref<T>, subscribe to router stateuseNavigate() — navigation function (NOT a Ref)useSearch({ from }) — Ref<T>, validated search paramsuseParams({ from }) — Ref<T>, path paramsuseLoaderData({ from }) — Ref<T>, loader datauseMatch({ from }) — Ref<T>, full route matchuseRouteContext({ from }) — Ref<T>, route contextRoute.useLoaderData() — Ref<T>, typed loader data (preferred in route files)Route.useSearch() — Ref<T>, typed search params (preferred in route files)// WRONG — this is the SPA router, NOT Start
import { createServerFn } from '@tanstack/vue-router'
// CORRECT — server functions come from vue-start
import { createServerFn } from '@tanstack/vue-start'
// CORRECT — routing APIs come from vue-router
import { createFileRoute, Link } from '@tanstack/vue-router'
Most composables return Ref<T>. In <script>, access via .value.
// WRONG
const data = Route.useLoaderData()
console.log(data.message) // undefined!
// CORRECT
const data = Route.useLoaderData()
console.log(data.value.message)
Without <Scripts /> in the root route's <body>, client JavaScript doesn't load and the app won't hydrate.
// WRONG