I am running into an issue with environment variables in my Nuxt 3 app deployed on Azure App Service
I have added this variable in azure configuration
NUXT_PUBLIC_APPINSIGHT_CONNECTION_STRING = ".....VALUE"
In my nuxt.config.ts i am referencing it like this
export default defineNuxtConfig({
runtimeConfig: {
azureAppInsightsConnectionString: process.env.NUXT_PUBLIC_APPINSIGHT_CONNECTION_STRING,
public: {
azureAppInsightsConnectionString: process.env.NUXT_PUBLIC_APPINSIGHT_CONNECTION_STRING
},
},
})
when i log locally it works perfectly but in staging when try to get it from azure env variable its not working.
2 Replies
Hi @mohammad seliya. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, I can see this is a common issue with Nuxt 3 environment variables in production environments. Here's what you need to know:
The Issue
When you use
process.env in nuxt.config.ts, those values are read at build time, not at runtime. This means the environment variables need to be available when you build your application, not just when you deploy it to Azure.
Solution
According to the Nuxt documentation on runtime config, Nuxt has a built-in convention for environment variables. You should not use process.env directly in your runtimeConfig. Instead, define empty defaults and let Nuxt automatically map the environment variables:
Nuxt will automatically map environment variables that follow this naming convention:
- NUXT_PUBLIC_AZURE_APP_INSIGHTS_CONNECTION_STRING for public.azureAppInsightsConnectionString
- NUXT_AZURE_APP_INSIGHTS_CONNECTION_STRING for the private azureAppInsightsConnectionString
Note that Nuxt converts the camelCase property names to SCREAMING_SNAKE_CASE with underscores.
Update Your Azure Configuration
Change your Azure App Service environment variable name to match Nuxt's convention:
This approach ensures that environment variables are properly read at runtime in your deployed Azure environment, as demonstrated in similar cases from the knowledge sources about using different API URLs based on environment and Azure deployment scenarios.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@808681375909281802> Kapa.ai is still learning and improving, please let me know how I did by reacting below.