Using Environment Variables with Vue.js

by

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:

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

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:

VITE_API_ENDPOINT=value
VITE_API_KEY=value

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.

More Related Contents:

  1. Setting Environment Variables for Node to retrieve
  2. How can I solve error gypgyp ERR!ERR! find VSfind VS msvs_version not set from command line or npm config?
  3. Test process.env with Jest
  4. Why is ‘type: module’ in package.json file?
  5. Node.js setting up environment specific configs to be used with everyauth
  6. How to change value of process.env.PORT in node.js?
  7. “Cannot use import statement outside a module” with Axios
  8. Toggle between multiple .env files like .env.development with node.js
  9. How do you turn a Mongoose document into a plain object?
  10. Determine project root from a running node.js application
  11. Cloud Functions for Firebase – Billing account not configured
  12. Cannot install packages using node package manager in Ubuntu
  13. Error: unable to verify the first certificate in nodejs
  14. Setting expiry time for a collection in mongodb using mongoose
  15. Node.js – EJS – including a partial
  16. Latest NodeJS compatible with Windows 7 [duplicate]
  17. NodeJS / Express: what is “app.use”?
  18. What’s the difference between process.cwd() vs __dirname?
  19. how to release localhost from Error: listen EADDRINUSE
  20. SyntaxError: Use of const in strict mode?
  21. How to open a create-react-app from another computer connected to the same network?
  22. How to enable BLOB-logging for a Node.js Api App on Azure?
  23. Connecting Heroku App to Atlas MongoDB Cloud service
  24. Gatsby Failed Build – error “window” is not available during server side rendering
  25. Passing arguments to require (when loading module)
  26. Nodejs Child Process: write to stdin from an already initialised process
  27. npm ERR! git dep preparation failed when trying to install package.json
  28. How npm start runs a server on port 8000
  29. Webpack how to build production code and how to use it
  30. How random is crypto#randomBytes?

Leave a Comment