【Nuxt3】runtimeConfig で環境変数を読み込む
Nuxt3 では runtimeConfig という実行時の設定をロードする仕組みが提供されていてそれを使って環境変数を指定するように推奨されていたので(参照)、今回はこちらの実装方法を残しておきます。
env ファイル設定
以下の様なオブジェクトを例として local.ts (ローカル環境)として作成します。
export default {
HOGE: {
NAME: 'local-test'
}
}
上記のようなファイルを st.ts, prod.ts の様に環境毎に用意して読み込むことになります。
nuxt.config.ts
nuxt.config.ts 内の ※defineNuxtConfig で先ほどのenvファイルを指定していきます。
※現在のバージョン(rc11)では defineNuxtConfig はauto import となり記述を省略することが推奨されている様で、以下記述だと defineNuxtConfig の記述部分が deprecated となります。
const env = require(`./env/${process.env.ENV}.ts`);
export default defineNuxtConfig({
// 省略
runtimeConfig: {
public: env,
}
// 省略process.env.ENV の部分は起動時に cross-env を使用して cross-env ENV=local の様に指定した値が入ります。
環境変数の使用 useRuntimeConfig
これで以下のように各コンポーネントなどで useRuntimeConfig を通して環境変数を参照できる様になります。
const config = useRuntimeConfig()
// 'local-test'
const ENV_NAME = config.public.HOGE.NAME 最後に
本件は以上ですが余談です。
この前まで正式なリリースは MidSummer となっていたと思ったのですが気づけば Autumn, 2022 となっています。(参照)
現在携わっているシステムはリリースがだいぶ先になりそうなので良いですが正式リリースがまた延長するとやや不安ですね、、
学習書籍
