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

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.