VueJS build cannot read env vars

I can’t get to read env vars from a vue-cli build.

I have a simple config file that I import all over the code:

export default {
  NODE_ENV: process.env.NODE_ENV,
  BACKEND_URL: process.env.VUE_APP_BACKEND_URL,
  BASE_URL: process.env.BASE_URL,
};

Now I’d expect to set the variable from Netlify UI and have the VUE_APP_BACKEND_URL set, but that doesn’t seem to work.

I also try putting vars in the netlify toml like:

[build.environment]
       VUE_APP_BACKEND_URL = "https://....."

But that doesn’t work either.

What am I missing?

Thanks!

Hiya @andreataglia and welcome to our community!

To start with, could you take a look at this article? it describes the path you’d need to take from “setting variables for build” to “seeing them reflected at browse time”:

Could you explain how you are handling the interpolation step, and where you’re looking to see those variables set (and how you’re looking)? I bet we can help resolve things in case that article doesn’t lead you to a working conclusion already :slight_smile:

1 Like

Thanks for your reply.
I surely read the article.

What just solved for me was using dotenv package + appending VUE_APP_ to the env var name. Not sure why i struggled so much before getting there…

1 Like

Glad to hear you got things worked out, and thanks SO much for the follow up to explain your solution! I wasn’t aware of the $VUE_APP_* pattern until you clued me in - thanks so much! Gatsby does a similar thing with $GATSBY_*.

That isn’t the only solution to your situation - interpolating the variable values as that article suggests will work with every framework, Vue, Gatsby, and a simple shell script too, but if you’re happy with that solution I don’t see any problems with it.

yeah… but probably that’s much quicker and neater no? no need to play around with the standard vue build process.

Hi, @andreataglia. I also want to say thank you as this was all new to me as well. @fool even updated this support guide with a link to the Vue documentation about this.

You taught our team about Vue and helped us improve our documentation about environment variables. Much appreciated!

Awesome. Glad it lead somewhere :slight_smile:

Would like to triple-mention something that a different teammate brought up to me and that I added to the doc but you might have missed:

there IS a compelling reason NOT to use $VUE_APP_* (or similar pattern for other frameworks) for ALL environment variables: those values get bundled into your output JS even if you don’t later use them in your client-side code, so ANYONE can see them. Not a good idea for API tokens and the like!

Wow, this is really going somewhere xD

First of all, thanks for letting us know in here.
Luckily I only need to change the backend url, so that would work fine. I guess I’ll get back to your docs at a later time then :slight_smile:

1 Like