開発環境でAPIのURLをhttp://localhost:8000などでハードコーディングしてしまうと本番環境へデプロイ したときとても不便です。envファイルを使用することで、あらかじめ開発環境と本番環境で使用する値を容易に切り替えることができます。

PHPのフレームワークLaravelではenvファイルによる値の切り替え機能が提供されていますが、Nuxt.jsでは別途ライブラリをインストールして設定しないと使用することができません。

今回はNuxt.jsでenvファイルの環境変数を取得する方法を解説していきます。

envファイルを作成する

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

nuxt/dotenvをインストールする

@nuxtjs/dotenvはNuxt.jsでenvファイルを読み込むことができるライブラリです。
https://github.com/nuxt-community/dotenv-module

@nuxtjs/dotenvをインストールします。

npm install @nuxtjs/dotenv

nuxt.config.jsのmodulesに追記

modulesに@nuxtjs/dotenvを追記します。

modules: [
  '@nuxtjs/dotenv',
],

envファイルに変数を記述する

プロジェクトのルートディレクトリに作成した.envファイルに以下のように変数を定義し値を格納します。

# APIのURL
API_URL=http://localhost:8000

※envファイルに設定する変数名は大文字かつスネークケースで定義します。

envファイルに記述した環境変数を取得する

envファイルに定義した値を取り出すには、process.env.変数名で値を取得することできます。

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'IndexPage',
  mounted() {
    console.log(process.env.API_URL)
  }
})
</script>

終わりに

このやり方が一番簡単ですが、nuxt.config.jsにいろいろ書く方法もあったりします。しっかり調べていない部分もあるためどちらが良いかはわかりませんがセキュリティ的な部分を考慮するとenvファイルをみられても問題ないもので使用するのであれば大丈夫であろうと見ています。まだ、Nuxt.jsも学び途中という部分もあるため詳しい方がいましたらコメントいただければ幸いです。