こんにちは、Okadaです。
nuxt3で環境変数を設定する時に詰まってしまったポイントについて紹介していきます。

nuxt.config.ts

nuxt2時と同じように下記の形式で記述をしました。

publicRuntimeConfig: {
    baseUrl: BASE_URL,
    apiKey: API_KEY,
  },

その結果エラーがでてしまいました。

調べてみるとnuxt3では記述方法が変わっていたようです。
■正しい記述

  runtimeConfig: {
    public: {
      baseUrl: BASE_URL,
      apiKey: API_KEY,
    },
  },

publicRuntimeConfigではなく、runtimeConfigにして設定するのが正しいようです。

呼び出し方

呼び出し方は、 useRuntimeConfigを使用して行います。

const $config = useRuntimeConfig();
const { data } = await useFetch("/blog", {
  baseURL: $config.baseUrl,
  headers: {
    "X-MICROCMS-API-KEY": $config.apiKey,
  },
});