Load environment variables into vue.js

Question

I am building an app using node.js + vue.js and was wondering if anyone knows how I can load environment variables into my vue.js components? Right now I'm loading environment variables in my server side code using the dotenv package but it doesn't seem to work for vue.js..

Thanks in advance!

You can use DefinePlugin, check this answer. You can also use DefinePlugin along with Configuration types like in this other answer. — Ricky Ruiz
– Ricky Ruiz, Commented Apr 20, 2017 at 15:12

Paul Wenzel · Accepted Answer · 2016-09-25 18:26:28Z

7

You can expose environment variables from NodeJS like this:

console.log(process.env.EXAMPLE_VARIABLE);

More details on process.env: https://nodejs.org/api/process.html#process_process_env

To expose your environment variables to the client-side in Vue (or any Javascript framework for that matter), you could render a JSON response from NodeJS that is ingested via an AJAX call.

answered Sep 25, 2016 at 18:26

Paul Wenzel

2,0362 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mintedsky Over a year ago

You can only the environment variables after you close the dev server and restart, or do a new build~

Gel Over a year ago

I just restarted like @mintedsky suggested and it worked. npm run serve - thanks

Dan der Mensch Over a year ago

Because of Vue CLI 3, future viewers might benefit from this post instead: stackoverflow.com/questions/50828904/…

Prasad N · Accepted Answer · 2019-10-08 08:24:24Z

3

Using Vue Cli 3, You can load your environment variables like this

Create a .env file in the root directory of your application.
In the .env file, prefix your environment variables with VUE_APP_.

Example: VUE_APP_SECRET=SECRET.
Now you can access them with process.env.THE_NAME_OF_THE_VARIABLE in your application code.

Example: console.log(process.env.VUE_APP_SECRET) // SECRET

You can read more here

edited Oct 8, 2019 at 8:24

Prasad N

5414 gold badges10 silver badges22 bronze badges

answered Apr 17, 2019 at 21:19

Ayotunde Olubiyo

1692 silver badges4 bronze badges

2 Comments

VVictor Over a year ago

when I do this, the value getting printed in console is 'SECRET' and not the value of SECRET set from express node.js

Marcel Over a year ago

PLEASE, do not put actual secrests into the .env file, it will get exposed.

Collectives™ on Stack Overflow

Load environment variables into vue.js

2 Answers 2

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Linked

Related