If you face a problem with loading .env variables in your Vue 3 App check this out!
Probably you add your variables to .env file – and then try to use them in app, lets say you add this 3 vars:
API_BASE_URL=http://x.x.x.x:yyyy/vueproject
APP_TITLE=My App
APP_VAR=My Var
and then you want to use them in app
mounted() {
console.log(process.env.API_BASE_URL);
console.log(process.env.APP_TITLE);
console.log(process.env.APP_VAR);
}
The result will be below ( not working 🙁 )
undefined
undefined
undefined
To fix a problem with env variables in Vue 3 you must just add VUE_APP_
before each variable so it will be looks like that:
VUE_APP_API_BASE_URL=http://x.x.x.x:yyyy/vueproject
VUE_APP_TITLE=My App
VUE_APP_VAR=My Var
And that’s all! 🙂 Easy and fast fix for env variables in Vue 3