How to access .env variables in a Nuxt plugin?

Question

Segment Analytics provides a snippet with a secret API key in it. In my Nuxt.js project I created a plugin called segment.js which I registered in my nuxt.config.js:

nuxt.config.js

plugins: [
  {
    src: "~/plugins/segment.js",
    mode: 'client'
  }
]

In my plugins/segment.js file I have my snippet:

!function(){var analytics=window.analytics=...analytics.SNIPPET_VERSION="4.13.2";
analytics.load(process.env.SEGMENT_API_SECRET);
analytics.page();
}}();

Obviously I don't want to have my secret API key exposed there so I have it stored in my .env file instead:

.env

SEGMENT_API_SECRET=FR4....GSDF3S

Problem: process.env.SEGMENT_API_SECRET in plugins/segment.js is undefined so the snippet doesn't work. How can I access my .env variable SEGMENT_API_SECRET from my plugin plugins/segment.js?

Refugiorefulgence

Just curious to know about potential harm these API key exposure can do, as I personally seen a few websites using segment and directly putting their API key like analytics.load('<API_KEY>'). – Dunlin

Answer 1

Set your env variable into nuxt.config.js

export default {
  publicRuntimeConfig: {
    segmentApiSecret: process.env.SEGMENT_API_SECRET,
  }
}

And then, this one should do the trick

// segment.js
export default ({ $config: { segmentApiSecret } }) => {
  !function(){var analytics=window.analytics=...analytics.SNIPPET_VERSION="4.13.2";
  analytics.load(segmentApiSecret);
  analytics.page();
  }}();
}

---

UPDATE: A more in-depth answer of mine can be found here too.

Evasion

Please don't just post code that works but help point the user in the right direction with regard to the concepts they are asking about, and post links to documentation like Greg did below. – Unitarianism

Hi @DanielStorey, I did not gave a lot of details here because the question was quite specific (usage of envs in a plugin), rather than generic explanation of env variables. That and the fact that drake is somebody that I helped quite a lot overall daily for some months. It was not his first nor last question regarding env variables: I cannot 100% duplicate my answers on each question too. I've actually wrote quite a more in-depth answer just few days after this one as you can see here and referenced several times to the OP afterwards. – Evasion

This works, but does mean the secret value will be available from the client side. All someone has to do in the browser console is type __NUXT__.config and they'll be able to see all values from pubilcRuntimeConfig. – Trothplight

@Trothplight I never said the opposite, hence why it's called publicRuntimeConfig. More details can be found here: https://mcmap.net/q/829257/-nuxt-js-is-window-__nuxt__-a-vulnerability – Evasion

I know, I just thought it would be worth saying explicitly – Trothplight

Answer 2

For me, I wanted to use my environment (.env) variables in my Nuxt Firebase Plugin: /plugins/firebase.js. Usually with Vue, you have to prefix these .env variables with VUE_APP_, for example: VUE_APP_yourKeyName=YOUR_SECRET_VALUE

But with Nuxt, you have to then set these .env variables in the Nuxt Config nuxt.config.js like so:

// .env
VUE_APP_yourKeyName=YOUR_SECRET_VALUE

// nuxt.config.js
export default {
    env: {
        NUXT_VAR_NAME: process.env.VUE_APP_yourKeyName,
    },
}

// /plugins/firebase.js
const firebaseConfig = {
    apiKey: process.env.NUXT_VAR_NAME,
}

You can read more about using Nuxt Environment Variables here.

NOTE: For Nuxt versions > 2.12+, in cases where environment variables are required at runtime (not build time) it is recommended to replace the env property with runtimeConfig properties : publicRuntimeConfig and privateRuntimeConfig.

Lucchesi

Answer 3

For Nuxt 3, you can define your env variable in .env as:

// .env
NUXT_PUBLIC_G_RECAPTCHA_SITE_KEY='xyz'

Expose it in nuxt.config.ts as:

// nuxt.config.js
runtimeConfig: {
  public: {
    GRecaptchaSiteKey: process.env.G_RECAPTCHA_SITE_KEY;
  }
}

Then inside the plugin call it with useRuntimeConfig()

Example in vue-recaptcha-v3 plugin

// /plugins/recaptch.js
import { VueReCaptcha } from "vue-recaptcha-v3";
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  nuxtApp.vueApp.use(VueReCaptcha, {
    siteKey: `${config.public.GRecaptchaSiteKey}`,
    loaderOptions: {
      autoHideBadge: false,
      explicitRenderParameters: {
        badge: "bottomleft",
      },
    },
  });
});

Palmapalmaceous