Using Netlify environment variables with Nuxt.js

Question

I want my web app, that's built with Nuxt.js and Vue.js to access the environment variables that I added in the Netlify environment UI (setting menu).

When I run the local server I have no problem with my code accessing the .env file and retrieving the right codes.

But when I build it with Netlify, it returns undefined.

I have tried adding different prefixes to the env variables since I saw some people do this:

VUE_APP_MY_VARIABLE
NUXT_APP_MY_VARIABLE
VUE_MY_VARIABLE
NUXT_MY_VARIABLE

I do not understand why the variables can not be accessed when the site is live.

If you're missing any information, let me know and I will add it.

Thanks in advance!

you need to add the env variable into netlify from the menu they provided to add variable — tuhin47
– tuhin47, Commented Nov 24, 2020 at 18:25
That's what I meant with the UI / Setting menu. Does not work though — Thaeke Hekkenberg
– Thaeke Hekkenberg, Commented Nov 24, 2020 at 18:52

Dharman · Accepted Answer · 2020-12-03 14:30:46Z

5

Maybe this page can help you! https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env

Try:

NUXT_ENV_MY_VARIABLE

instead of

NUXT_MY_VARIABLE

I use Netlify and Nuxt together with dotenv package:

"@nuxtjs/dotenv": "1.4.1",

edited Dec 3, 2020 at 14:30

Dharman♦

33.9k27 gold badges104 silver badges157 bronze badges

answered Dec 3, 2020 at 14:25

Urzelll

1264 bronze badges

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

1 Comment

Thaeke Hekkenberg Over a year ago

You, my good sir, are an absolute legend. I didn't really expect anyone to react anymore. But this completely solved it. Thank you!

Collectives™ on Stack Overflow

Using Netlify environment variables with Nuxt.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related