When we make a Node.js application, it's pretty typical that we also create a 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. .env Vue.js also lets us use variables, but it works slightly differently. So let's look at how to use variables in Vue. .env .env : In this guide, I'll be assuming you have installed. You can install it on your project by using . Vue CLI ( ) gives us the ability to use when we run our applications. Note vue-cli-service npm install -g @vue/cli vue-cli-service .env Using .env variables in Vue In Vue CLI, works pretty much as you'd expect. In your base directory, you can make a file like so: .env .env Typical Vue Folder Structure with .env |- public <-- Our public folder
|- src <-- Our src folder 
|- .env <-- Our .env file In our file itself, we can start to define our variables. Vue CLI actually supports a few different names for the file: .env .env .env .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 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 like this: mode vue-cli-service vue-cli-service build --mode development If we ran this command, then , , , would be loaded by Vue - assuming they were available. This means we can have a custom file depending on the environment we configure our code in. .env .env.local .env.development .env.development.local .env As well as this, it's good to know that Vue CLI has 3 standard ways of firing , , and : test development 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 files, and where they go, let's look at the content of them. The difference between a normal, Node.js and a Vue CLI is that Vue will only load variables that start with . .env .env VUE_APP_ So if our contents look like this: .env VUE_APP_API_KEY = 123-123-123-123
VUE_APP_API_BASE = https://some-app.fjolt.com/api/
topSecretCode = someSecretName Then only and will be available to use in our Vue application. . As well as any variable starting with , you also have access to: VUE_APP_API_KEY VUE_APP_API_BASE All other variables will be ignored VUE_APP_ - the environment depending on which is used. NODE_ENV --mode - the URL configured in your variable in . BASE_URL publicPath vue.config.js Using your .env variables in your Vue application Now that we know how to create the contents of our files, using them in our files is super easy. You can access any valid variable from your file via . So if you wanted to use in your code, you could write this in Javascript: .env .env process.env VUE_APP_API_KEY console.log(process.env.VUE_APP_API_KEY) - all variables need at the front to work. So if something doesn't seem to be running, double-check you have that. REMEMBER .env VUE_APP_ Conclusion 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 in Vue. .env .env Also published . here

Super

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

How to Use .env Environment Variables in Vue

How to Use .env Environment Variables in Vue

Too Long; Didn't Read

Company Mentioned

@smpnjn

RELATED STORIES