nuxt-jsonapi

Nuxt向けの簡単なJSON:APIクライアント統合

394ダウンロード•43スター•v3.0.0

patrickcate

nuxt-jsonapi

Nuxt.js向けの簡単なJSON:APIクライアント統合

📖 リリースノート

バージョン2.xおよび3.xはNuxt 3.xをサポートしています。

バージョン1.xはNuxt 2.xをサポートしています

はじめに

nuxt-jsonapiは、Nuxtに簡単なJSON:APIクライアント統合を追加します。これは、優れたKitsu JSON:APIクライアントのゆるいラッパーです。

このモジュールは、this.$jsonApi (Options API) または const { $jsonApi } = useNuxtApp() (Composition API) を使用して、どこからでもクライアントにアクセスできる$jsonApiインスタンスをグローバルに注入します。

セットアップ

プロジェクトにnuxt-jsonapiの依存関係を追加します

npm install nuxt-jsonapi

nuxt-jsonapiをnuxt.config.jsのmodulesセクションに追加します

{
  modules: [
    // Simple usage
    'nuxt-jsonapi',

    // With options
    [
      'nuxt-jsonapi',
      {
        baseURL: 'http://www.example.com/api',
        /* other module options */
      },
    ],
  ]
}

ステップ2でオプションを渡さなかった場合は、モジュールオプションを設定するためにnuxt.config.jsにjsonApiオブジェクトを追加してください

export default {
  modules: ['nuxt-jsonapi'],

  jsonApi: {
    baseURL: 'http://www.example.com/api',
    /* other module options */
  },
}

❗ 重要

baseURLオプションを指定しない場合、デフォルトの/jsonapi URLが使用されます。これはほとんどの場合、意図したものではありませんので、正しく設定されていることを確認してください。

使用方法

クライアントが提供するすべての機能については、Kitsuの優れたドキュメントを参照してください。

クライアントには以下でアクセスできます

Options API

this.$jsonApi

例

export default defineNuxtComponent({
  async asyncData({ $jsonApi }) {
    const { data } = await $jsonApi.get('/article')

    return {
      articles: data,
    }
  },
})

コンポジションAPI

const { $jsonApi } = useNuxtApp()

例

<script setup>
import { useNuxtApp, useAsyncData } from '#app'

const { $jsonApi } = useNuxtApp()

const { data: articles } = await useAsyncData(() => $jsonApi.get('/article'), {
  transform: ({ data }) => data,
})
</script>

開発

このリポジトリをクローンする
yarn install または npm install を使用して依存関係をインストール
yarn dev または npm run dev を使用して開発サーバーを起動
yarn testまたはnpm run testを使用して自動テストを実行します

型スタブを生成するには、npm run dev:prepareを実行してください。
開発モードでプレイグラウンドを開始するにはnpm run devを使用します。

ライセンス

MITライセンス