Cannot specify url in .env file vue cli 3

I’m referring to the documentation about environment variables in vue cli 3.

I’m able to set it up and get simple variables to show up but my url in the .env file doesn’t show up.

Contents of the .env file:

FOO=bar
VUE_APP_SECRET=secret
API_URL="https://staging.something.org"

Here is how I’m viewing the env:

console.log(process.env)
BASE_URL: "/"
NODE_ENV: "development"
VUE_APP_SECRET: "secret"

The API_URL is not visible, am I doing something wrong?

Answer

Refer to the documentation.

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:

Your VUE_APP_SECRET is accessible because it’s prefixed with VUE_APP_. Use VUE_APP_API_URL instead of API_URL to access it in your frontend.