nuxt-api-party

サーバープロキシと動的コンポーザブルで、あらゆるAPIに安全に接続

8.2Kダウンロード•298スター•v3.4.1

Nuxt API Party

Nuxtモジュールは、複数のAPIエンドポイントとのシームレスな統合を提供します。設定した各APIエンドポイントに対して、タイプセーフなコンポーザブルを生成し、NuxtのuseFetchや$fetchと同様の使い慣れた開発体験を提供し、APIクレデンシャルを安全に保ち、サーバープロキシを介してCORS問題を解消します。

機能

🪅 各APIエンドポイントの自動生成コンポーザブル
🔒 Nuxtプロキシルートで保護されたAPIクレデンシャル
🌐 CORS問題なし
🍱 useFetchおよび$fetchに似た使い慣れた開発体験
🧇 すべてのAPIを接続
🦾 OpenAPI仕様からの完全型付けされたAPIクライアント
🗃 スマートキャッシングとハイドレーション

セットアップ

!TIP📖 ドキュメントを読む

npx nuxt module add api-party

基本的な使い方

!TIP📖 ドキュメントを読む

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>

!TIP 必要な数のAPIを接続できます。endpointsオブジェクトに追加するだけです。

💻 開発

このリポジトリをクローンする
corepack enable を使用して Corepack を有効にする
pnpm installを使用して依存関係をインストールする
pnpm run dev:prepare を実行します。
pnpm run dev を使用して開発サーバーを起動します。

スペシャルサンクス

このパッケージの初期バージョンをスポンサーしてくださったDennis Baum氏。
ロゴのピクセルアートを作成してくださったMaronbeere氏。