【概要】

Nuxt.jsでenv機能を設定する方法についてまとめます。

【詳細】

1. dotenvモジュールをインストールする

npm i @nuxtjs/dotenv

2. .envファイルを作成する

プロジェクトのディレクトリ直下に.envファイルを作成します。

例として下記を設定内容とします。

API_KEY = 'This is API_KEY'
TEST = 'テスト項目です。'

※ 基本的にenvファイルに記述されている内容は外部に漏れてはいけない内容です。

デフォルトで.gitignoreに.envが記述されている事が多いですが、必ず確認するようにしましょう。

3. nuxt.config.jsに設定を行う

ここではAPI_KEYとTESTという定数名に対してenv設定を行います。

export defaultの記述前にenvを読み込む設定を記述します。

export defaultの内部にenv部分を作成し、読み込む定数名を記述します。

env内容を追加する場合は定数部分（const）とexport defaultのenv部分にカンマ区切りで定数名を追加して下さい。

require('dotenv').config();
const { API_KEY, TEST } = process.env;

export default {
  ...省略...
  env: {
    API_KEY,
    TEST,
  }
}

4. vueファイルにて読み込み設定

「process.env.定数名」でenvの設定を読み込めます。

Nuxt.jsにAPIサーバーを構築した場合でも上記の記法で設定を読み込む事が可能です。

試しにindex.vueにて読み込んでみます。

・/pages/index.vue

<script>
export default {
  mounted() {
    console.log(process.env.API_KEY);
    console.log(process.env.TEST);
  }
}
</script>

5. Nuxt.jsを起動して確認

下記のコマンドでNuxt.jsを起動し、ブラウザのConsoleに.envに記述した内容が出力されれば成功です。

・出力結果例

This is API_KEY
テスト項目です。