Nuxt API Party

Nuxt 模块，提供与多个 API 端点的无缝集成。它为配置的每个 API 端点生成类型安全的可组合项，提供类似于 Nuxt 的 useFetch 和 $fetch 的熟悉开发体验，同时通过服务器代理保护您的 API 凭据安全并消除 CORS 问题。

• ✨  发布说明
• 📖  阅读文档

功能

• 🪅 为每个 API 端点自动生成可组合项
• 🔒 使用 Nuxt 代理路由保护 API 凭据
• 🌐 无 CORS 问题
• 🍱 熟悉 useFetch 和 $fetch 的开发体验
• 🧇 连接所有 API
• 🦾 从 OpenAPI 规范生成完全类型化的 API 客户端
• 🗃 智能缓存和水合

设置

!提示📖 阅读文档

npx nuxt module add api-party

基本用法

!提示📖 阅读文档

将 Nuxt API Party 添加到您的 Nuxt 配置中，并通过为 apiParty 模块选项设置具有以下属性的端点对象来准备您的第一个 API 连接

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-api-party'],

  apiParty: {
    endpoints: {
      jsonPlaceholder: {
        url: process.env.JSON_PLACEHOLDER_API_BASE_URL!,
        // Global headers sent with each request
        headers: {
          Authorization: `Bearer ${process.env.JSON_PLACEHOLDER_API_TOKEN}`
        }
      }
    }
  }
})

如果您将您的 API 命名为 jsonPlaceholder，则生成的组合式函数为

• $jsonPlaceholder – 返回响应数据，类似于 $fetch
• useJsonPlaceholderData – 返回多个值，类似于 useFetch

在您的模板或组件中使用这些可组合项

<script setup lang="ts">
const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
</script>

<template>
  <h1>{{ data?.title }}</h1>
  <pre>{{ JSON.stringify(data, undefined, 2) }}</pre>
</template>

!提示 您可以连接任意数量的 API，只需将它们添加到 endpoints 对象中。

💻 开发

1. 克隆此仓库
2. 使用 corepack enable 启用 Corepack
3. 使用 pnpm install 安装依赖
4. 运行 pnpm run dev:prepare
5. 使用 pnpm run dev 启动开发服务器

特别感谢

• Dennis Baum 赞助了此包的初始版本。
• Maronbeere 贡献了标志像素艺术。

许可证

MIT 许可证 © 2022-PRESENT Johann Schopplich

MIT 许可证 © 2025-PRESENT Matthew Messinger