2

I'm trying to add the snippet provided by Segment Analytics into nuxt.config.js but I'm getting the following error:

FATAL $config is not defined

What am I doing wrong?

nuxt.config.js:

head: {
  script: [
    {
      hid: 'segment-script',
      innerHTML: `
        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)...
        analytics.load(${this.$config.segmentApiSecret});
        analytics.page();
        }}();
      `,
      type: 'text/javascript',
      charset: 'utf-8'
    }
  ]
},
privateRuntimeConfig: {
  segmentApiSecret: process.env.SEGMENT_API_SECRET
},
kissu
  • 40,416
  • 14
  • 65
  • 133
drake035
  • 3,955
  • 41
  • 119
  • 229

1 Answers1

8

How to load external JavaScript scripts

head: {
  __dangerouslyDisableSanitizers: ['script'],
  script: [
    {
      hid: 'gtm-script1',
      src: 'https://www.googletagmanager.com/gtag/js?id=UA-111111111-1',
      defer: true
    },
    {
      hid: 'gtm-script2',
      innerHTML: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-111111111-1');
      `,
      type: 'text/javascript',
      charset: 'utf-8'
    }
  ]
},
  • Otherwise, you can also add it to a app.html at the root of your project
<html {{ HTML_ATTRS }}>
   <head>
    {{ HEAD }} 
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}

    <!--EXTRA JS FILES-->
  </body>
</html>

Answer to the initial answer

If you're adding it in the nuxt.config.js file, you need to directly use process.env.SEGMENT_API_SECRET.

May be a good idea to add this to some middleware or default layout than throwing directly some HTML into the config file.

Also, there is no point into adding it to privateRuntimeConfig if you are going to expose it anyway in the client. privateRuntimeConfig is only used for server operations while building the app (on the Node.js side). In your case, Segment will be totally public and hence, you should be fine with exposing your public API key (double-check still).

EDIT: other you could also use the official Nuxt or Vue plugin for this purpose.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Thanks! No more error with that part, but now my snippet triggers other problems. I think my approach isn't the right one as you said. Initially I had my snippet in a `segment.js` located in the `static/ folder and that snippet was calling `process.env.SEGMENT_API_SECRET` but I had this error: "process is not defined", and `$config` isn't accessible there either. Any idea what's the proper way to do this with Nuxt.js? – drake035 May 14 '21 at 16:30
  • Thanks @kissu I've seen these but I prefer not to use plugins for that as the native/standard/regular way is super straightforward. Also I'd like to know how to accomplish this because it might be useful for other APIs in which I need to include a snippet to my Nuxt.js app with a secret API key. – drake035 May 14 '21 at 16:53
  • Thanks @kissu, the problem is none of these solutions deals with retrieving the API secret key stored in the `.env` file...! – drake035 May 14 '21 at 18:52
  • It's explained in my initial answer, either use `process.env` directly or public runtime and access it through the context (`$config`). – kissu May 14 '21 at 19:08
  • Yes but I realized I can't paste the snippet in `nuxt.config.js` as in my question, it seems to creates many problems. Instead I need to a file containing the snippet, like in the article you linked https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/. But then in that file, I can't access either `process.env` or `$config`! – drake035 May 15 '21 at 20:57
  • You can totally pass a `$config` with `export default ({ $axios, $config: { yourCoolEnvVariable } }) => { // your snippet }` – kissu May 16 '21 at 23:51
  • So in `static/segment.js` I added `export default ({ $axios, $config: { yourCoolEnvVariable } }) => { // your snippet }` and put my snippet where `// your snippet` is. I'm getting `Unexpected token 'export'` error. – drake035 May 17 '21 at 11:29
  • Put it in plugins and import it in plugins (in `nuxt.config.js`). – kissu May 17 '21 at 12:19
  • 1
    Thanks, I just tried but in my plugin `process.env.SEGMENT_API_SECRET` is `undefined` although I do have `SEGMENT_API_SECRET=FFD1k....ITUJS` in `.env` file. Also tried `publicRuntimeConfig: { segmentApiSecret: process.env.SEGMENT_API_SECRET }` then to use `this.$config.segmentApiSecret` or `$config.segmentApiSecret` in my plugin, but `$config` is `undefined` there. What a pain in the neck.. – drake035 May 17 '21 at 17:31