paint-brush
How to Use .env Environment Variables in Vueby@smpnjn
27,866 reads
27,866 reads

How to Use .env Environment Variables in Vue

by Johnny SimpsonAugust 16th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Vue allows us to use 'env' variables in our Vue application. Vue can only use variables that start with 'VUE_APP_' and 'Vue_API_KEY' Vue-CLS lets us use these variables when we run our applications. Using your.env variables in your application is super easy to use from your own.env file. The Vue.env. file is typically private, and can be used to store things like API keys, URLs and other things that are specific to one environment.

Company Mentioned

Mention Thumbnail
featured image - How to Use .env Environment Variables in Vue
Johnny Simpson HackerNoon profile picture


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 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 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:


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 the environment, and they're pretty straightforward with a tool like Vue CLI. I hope you've enjoyed this guide to .env in Vue.


Also published here.