Nuxt API Party

Nuxt モジュールで、あらゆるAPIに安全に接続できます。

特徴

🪅 生成されたコンポーザブル
🔒 クライアントで保護されたAPI認証情報
🪢 トークンベースの認証が組み込まれているか、独自のヘッダーを使用
🧇 複数のAPIエンドポイントを接続
🍱 useFetch と同じような感覚
🗃 キャッシュされたレスポンス
🦾 強力な型付け

セットアップ

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

npx nuxi@latest module add nuxt-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>