Using .env Environment Variables in Vue
Tags: vue, javascript, webdev
Published: 2022-08-16 19:44:00

When we make a Node.js application, it's pretty typical that we also create a `.env` file that stores all of our environment variables. This file is typically private, and can be used to store things like API keys, URLs, and other things that are specific to one environment.

Vue.js also lets us use `.env` variables, but it works slightly differently. So let's look at how to use `.env` variables in Vue.

**Note**: in this guide, I'll be assuming you have `vue-cli-service` installed. You can install it on your project by using `npm install -g @vue/cli`. Vue CLI (`vue-cli-service`) gives us the ability to use `.env` when we run our applications.

## Using .env variables in Vue
In Vue CLI, `.env` works pretty much as you'd expect. In your base directory, you can make a `.env` file like so:

## Typical Vue Folder Structure with .env
```
|- public <-- Our public folder
|- src <-- Our src folder 
|- .env <-- Our .env file
```

In our `.env` file itself, we can start to define our `.env` variables. Vue CLI actually supports a few different names for the `.env` file:
```
.env                # loaded on all projects
.env.local          # loaded on all projects, but ignored by git by default
.env.[mode]         # only loaded in a specific mode
.env.[mode].local   # only loaded in a specific mode, but ignored by git by default
```

You might notice that we have this concept of **mode** above. The mode, in Vue CLI, is the environment you are using. The easiest way to build your Vue application in a specific mode is to run the `vue-cli-service` like this:
```shell
vue-cli-service build --mode development
```

If we ran this command, then `.env`, `.env.local`, `.env.development`, `.env.development.local` would be loaded by Vue - assuming they were available. This means we can have a custom `.env` file depending on the environment we configure our code in.

As well as this, it's good to know that Vue CLI has 3 standard ways of firing `test`, `development`, and `production`:
```shell
vue-cli-service serve     # mode will be 'development'
vue-cli-service test:unit # mode will be 'test'
vue-cli-service build     # mode will be 'production
```

## Using your .env file

Now that it's clear how to make `.env` files, and where they go, let's look at the content of them. The difference between a normal, Node.js `.env` and a Vue CLI one is that Vue will only load variables that start with `VUE_APP_`. So if our `.env` contents look like this:

```shell
VUE_APP_API_KEY = 123-123-123-123
VUE_APP_API_BASE = https://some-app.fjolt.com/api/
topSecretCode = someSecretName
```

Then only `VUE_APP_API_KEY` and `VUE_APP_API_BASE` will be available to use in our Vue application. **All other variables will be ignored**. As well as any variable starting with `VUE_APP_`, you also have access to:
- `NODE_ENV` - the environment depending on which `--mode` is used.
- `BASE_URL` - the URL configured in your `publicPath` variable in `vue.config.js`.

## Using your .env variables in your Vue application
Now that we know how to create the contents of our `.env` files, using them in our files is super easy. You can access any valid variable from your `.env` file via `process.env`. So if you wanted to use `VUE_APP_API_KEY` in your code, you could write this in Javascript:
```javascript
console.log(process.env.VUE_APP_API_KEY)
```

**REMEMBER** - all `.env` variables need `VUE_APP_` at the front to work. So if something doesn't seem to be running, double check you have that.

## Conclusion
`.env` files are a great way to store data about your application by environment, and they're pretty straightforward with a tool like Vue CLI. I hope you've enjoyed this guide to `.env` in Vue. [If you want more Vue content, check out all my articles here](https://fjolt.com/category/vue).