ランタイム設定
Nuxt 2 から Nuxt 3 のランタイム設定に移行する方法を学びましょう。
Nuxt 3 アプリ内で環境変数を参照したい場合は、ランタイム設定を使用する必要があります。
コンポーネント内でこれらの変数を参照する場合、セットアップメソッド (または Nuxt プラグイン) で useRuntimeConfig コンポーザブルを使用する必要があります。
アプリの server/ 部分では、インポートなしで useRuntimeConfig を使用できます。
移行
- アプリで使用する環境変数を
nuxt.configファイルのruntimeConfigプロパティに追加します。 - アプリの Vue 部分全体で
process.envをuseRuntimeConfigに移行します。
export default defineNuxtConfig({
runtimeConfig: {
// Private config that is only available on the server
apiSecret: '123',
// Config within public will be also exposed to the client
public: {
apiBase: '/api',
},
},
})
<script setup lang="ts">
const config = useRuntimeConfig()
// instead of process.env you will now access config.public.apiBase
console.log(config.public.apiBase)
</script>
export default defineEventhandler((event) => {
const config = useRuntimeConfig(event)
// In server, you can now access config.apiSecret, in addition to config.public
console.log(config.apiSecret)
console.log(config.public.apiBase)
})
# Runtime config values are automatically replaced by matching environment variables at runtime
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxt.dokyumento.jp