CODEWITHSUNDEEP
vue.jsenvironment-variablesnuxt.jsanalyticssegment
drake035
drake035

Reputation: 2887

How to access .env variables in a Nuxt plugin?

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?

Upvotes: 14

Views: 11529

Answers (3)

salhin
salhin

Reputation: 2654

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

Upvotes: 4

kissu
kissu

Reputation: 46676

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.

Upvotes: 13

Greg
Greg

Reputation: 139

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.

Upvotes: 7

Related Questions