Nuxt•2y ago

Import .env into app{ head{ script{

Im loading a analytics script inside my nuxt.config.ts and want to dynamically change the key via an env var, but the scope doesnt have acess to process or useRUntimeConig, any thoughts:

app: {
    head: {
      script: [
      {
        hid: 'Rudder-JS',
        src: 'https://myurl/dataPlane',
        defer: true
      },
      {
        hid: 'rudder-js',
        innerHTML: `
            rudderanalytics = window.rudderanalytics = [];
            var  methods = [
                'load',
                'page',
                'track',
                'identify',
                'alias',
                'group',
                'ready',
                'reset',
                'getAnonymousId',
                'setAnonymousId'
            ];
            for (var i = 0; i < methods.length; i++) {
                  var method = methods[i];
                  rudderanalytics[method] = function (methodName) {
                        return function () {
                                           rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments)));
                        };
                      }(method);
            }
            const config = useRuntimeConfig()
            console.log(config.rudderstack)
            rudderanalytics.load(config.rudderstack,
            'https://myurl',
            { configUrl: 'https://myurl' });
            
            //rudderanalytics.page();
            `,
        type: 'text/javascript',
      
      }
    ],
  },
  },

app: {
    head: {
      script: [
      {
        hid: 'Rudder-JS',
        src: 'https://myurl/dataPlane',
        defer: true
      },
      {
        hid: 'rudder-js',
        innerHTML: `
            rudderanalytics = window.rudderanalytics = [];
            var  methods = [
                'load',
                'page',
                'track',
                'identify',
                'alias',
                'group',
                'ready',
                'reset',
                'getAnonymousId',
                'setAnonymousId'
            ];
            for (var i = 0; i < methods.length; i++) {
                  var method = methods[i];
                  rudderanalytics[method] = function (methodName) {
                        return function () {
                                           rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments)));
                        };
                      }(method);
            }
            const config = useRuntimeConfig()
            console.log(config.rudderstack)
            rudderanalytics.load(config.rudderstack,
            'https://myurl',
            { configUrl: 'https://myurl' });
            
            //rudderanalytics.page();
            `,
        type: 'text/javascript',
      
      }
    ],
  },
  },

7 Replies

JJ•2y ago

Bump here, any chance I can get some help with this?

harlan•2y ago

hey, you should probably use a plugin with useHead or app.vue with use head

JJ•2y ago

@harlan can you point me in the right direction on where i can see how to make this into a plugin?

harlan•2y ago

sure, just make a file plugins/analytics.client.ts

export default defineNuxtPlugin(nuxtApp => {
  // your code
})

export default defineNuxtPlugin(nuxtApp => {
  // your code
})

harlan•2y ago

see https://nuxt.com/docs/guide/directory-structure/plugins

Nuxt

plugins/ · Nuxt Directory Structure

Nuxt reads the files in your plugins directory and loads them at the creation of the Vue application.

JJ•2y ago

@harlan thank you, do i have access to the useHead({ script: [ durectly inside of that file or do i need to wrap that in something else

harlan•2y ago

import { useHead } from '#imports' if it's not auto-imported

Gaming

Programming

Import .env into app{ head{ script{