こんにちは、柴田です。

Nuxt.jsはv2.13よりFull Static Generationが出来るようになり、益々便利になりました。
全てを静的化し、Jamstack構成にしている方も多いと思います。

Jamstack構成であれば、ブラウザからAPIをコールされる心配はなくなりますが、実はAPIキーがソースコードの中に残っているケースが多いです。（検索したところ、間違った情報を発信しているサイトも多いです）

ちなみに良く見かける以下の方法ではAPIキーの隠蔽ができていません。

NG1: process.env経由での利用

環境変数としてAPIキーを定義し、APIリクエスト時にprocess.env.API_KEYで参照する方法です。
こちらは一見正しそうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまいます。
よって、バンドルされたJSファイルにはAPIキーの値が含まれています。

NG2: nuxt.config.jsのenvを利用

nuxt.config.jsのenvプロパティにAPIキーを設定して、asyncDataの引数から参照する方法です。
この方法では、asyncData内のAPIキーは変数となりソースコードからは読み取れませんが、大元のnuxt.config.jsのenv設定部分がクライアント側から読める状態になってしまっています。（/_nuxt/app.xxxxxxxx.js内に記載）

解決策

nuxt.config.jsのenvがサーバーからもクライアントからも読み取れる値になってしまっていることがそもそもの原因となります。
Nuxt v2.13より、nuxt.config.jsにpublicRuntimeConfigとprivateRuntimeConfigというプロパティが追加されましたので、こちらを利用します。

参考：https://ja.nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

この内、privateRuntimeConfigで設定する値はサーバサイドのみで使用されるため、フロントエンドからは完全に隠蔽されます。
また、開発中（npm run dev時）はクライアントサイドでも処理は行われるため、開発中のみpublicRuntimeConfigでapiKeyを扱えるようにします。
publicRuntimeConfigの値はprivateRuntimeConfigによって上書きされます。

以下のように実装すると良いでしょう。

nuxt.config.js

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

export default {
  privateRuntimeConfig: {
    apiKey: API_KEY
  },
  publicRuntimeConfig: {
    apiKey: process.env.NODE_ENV !== 'production' ? API_KEY : undefined
  },
  // 略
}

pages/index.vue

<script>
import axios from 'axios';
export default {
  async asyncData({ $config }) {
    const { data } = await axios.get(
      'https://microcms.microcms.io/api/v1/blog',
      { headers: { 'X-MICROCMS-API-KEY': $config.apiKey }}
    );
  }
}

クライアントからAPIを呼び出す必要がある場合

記事一覧や詳細ページなどはJamstack構成によってビルド時にページを生成しますが、検索ページや下書きプレビューページはクライアントからAPIを呼び出す必要があります。
このような場合にAPIキーを隠すためには、サーバサイド経由でリクエストを送る必要があります。

NetlifyのNetlify Functionsや、Next.jsのAPI Routes、AWSのLambdaあたりを使うのが一般的でしょうか。
このあたりは別で記事を用意しますので、今しばらくお待ちください。

nuxt-microcms-moduleを使えば対応必要なし

※ 2021/7/1追記
Nuxt.js用モジュールであるnuxt-microcms-moduleを用いることで、簡単にAPIキーの隠蔽ができるようになりました。
詳しくは下記の記事をご覧ください。
https://blog.microcms.io/nuxt-microcms-module/

おわりに

microCMSに限らず、様々なサービスにAPIキーに相当するものが存在します。
サービスの利用方針によってはAPIキーを特に隠す必要がない場合もあります。
基本的にAPIキーまわりの管理は自己責任となりますので、導入先のサービスのセキュリティ要件に合わせて正しく実装しましょう。

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、メールからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！