🔧

[Nuxt3]環境変数の設定で躓いた話

2022/12/22に公開

Nuxt3で環境変数を使いたい

最近、Nuxt3の門を叩きました。
APIをペチペチ叩いていこうと思って、いそいそと.envファイルをプロジェクトルートに作成。
APIKEYを格納しました。

こちらの記事の参考にさせていただいて、以下のようなコードを記述しました。(実際のコードとはちょっと変えてます)

export default defineNuxtConfig({
  publicRuntimeConfig: {
    API_KEY: process.env.APIKEY
  },
});

type NuxtConfigには、そんなパラメータはないと怒られました。
どうやらNuxt2とは記述の仕方が異なるようです。
こちらのページを参照して解決しました。以下のような記述が正しかったみたいです。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      API_KEY: process.env.API_KEY
    },
  },
});

使用するファイルで以下のような記述をします。

const config = useRuntimeConfig();

あとは、使用したい箇所で、config.API_KEYなどとすれば良いです。