📝

Nuxt3 Date Fetching で共通オプションを設定する

ざき

2023/07/04に公開

Nuxt

Nuxt 3

tech

useFetch, useAsyncData, $fetch にて Bearer のようなシステム共通で利用するヘッダー等を設定する方法を記載する。

結論

にて、解決方法が示されている。

$fetch を利用する場合

Nuxt3 の $fetch は以下 unjs/ofetch を利用しており、以下 Create fetch with default options を参考にするとよい。

次のようにすると server/api 配下に記述した API の型推論を失うことなく利用可能。

composables/api.ts

export const useApi = () => {
  // API で利用する token を取得
  const { token } = useApiToken();

  // $fetch の代わりに $api を利用する
  const $api = $fetch.create({
    ...{
      headers: {
        Authorization: `Bearer ${token}`,
      },
    },
  });

  return {
    $api,
  };
};

GitHubで編集を提案

株式会社ビザスクPublication

ビザスクは「知見と、挑戦をつなぐ」をミッションに、世界中の知見をつなぐナレッジプラットフォームをつくっています。様々なニーズにつなぐことで、実際に経験したことで得られた知識や意見を、知見として価値最大化します。組織、世代、地域を超えて、知見を集めつなぐことで、世界中のイノベーションに貢献します。

結論

$fetch を利用する場合

Discussion