Next

こんにちは、Okadaです。
nuxt3で環境変数を設定する時に詰まってしまったポイントについて紹介していきます。

nuxt.config.ts

nuxt2時と同じように下記の形式で記述をしました。

publicRuntimeConfig: {
    baseUrl: BASE_URL,
    apiKey: API_KEY,
  },

その結果エラーがでてしまいました。

調べてみるとnuxt3では記述方法が変わっていたようです。
■正しい記述

  runtimeConfig: {
    public: {
      baseUrl: BASE_URL,
      apiKey: API_KEY,
    },
  },

publicRuntimeConfigではなく、runtimeConfigにして設定するのが正しいようです。

呼び出し方

呼び出し方は、 useRuntimeConfigを使用して行います。

const $config = useRuntimeConfig();
const { data } = await useFetch("/blog", {
  baseURL: $config.baseUrl,
  headers: {
    "X-MICROCMS-API-KEY": $config.apiKey,
  },
});

■パートナー募集について
運営元であるkraftでは一緒に活動するパートナーを募集しています。
個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。
ご興味のある方は、こちらよりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます)

具体的な内容については以下URLをご確認ください。
パートナー募集の詳細について