How to Use Environment Variables in Vue 3

Please anyone help me: :pray:

.env

script

Do you use Vite? If so, then the name of your environment variables need to start with VITE_.

1 Like

@PeppeL-G Thanks for replying. But I am not using the Vite.

Hello I believe this video can help you, I will not need Vite exactly but you can use its plugin:

@Merieli Thanks for replying. But I have already completed this

main.js

script

Glad you got this resolved for you!
But using environment variables outside the .env file is incorrect, what you did was create a variable with capital letter. I advise you to research to better understand the purpose of an environment variable.

Take a look at node.js - Using Environment Variables with Vue.js - Stack Overflow

1 Like

I haven’t used Vite yet, this is how I go about it using Vue CLI. Create a ‘.env.local’ file and save your environmental variables there. Make sure you add that to .gitignore so that you don’t push it to a remote repo. Depending on the platform you are hosting your frontend you can set the environment variables in the deployment settings. I’ve done that with Netlify and Heroku.