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
That's what I meant with the UI / Setting menu. Does not work though — Thaeke Hekkenberg

Urzelll Urzelll · Accepted Answer · 2020-12-03T14:25:06

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",

Using Netlify environment variables with Nuxt.js

1 Answers