Using .env Environment Variables in Vue
📣 Sponsor
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:
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
:
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:
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 yourpublicPath
variable invue.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:
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.
More Tips and Tricks for Vue
- The Difference Between the Composition API and Options API in Vue
- How Vue Components Work
- Using .env Environment Variables in Vue
- How Provide and Inject work in Vue
- Creating a Websocket Server in Vue.js
- A Guide to Understanding Vue Lifecycle Hooks
- How to use Vue Template Refs to Access HTML Elements
- Navigation between views in Vue with Vue Router
- Vue Tips: Optimize your Vue Apps with v-once and v-memo
- Creating a Reusable Tab Component in Vue