以前、下記の記事で環境変数の登録の仕方をご紹介しました。
https://next-blog.site/media/nuxt-env

登録した環境変数を使う際に少し躓いたので備忘録として記載していきます。

.envの準備

環境変数を.envに設定している前提で話を進めます。

API_KEY = xxxxxxxxxxxxxxxxxxxx

まだ設定ができていない方は、こちらをみて行ってください。

環境変数の呼び出し

pages/index.vueにて

  async asyncData({ $config }) {
    const url = 'https://xxx.microcms.io/api/v1/xxxx'
    const limit = 10
    const hoge = await axios.get(`${url}?limit=${limit}`, {
      headers: { 'X-MICROCMS-API-KEY': $config.API_KEY },
    })
    return {
      lists: hoge.data.contents,
    }
  },

asyncDataを使って$config経由で環境変数を取得することができました。
色々な記事を見てみるとこれが一般的な取得方法になるようです。


しかし、components内のコンポーネントにて$configを使ったところうまく取得することができませんでした。
おそらく私の知識不足でうまく定義ができていないのだと思います。

とりあえず下記のような方法でコンポーネントでも環境変数を使えるようにしました。

store/api/index.jsにて

export const state = () => ({
  api: process.env.API_KEY,
})

export const getters = {
  getApiData(state) {
    return {
      api: state.api,
    }
  },
}

store経由で取得してみようという感じですね。

components/hoge.vue

  data() {
    return {
      api: '',
    }
  },  
created() {
    const getApiData = this.$store.getters['api/getApiData']
    this.api = getApiData.api
  },

created時にstoreから情報を取得してdataのapiに情報を渡しています。
以上でしっかりと環境変数を使うことができるようになりました。

  mounted() {
    this.hoge()
  },
methods: {
  hoge() {
   console.log(this.api)
  }
}

コンソールに出力されていれば成功です。

間違いなくもっとスマートなやり方があります。
1つのやり方としてご紹介させていただきました。