メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Step-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.
Implement, review, debug, and refactor TanStack Start React Server Components in React 19 apps. Use when tasks mention @tanstack/react-start/rsc, renderServerComponent, createCompositeComponent, CompositeComponent, renderToReadableStream, createFromReadableStream, createFromFetch, Composite Components, React Flight streams, loader or query owned RSC caching, router.invalidate, structuralSharing: false, selective SSR, stale names like renderRsc or .validator, or migration from Next App Router RSC patterns. Do not use for generic SSR or non-TanStack RSC frameworks except brief comparison.
React bindings for TanStack Start: createStart, StartClient, StartServer, React-specific imports, re-exports from @tanstack/react-router, full project setup with React, useServerFn hook.
Solid bindings for TanStack Start: useServerFn hook, tanstackStart Vite plugin, StartClient, StartServer, Solid-specific setup, re-exports from @tanstack/start-client-core. Full project setup with Solid.
Server-side authentication primitives for TanStack Start: session cookies (HttpOnly, Secure, SameSite, __Host- prefix), session read/issue/destroy via createServerFn and middleware, OAuth authorization-code flow with state and PKCE, password-reset enumeration defense, CSRF for non-GET RPCs, rate limiting auth endpoints, session rotation on privilege change. Pairs with router-core/auth-and-guards for the routing side.
createMiddleware, request middleware (.server only), server function middleware (.client + .server), context passing via next({ context }), sendContext for client-server transfer, global middleware via createStart in src/start.ts, middleware factories, method order enforcement, fetch override precedence.
| name | vue-start |
| description | 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. |
| type | framework |
| library | tanstack-start |
| library_version | 1.166.2 |
| framework | vue |
| requires | ["start-core"] |
| sources | ["TanStack/router:packages/vue-start/src"] |
@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.
CRITICAL: 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' })
.validator((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
plugins: [vuePlugin(), tanstackStart()]
// CORRECT
plugins: [tanstackStart(), vuePlugin()]
Vue Start uses <Html> and <Body> components for the SSR document shell. On the server they render <html> and <body> tags; on the client they handle hydration properly.
// WRONG — plain HTML tags can cause hydration mismatches
function RootComponent() {
return (
<html>
<body>
<Outlet />
</body>
</html>
)
}
// CORRECT — use Html and Body components
function RootComponent() {
return (
<Html>
<head>
<HeadContent />
</head>
<Body>
<Outlet />
<Scripts />
</Body>
</Html>
)
}