VueJS 3 CLI environment variables secret isn't working

Question

I'm new to vue .env. I looked everywhere for a straight answer till I got lost. According to VueJS documentation that if we have .env.local file that will be loaded in all cases but will be ignored by git which exactly what we want to hide secret API keys from the public. But it also says that if we add VUE_APP before the key name in .env.local that will make our key load to the public.

My question is. How to securely hide API key from the public and still be able to use it in production and in development without any security risks?

my .env.local file

VUE_APP_DEEPGRAM_KEY=some_API_key_that_is_secret

the above works if I log it to the console from my app. but if i removed VUE_APP It won't work so is it safe to leave it like this?

Anothe thing, in Laravel we used to save API keys in .env and refer to them from config file and then call them in app from config. So is Vue different? if not, then how to do the same here?

Answer 1

To answer my own question, documentation is actually pretty obvious but I got a bit confused. it simply has to start with VUE_APP_ for it to work in Vue CLI