SuperAPI AI 工具集

vue-start

前端与建站

查看项目

更新于 10-16 03:03

技能介绍

用途:@tanstack/vue-start 是 TanStack Start 面向 Vue 的绑定,基于 start-core 构建,用于搭建同构(服务端与客户端共用代码)Vue 全栈应用。它从 @tanstack/start-client-core 再导出 createServerFn、createMiddleware、createStart 等核心 API,并提供 Vue 专属能力。

主要能力:useServerFn 组合式函数,可在 Vue 组件中调用服务端函数并自动处理重定向;与 React 版本不同,它不会用 useCallback 包裹返回函数,因为 Vue 的 setup() 每个组件实例只运行一次,无需记忆化。服务端工具 getRequest、getRequestHeader、setResponseHeader、setCookie、getCookie 从 @tanstack/vue-start/server 导入。路由组件(Outlet、Link、Navigate、HeadContent、Scripts、Await、ClientOnly、CatchBoundary、Html、Body)与组合式函数来自 @tanstack/vue-router。

使用方式:安装 @tanstack/vue-start、@tanstack/vue-router、vue 及 Vite 相关开发依赖;在 vite.config.ts 中让 tanstackStart() 插件位于 vue 插件之前;配置 tsconfig 的 jsxImportSource 为 vue;创建路由工厂与根路由,根组件使用 Html/Body 包裹 HeadContent 与 Scripts。

适用场景与限制:适合希望以 Vue 构建同构应用并使用 TanStack Router 的项目。注意多数组合式函数返回 Ref,脚本中需用 .value 访问;createServerFn 须从 vue-start 导入,路由 API 从 vue-router 导入;不要与 Nuxt 混淆。本资料未提供收费、价格或平台等其它信息。