Search code examples
vue.jsnuxt.jsnetlify

Using Netlify environment variables with Nuxt.js

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!

Solution

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