如何在2026年构建具备AI的Nuxt应用

Q: 如何部署到Cloudflare？

有了Cloudflare预设和绑定，你只需一个命令即可部署。Wrangler 基于输出 构建，上传 Worker 及其静态资产，并附加声明的绑定。wrangler.jsonc``pnpm build

在2026年构建Nuxt的AI功能需要三部分，这些环节无需胶水代码即可衔接。Vercel AI SDK 为你提供了流媒体引擎和原生的 Composition API 组合文件，这些组合将模型输出暴露为反应式 Vue 状态。Nuxt UI 将有线的聊天组件连接到这些组合文件，Cloudflare Workers AI 则通过在边缘进行推理，该接口连接到与任何托管服务商相同的 SDK 表面。useChatuseCompletionuseObject``workers-ai-provider

唯一的分工是在包裹之间。该包包含服务器原语和将模型输出转换为类型化消息流的流适配器，同时存储消耗该数据的可组合文件。你构建两个提供者阶段：通过 Vercel AI Gateway 进行本地基线，覆盖多个模型，通过一个密钥;然后是边缘阶段，将提供商替换为绑定到 Cloudflare 的供应商，运行 Cloudflare 自有模型，没有第三方模型账户。你的应用代码在两者之间几乎没有变化，因为两者实现的是同一个界面。aistreamText,@ai-sdk/vueworkers-ai-providerenv.AI

2026年如何设置Nuxt和Vercel AI SDK？

搭建一个Nuxt应用，安装AI软件包。这使用Node 22和pnpm。

pnpm create nuxt nuxt-ai-2026
cd nuxt-ai-2026
pnpm add ai @ai-sdk/vue zod

你的本地基线路由是通过Vercel AI Gateway，所以你需要Gateway API密钥。从AI Gateway仪表盘创建一个，然后作为运行时配置添加。nuxt.config.ts

export default defineNuxtConfig({ compatibilityDate: '2026-07-31', devtools: { enabled: true }, runtimeConfig: {   aiGatewayApiKey: ''}
})

Nuxt 将一个前缀的环境变量映射到匹配的运行时配置上，如何在 Windows 11/10 中自动清空回收站 - 致知笔记 - 专注教程知识分享因此在运行时填充。放进去。NUXT_NUXT_AI_GATEWAY_API_KEYaiGatewayApiKey``.env

NUXT_AI_GATEWAY_API_KEY=your-key-here

如何使用Nuxt服务器路由流式传输AI响应？

保持模型调用在Nitro路由中，这样你的提供商密钥保持在服务器端，浏览器永远不会触碰模型。该路由使用四个函数：运行模型，将客户端的丰富消息格式简化为模型预期，将原始输出调整为类型化的UI流，并包裹在Nitro可发送的响应中。aistreamTextconvertToModelMessagestoUIMessageStreamcreateUIMessageStreamResponse

import { streamText, convertToModelMessages, createGateway, createUIMessageStreamResponse, toUIMessageStream, type UIMessage
} from 'ai'

export default defineLazyEventHandler(async () => { const apiKey = useRuntimeConfig().aiGatewayApiKey if (!apiKey) throw new Error('Missing AI Gateway API key')
 const gateway = createGateway({ apiKey })
 return defineEventHandler(async (event) => {   const { messages }: { messages: UIMessage[] } = await readBody(event)
   const result = streamText({     model: gateway('inclusionai/ling-3.0-flash-free'),     messages: await convertToModelMessages(messages)   })
   return createUIMessageStreamResponse({     stream: toUIMessageStream({ stream: result.stream })   })})
})

封装是第一次请求时构建一次网关，而不是每次通话。输入的对象是携带有序数组而非普通字符串的对象，这就是为什么在交给模型前要先将其压平。defineLazyEventHandlermessagesUIMessagepartsconvertToModelMessages

在构建任何接口之前，先确认路由流。运行开发服务器，然后发送原始请求。

curl -N -X POST http://localhost:3000/api/chat \ -H "Content-Type: application/json" \ -d '{"messages":[{"id":"1","role":"user","parts":[{"type":"text","text":"Say hello in one short sentence."}]}]}'

端点通过服务器发送的事件响应，如何让运行缓慢的 iPhone 提速 - 致知笔记 - 专注教程知识分享每个事件一行携带一个类型的区块。data:

每个类型部分运行一个起点、一系列的 delta 和一个结束。该模型先流式处理推理部分，再流文本部分，这样你可以将思考与答案分开渲染。这些 delta 是片段，不是完整的单词，这个片段流就是你的接口逐个标记渲染的。

可组合设备在Vue中是如何工作的？useChat

可组合文件将Vue组件连接到你的流媒体路由，并将对话暴露为反应状态。无参数调用，默认会发布到;因此，它与前一段的路线搭配，无需任何交通配置。useChat``/api/chat

"(m, i) in messages" :key="m.id ?? i"> {{ m.role === 'user' ? 'You' : 'AI' }}

"(part, j) in m.parts" :key="`${m.id}-${j}`">

"part.type === 'reasoning'">{{ part.text }}

"part.type === 'text'">{{ part.text }}


 "handleSubmit">   "input" placeholder="Say something..." /> 

messages`是一个Vue引用，会在每个流式分块更新，因此模板会在响应到来时逐个令牌重新渲染。你是迭代而不是单一字符串，因为每个消息都包含一个有序的输入部分数组，通过不同的分支来渲染推理和文本，正是让你能让模型思维风格与其回答不同的原因。 打开流，通过 ， ，你可以驱动加载状态。`m.parts``sendMessage``status``submitted``streaming``ready

这会渲染对话内容，但显示模型的原始输出，Markdown 标题、代码围栏和表格作为字面字符出现，因为这里没有解析它们。下一部分用Nuxt UI的聊天组件替换了手写标记，并将这些Markdown加载成格式化输出。

如何在Nuxt UI中为AI聊天做样式？

Nuxt UI 提供为 AI 聊天设计的组件，直接调用 AI SDK 的消息部分，因此你会获得滚动的消息列表、提交和停止处理的提示，以及专门用于推理和工具调用的块，无需自己写标记。Comark渲染流式Markdown，解析代币到达时，使格式化输出实时积累，而不是最后闪现。

安装Nuxt UI、Comark、Shiki语言以及Shiki本身。Comark的Highlight插件依赖于pnpm，除非你声明，否则pnpm不会暴露。shiki

pnpm add @nuxt/ui @comark/nuxt @shikijs/langs shiki

注册两个模块，并将 Nuxt 指向 CSS 条目。

export default defineNuxtConfig({ compatibilityDate: '2026-07-31', devtools: { enabled: true }, modules: ['@nuxt/ui', '@comark/nuxt'], css: ['~/assets/css/main.css'], runtimeConfig: {   aiGatewayApiKey: ''}
})
app/assets/css/main.css`导入 Tailwind 和 Nuxt UI，并将应用包裹在 中，Nuxt UI 需要用于叠加层和吐槽。`app/app.vue``UApp
@import "tailwindcss";
@import "@nuxt/ui";

用高亮插件定义一个可重复使用的 Comark 渲染器，如何在 iPhone 上的 YouTube 中设置睡眠定时器 - 致知笔记 - 专注教程知识分享让 Markdown 辅助渲染带有语法高亮的代码块。这成为你在页面中使用的一个组件。

import highlight from '@comark/nuxt/plugins/highlight'export default defineComarkComponent({name: 'ChatComark',plugins: [highlight()],class: '*:first:mt-0 *:last:mb-0'
})

现在接线。渲染列表并自动滚动，它的槽会把每个消息交给你，这样你就能决定每个部分的渲染方式。你在部分类型上分支，将 guards 分支，发送推理到， assistant text 到，，用户文本组成普通段落，而 from 则告诉某个部分是否仍在流媒体，这样 Comark 可以增量渲染。UChatMessagesstatus#contentaiUChatReasoningisPartStreaming``@nuxt/ui/utils/ai

"min-h-dvh flex flex-col py-6">"messages" :status="status" should-auto-scroll class="flex-1">#content="{ message }">"(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">"isReasoningUIPart(part)":text="part.text":streaming="isPartStreaming(part)">"part.text" :streaming="isPartStreaming(part)" />"isTextUIPart(part)">"message.role === 'assistant'":markdown="part.text":streaming="isPartStreaming(part)"/>

"message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}

"input" :error="error" class="sticky bottom-0" @submit="onSubmit">"status" @stop="stop()" @reload="regenerate()" />
UChatPromptSubmit`根据中流布线切换发送、停止和重新装填，并重试。你的推理现在以可折叠的块形式渲染，答案以格式化的Markdown格式流传，配有真实表格和高亮代码，这些都不需维护。`status``stop``regenerate

如何用Nuxt在边缘运行Cloudflare Workers AI？

网关路由通过API密钥到达托管模型。如果要在边缘运行推理，可以直接绑定 Cloudflare Workers AI，这样模型就运行在 Cloudflare 的网络上，没有第三方模型账户。由于实现了相同的 AI SDK 接换只涉及提供者和模型 ID，流、可组合和 Nuxt UI 组件保持原样。workers-ai-provider

安装供应商和Wrangler。

pnpm add workers-ai-provider
pnpm add -D wrangler

声明AI绑定，连同工人条目和Nitro Cloudflare构建产生的静态资产一起。Workers AI 没有本地仿真，所以绑定总是针对 Cloudflare 的网络运行，即使在开发阶段也是如此。wrangler.jsonc

{"$schema": "node_modules/wrangler/config-schema.json","name": "nuxt-ai-2026","compatibility_date": "2026-07-31","compatibility_flags": ["nodejs_compat"],"main": ".output/server/index.mjs","assets": {"directory": ".output/public","binding": "ASSETS"},"ai": {"binding": "AI"}
}

把 Nitro 指向 Cloudflare Workers 预设，这样构建就能针对该运行时。

export default defineNuxtConfig({compatibilityDate: '2026-07-31',devtools: { enabled: true },modules: ['@nuxt/ui', '@comark/nuxt'],css: ['~/assets/css/main.css'],nitro: {preset: 'cloudflare_module'},runtimeConfig: {aiGatewayApiKey: ''}
})

你的边缘路由会镜像网关路由，交换提供商。取绑定，Cloudflare预设在上暴露了该绑定。createWorkersAIAIevent.context.cloudflare.env

import {streamText,convertToModelMessages,createUIMessageStreamResponse,toUIMessageStream,type UIMessage
} from 'ai'
import { createWorkersAI } from 'workers-ai-provider'export default defineEventHandler(async (event) => {const { messages }: { messages: UIMessage[] } = await readBody(event)const workersAI = createWorkersAI({ binding: event.context.cloudflare.env.AI })const result = streamText({model: workersAI('@cf/meta/llama-3.2-3b-instruct'),messages: await convertToModelMessages(messages)})return createUIMessageStreamResponse({stream: toUIMessageStream({ stream: result.stream })})
})

使用当前的Workers AI文本生成模型，因为Cloudflare已弃用旧模型。列出你的账号可以运行什么，并选择一个生成文本的条目。npx wrangler ai models

要在本地运行 Cloudflare 运行时，先构建，然后启动，这为构建的 Worker 提供真实绑定。wrangler dev

pnpm build
npx wrangler dev

确认路线的流向形状和之前一样。

curl -N -X POST http://localhost:8787/api/chat-edge \-H "Content-Type: application/json" \-d '{"messages":[{"id":"1","role":"user","parts":[{"type":"text","text":"Say hello in one short sentence."}]}]}'

帧序列与网关路由完全匹配，因此Nuxt UI的组件渲染该流时没有任何更改。唯一的区别在于内容，而非形状：该模型只输出文本部分，因为 Llama 3.2 3B 不产生推理，因此分支从未触发。UChatReasoning

如何部署到Cloudflare？

有了Cloudflare预设和绑定，你只需一个命令即可部署。Wrangler 基于输出构建，上传 Worker 及其静态资产，并附加声明的绑定。wrangler.jsonc``pnpm build

npx wrangler deploy

它会报告上传的素材、附加的绑定以及你子域名的实时URL。workers.dev

 Success! Uploaded 115 files
Your Worker has access to the following bindings:
Binding            Resource
env.AI             AI
env.ASSETS         Assets
Deployed nuxt-ai-2026 triggershttps://nuxt-ai-2026..workers.dev

你的绑定从本地开发带到生产环境不变，所以部署的边缘路由运行的是同样的 Workers AI 推理，无需额外配置。直接点击实时端点流来确认它。AI

curl -N -X POST https://nuxt-ai-2026..workers.dev/api/chat-edge \ -H "Content-Type: application/json" \ -d '{"messages":[{"id":"1","role":"user","parts":[{"type":"text","text":"Say hello in one short sentence."}]}]}'

你得到的类型流和本地运行是一样的，所以界面在生产环境中表现相同。

你可以实时监控请求击中已部署的工人，该程序会打印每个调用和服务器端的错误。新部署可能需要几秒钟才能在边缘上传播，因此部署后立即触发的请求可能会短暂返回Cloudflare错误，然后Worker就已全部在线。npx wrangler tail nuxt-ai-2026

Nuxt 中的 Edge AI 流媒体有多快？

两条路由部署到同一个工作者，因此基于它们的基准测试网络距离相同，并隔离了推理路径的差异。该线束在每条路由发送十个请求，记录第一个令牌和吞吐量，并报告各次运行的中位数。第一个令牌的时间捕捉连接和模型启动，而第一个令牌后的吞吐量反映流后的生成速度。

const BASE = 'https://nuxt-ai-2026..workers.dev'
const PROMPT = 'Explain what a hash map is in three sentences.'

async function measure(route) { const start = performance.now() let firstTokenAt = null let tokenCount = 0
 const res = await fetch(`${BASE}${route}`, {   method: 'POST',   headers: { 'Content-Type': 'application/json' },   body: JSON.stringify({     messages: [{ id: '1', role: 'user', parts: [{ type: 'text', text: PROMPT }] }]   })})
 const reader = res.body.getReader() const decoder = new TextDecoder()
 while (true) {   const { done, value } = await reader.read()   if (done) break   for (const line of decoder.decode(value).split('\n')) {     if (line.includes('"type":"text-delta"')) {       if (firstTokenAt === null) firstTokenAt = performance.now()       tokenCount++     }   }}
 const end = performance.now() return {   ttft: firstTokenAt - start,   tps: tokenCount / ((end - firstTokenAt) / 1000)}
}

测量中位数，对已部署工人的测量：

路线	模型	TTFT中位数	吞吐量中位数
门户	ling-3.0-flash-free	1943 毫秒	103.5 tok/s
工人AI优势	llama-3.2-3b-instruct	498毫秒	504.0 tok/s

边缘路由到达第一个令牌的速度大约是其四倍，但这并不是一个干净的边缘与托管结果，因为网关模型是一个思考后回答的推理模型，而边缘模型是一个小型指令模型，能够立即输出文本，因此部分差距在于模型行为而非传输。

结论

Vue和Nuxt生态系统现在交付了生产型AI功能所需的一切，从可组合文件到Nuxt UI的聊天组件，再到在边缘运行推理的Workers AI绑定。将托管网关换成边缘绑定后，一条提供者线和一个模型ID都被修改了，因为两者都实现了相同的AI SDK接口，且相同的组件渲染了两条流，且没有任何编辑。以前只有React的版本，现在Nuxt里变成了一个一命令部署。@ai-sdk/vue