AI SDK with Vue and Nuxt: @ai-sdk/vue useChat and a server API stream route

TL;DR

Install @ai-sdk/vue for Vue or Nuxt apps. useChat and useObject are available; import from the vue package, not react. Vue and Nuxt use @ai-sdk/vue. Install @latest and keep it paired with the ai version it declares.

When to use

You are seeing this: The client hook API matches React; the server side is a Nuxt server route returning the standard stream response. Use this skill when you run into "AI SDK with Vue and Nuxt: @ai-sdk/vue useChat and a server API stream route".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Vue and Nuxt use @ai-sdk/vue. The client hook API matches React; the server side is a Nuxt server route returning the standard stream response.

Setup:

pnpm add ai @ai-sdk/vue zod

Server (server/api/chat.post.ts):

import { convertToModelMessages, createUIMessageStreamResponse, streamText, toUIMessageStream } from 'ai';

export default defineEventHandler(async (event) => { const { messages } = await readBody(event); const result = streamText({ model: 'your-model-id', instructions: 'You are a helpful assistant.', messages: await convertToModelMessages(messages), }); return createUIMessageStreamResponse({ stream: toUIMessageStream({ stream: result.stream }) }); });

Client:

import { useChat } from '@ai-sdk/vue'; import { DefaultChatTransport } from 'ai';

const { messages, sendMessage, status } = useChat({ transport: new DefaultChatTransport({ api: '/api/chat' }), });

Checklist:

1. Install @ai-sdk/vue for Vue or Nuxt apps. useChat and useObject are available; import from the vue package, not react.
2. Nuxt server routes return the Response from createUIMessageStreamResponse directly. Nuxt will send it through untouched.
3. Read the posted body with readBody(event) in Nuxt, equivalent to req.json() elsewhere.
4. await convertToModelMessages(messages) still applies. The wire format is framework-agnostic; only the transport of getting bytes to the client changes.
5. @ai-sdk/vue has its own version line (4.x in the v7 era per npm). Install @latest and keep it paired with the ai version it declares.
6. Keep provider keys server-side in Nuxt runtimeConfig or .env. The client bundle must never contain a provider key.

Verified against the live AI SDK docs 2026-09-26. The docs nav lists Vue.js (Nuxt) as a supported quickstart; npm registry confirms @ai-sdk/vue 4.0.116 in the ai 7.x era with independent versioning. The server wiring (convertToModelMessages, toUIMessageStream, createUIMessageStreamResponse) is confirmed by the chatbot tool-usage guide.