mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-16 02:44:51 +00:00
f26a801775
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
1.8 KiB
1.8 KiB
title | description |
---|---|
Runtime Config | Learn how to migrate from Nuxt 2 to Nuxt 3 runtime config. |
If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config.
When referencing these variables within your components, you will have to use the useRuntimeConfig
composable in your setup method (or Nuxt plugin).
In the server/
portion of your app, you can use useRuntimeConfig
without any import.
:read-more{to="/docs/guide/going-further/runtime-config"}
Migration
- Add any environment variables that you use in your app to the
runtimeConfig
property of thenuxt.config
file. - Migrate
process.env
touseRuntimeConfig
throughout the Vue part of your app.
::code-group
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://nuxtjs.org
::