Nuxt.js:RuntimeConfigで環境変数を参照する(V3)
https://1.bp.blogspot.com/-x9f6PQGbn-I/UnIEWgdbRPI/AAAAAAAAaDU/P14F4NKdqcI/s400/yama_fukei.png
⚠この記事は Nuxt.js 3 を対象としています。Nuxt.js 2 に対応した内容は以下を参照してください。
Nuxt.js 3 において、環境変数など動的な値を使用する場合は Nuxt.js 2 と同じく RuntimeConfig を使用する Nuxt.js 2 にあった config.env は廃止され、ビルド時の環境変数を埋め込む機構は廃止になった
nuxt.config.jsで設定する
サーバーとクライアントの両方で参照したい場合は「runtimeConfig.public」を指定する
サーバーのみで参照できればいい場合は「runtimeConfig」直下に値を設定する
NUXT_XYZ や NUXT_PUBLIC_XYZ など規定の環境変数名が与えられている場合はその内容で設定が書き換えられる
code:ts
module.exports = {
runtimeConfig: {
xyz: 'something', // NUXT_XYZ がある場合はこの値が書き換わる
public: {
xyz: 'dummy', // NUXT_PUBLIC_XYZ がある場合はこの値が書き換わる
}
}
}
設定した値を使用する
useRuntimeConfig で値を参照する (Nuxt.js 3.x の場合)
code:vue
<script setup lang="ts">
const config = useRuntimeConfig()
// Public Runtime Config を参照する場合は以下の様にする
console.log(config.public.xyz)
</script>
なお、この記事を書いている時点では Nuxt Bridge を使用した際に useNuxtApp と useRuntimeConfig が SSR 時点で動作しないことが報告されている