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?

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(''). — Vishwas Patel, May 30 '21 at 11:56

kissu · Accepted Answer · 2022-04-22T16:01:32.497

12

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.

edited Apr 22 '22 at 16:01

answered May 18 '21 at 05:12

kissu

40,416
14
65
133

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. – Daniel Storey Apr 22 '22 at 15:50
1

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](https://stackoverflow.com/a/67705541/8816585) and referenced several times to the OP afterwards. – kissu Apr 22 '22 at 16:01
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. – sobmortin354 Sep 19 '22 at 14:05
@sobmortin354 I never said the opposite, hence why it's called `public`RuntimeConfig. More details can be found here: https://stackoverflow.com/a/73139341/8816585 – kissu Sep 19 '22 at 14:07
I know, I just thought it would be worth saying explicitly – sobmortin354 Sep 19 '22 at 14:23

score 6 · Answer 2 · answered Apr 22 '22 at 15:27

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.

score 1 · Answer 3 · answered Jul 08 '23 at 15:53

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",
      },
    },
  });
});

How to access .env variables in a Nuxt plugin?

3 Answers3

Linked