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