DEV Community

Cover image for How to Use Environment Variables in Vue.js
Jennifer Bland
Jennifer Bland

Posted on • Originally published at on

How to Use Environment Variables in Vue.js

Most applications will access data from an API. To access that API you will need to have an API key and the URL to access the API. You should not be pushing your API keys to you repo because that makes them available to everyone. The solution is to store your API keys in environment variables. So how do you access environment variables in a Vue.js application? Let me show you how.

The best way to start is to have a project that was created using the Vue-CLI. If you used this then it automatically setup your project to use webpack for the build process making it much easier for you to use environment variables.

Adding .env Files

Your environment variables will be stored in .env files. This file must exist in the root directory of your application. To create an .env file use this command:

touch .env
Enter fullscreen mode Exit fullscreen mode

The .env file will contain your environment variables. Most applications will have variables that are specific to the environments for dev, QA and prod. To account for that you can create environment specific files. If you want to create files for development and productions they would have the name of:

Enter fullscreen mode Exit fullscreen mode

The contents of the .env file will be available in all environments. The .env.development.local file will only be available in development. The .env.production.local file will only be available in production environment.

You can put environment variables that will be the same across all environments in the .env file. Then put environment specific variables in the appropriate file.

NOTE: You should not include any of the .env files in your repo. Add all your .env files to your .gitignore file so they will not be committed to your repo.

Adding Content to Environment Files

The environment variables are available in a vue application  I have added the following line to my .env file. This variable will be available across all environments:

VUE_APP_TITLE=Shared Title
Enter fullscreen mode Exit fullscreen mode

In my .env.development.local file I have added the following line:

Enter fullscreen mode Exit fullscreen mode

In my .env.production.local file I have added the following line:

Enter fullscreen mode Exit fullscreen mode

Accessing Environment Variables

The environment variables can be accessed anywhere in your Vue application through the global process.env object. Here I have added two variables on the data object that contain the title and the url.

data() { 
    return { 
        url: process.env.VUE_APP_URL, 
        title: process.env.VUE_APP_TITLE 
Enter fullscreen mode Exit fullscreen mode

In my application I have the following entry that accesses the environment variables:

URL: {{ url }} 
TITLE: {{ title }}
Enter fullscreen mode Exit fullscreen mode

If I run npm run serve to view my application in development it shows the following:


If I run npm run build and then view my application in production it shows the following:


Training Courses

I create training courses on my website CodePrep. I have training courses on Vue, Webpack, Flexbox, functional programming and more. Check it out here.

Discussion (14)

shubhamzanwar profile image
Shubham Zanwar

Great article. One thing that wasn't called out was that your env variables must start with 'VUE_APP_' for vue cli to pick them up automatically.

holdenmad profile image

I wish I would have read your comment earlier. I wasted a lot of time trying to figure out why my env variables weren't working, and this was it.

hcmlopes profile image

Doesn't it still hold true that if your app is a client side that your API key will still be exposed, or am I missing something?

thedamon profile image
Damon Muma

Yes. It's security through obfuscation really, worth doing but not the ultimate solution. Ideally you own your endpoint and can hide any public keys serverside (in .env files) and route your traffic through that.

turbopasi profile image
Pascal Lamers

That's true yes . But env variables can also be used for other , non-secret , things . I often use it for a development/production workflow when in development i use other endpoints than in production.

kamalhm profile image

Whoa so this is environment variables!

So when people initialize express port as
process.env.PORT || 5000, we will have to create .env file which has variable PORT in it, right?

Is this environment variables only a thing in JS ecosystem or also applies to other?

ratracegrad profile image
Jennifer Bland Author

Not really. You want to store items that you don't want people to have access to. The port your server is running on is not necessarily a secret. If you are say using firebase for authentication then you would not want your firebase API keys available to everyone. In that case you would put that information in your .env file.

thedamon profile image
Damon Muma

If I have config that isn't secret but does change from environment to environment I personally would store it in an env file that isn't in the gitignore. Do you recommend a different approach?

doannucphys profile image
doannucphys • Edited on

if i have a variable VUE_APP_MY_SECRET in .env file, then when i deploy vue-cli app, can user read process.env.VUE_APP_MY_SECRET from chrome browser console by running process.env.VUE_APP_MY_SECRET from console? how to protect this value from user ?

turbopasi profile image
Pascal Lamers • Edited on

You shouldn't include any secrets in your frontend/clientside code. From the official docs:

Do not store any secrets (such as private API keys) in your app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files."

During the build process all environment variables will simply be swapped with plain text. So in frontend only use env variables for non-secrets.

baronsindo profile image
𝙹𝚒𝚋𝚛āʾī𝚕 ⚡

Something everyone should know is, you should restart the serve service each time you made a change on your .env file

hombregeek profile image

Jennifer .. Thanks for this post. I've got a question Can I use this approach even when my project was not created with Vue-CLI? Thanks in advanced.

flooji profile image

Thanks for that good tutorial!