How do I store my private api key on Vue.js app?

You can store your key either in VUE_APP_NOT_SECRET_KEY=not_secret_key or SECRET_KEY=secret_key, there is no difference from security point of view, any one with a minimal front end skill get read this values from the browser.

The only difference is that if you use the VUE_APP_* prefix your variable will be in the process.env, and will be replaced by Vue in compile time using the DefinePluing.

cli.vuejs.org/guide/mode-and-env.html#environment-variables –

NOTE WELL: Anything you store in the Vue app is not secret.

You can create a .env file in the root of the project, next to package.json

In that file, you can create your environment variables asVUE_APP_SOME_KEY="someValue"

Make sure the name starts with VUE_APP_

Then where ever you want to use it you can doprocess.env.VUE_APP_SOME_KEY

Also don't forget to add .env file to .gitignore

You should be using a product like Key Vault from Microsoft. Key Vault is part of Azure services.

Best practice in the industry is to store your secrets on another server.

Microsoft provides such a way through key vault and can be easily implemented.

There are other products out there. See the azure keyvault competitor's list

Edit : I also forgot to mention, you cannot at this time use KeyVault per example directly on frontend app (single page app). You need to split the backend and frontend for it to work, otherwise you will not be able to hit the keyvault client.