The process.env.variable works in local development but after deploying to Heroku it stops working. I use nuxt.js [closed] - heroku

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 13 days ago.
Improve this question
process.env.variable is working in local development but after deploying to Heroku its not working again. I use nuxt.js
The value shows as undefined:
https://prnt.sc/l1GMK6xAQP-V
The config var is correct. I restarted the app. still nothing.

Answer 1

Got it!
.env file:
BASE_URL=http://localhost:3000
ORIGIN_HEADER=localhost
nuxt.config.js
export default {
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL,
originHeader: process.env.ORIGIN_HEADER
}
}
.vue component:
<template>
<div>
<p>Base URL: {{ baseUrl }}</p>
<p>Origin Header: {{ originHeader }}</p>
</div>
</template>
<script>
export default {
computed: {
baseUrl() {
return this.$config.baseUrl
},
originHeader() {
return this.$config.originHeader
}
}
}
</script>
publicRuntimeConfig is intended to be used for configuration values that are safe to be publicly exposed, such as API endpoints or public-facing URLs.
privateRuntimeConfig, on the other hand, is intended for configuration values that should be kept private and should not be publicly exposed, such as API keys or secrets.