用途:本技能介绍 TanStack Start 的 Vue 专属绑定、项目搭建与使用模式,建立在 start-core 基础概念之上,需先阅读 start-core。
主要能力:@tanstack/vue-start 重新导出 @tanstack/start-client-core 的全部内容,并提供 useServerFn 组合式函数,用于在组件中调用服务端函数并自动处理重定向。核心 API(createServerFn、createMiddleware、createStart、createIsomorphicFn、createServerOnlyFn、createClientOnlyFn)均可从该包导入;服务端工具(getRequest、getRequestHeader、setResponseHeader、setCookie、getCookie、useSession)从 @tanstack/vue-start/server 导入。
使用方式:安装依赖 npm i @tanstack/vue-start @tanstack/vue-router vue,以及开发依赖 vite、@vitejs/plugin-vue、@vitejs/plugin-vue-jsx、typescript。Vite 配置中 tanstackStart() 必须位于 vue 插件之前,vueJsx 用于 JSX/TSX 路由文件。需配置 package.json 脚本、tsconfig.json,并创建路由工厂、根路由与索引路由。根路由使用 Html、Body、HeadContent、Scripts 组件;缺少 Scripts 会导致客户端 JS 不加载、无法水合。
适用场景:使用 Vue 构建 TanStack Start 全栈应用,需要服务端函数、同构加载器、类型安全路由与 SSR 文档外壳时。
限制与注意:所有代码默认同构,加载器在服务端和客户端都运行,服务端专属逻辑须用 createServerFn;不要与 Nuxt 混淆;类型完全推断,不要强制转换或标注。多数组合式函数返回 Ref,在 script 中需用 .value 访问;useServerFn 不像 React 版本那样用 useCallback 包裹。常见错误包括从 @tanstack/vue-router 导入 createServerFn、遗漏 .value、Vite 插件顺序错误、用原生 html/body 标签替代 Html/Body 组件。