Using Environment Variables with Vue.js

Vue.js with Webpack

If you use vue cli with the Webpack template (default config), you can create and add your environment variables to a .env file.

The variables will automatically be accessible under process.env.variableName in your project. Loaded variables are also available to all vue-cli-service commands, plugins and dependencies.

You have a few options, this is from the Environment Variables and Modes documentation:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Your .env file should look like this:


As noted in comment below:
If you are using Vue cli 3, only variables that start with VUE_APP_ will be loaded.

Don’t forget to restart serve if it is currently running.

Vue.js with Vite

Vite exposes env variables that start with VITE_ on the special import.meta.env object.

Your .env should look like this:


These variables can be accessed in Vue.js components or JavaScript files under import.meta.env.VITE_API_ENDPOINT and import.meta.env.VITE_API_KEY.

Tip: Remember to restart your development server whenever you change or add a variable in the .env file if it’s running.

For more info, please see the Vite documentation for env variables.

Leave a Comment