Nuxt

使用 Nuxt CLI 安装模块：

bash

npx nuxi module add vue-llm

或者手动添加，vue-llm 和 vue-llm/nuxt 都可以：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-llm/nuxt'],
  runtimeConfig: {
    vueLlm: {
      openaiApiKey: '', // NUXT_VUE_LLM_OPENAI_API_KEY
      anthropicApiKey: '', // NUXT_VUE_LLM_ANTHROPIC_API_KEY
    },
  },
})

该模块会：

自动导入 useChat、useCompletion、useObject、usePrompt、createPrompt、createChatPrompt、defineTool；
自动导入提供方工厂函数 createOpenAI、createAnthropic、createGoogle、createOllama、createSSEProvider、createWebLLM 和 isWebGPUSupported；
注册 <MessageParts> 和 <StreamMarkdown> 组件。你自己的同名组件优先级更高；
添加组件的样式表；
在开发环境中，如果安装了 @vue/devtools-api，会在 Vue DevTools 中添加 LLM 标签页。可以通过 vueLlm: { devtools: false } 关闭。

服务端路由

// server/api/chat.post.ts
import { createLLMHandler } from 'vue-llm/server'
import { createOpenAI } from 'vue-llm/providers'

const config = useRuntimeConfig()

const handler = createLLMHandler({
  provider: createOpenAI({ apiKey: config.vueLlm.openaiApiKey }),
  model: 'gpt-4o',
})

export default defineEventHandler(event => handler(toWebRequest(event)))

页面

vue

<script setup lang="ts">
import { createProxyProvider } from 'vue-llm/server'

const { messages, input, handleSubmit } = useChat({
  provider: createProxyProvider('/api/chat'),
  model: 'gpt-4o',
})
</script>

Nuxt ​

服务端路由 ​

页面 ​

Nuxt

服务端路由

页面