How to add "text/javascript" to in Nuxt

Question

I have the following script I have to add in the tag. But in Nuxt I have to add it as an objext in nuxt.config.js.

How do I do this?

user_10519069 · Answer

2 approachs for this

first: use nuxt head() in nuxt-page-component (recommended)

export default{
    head(){
        return {
            script: [
                {
                    type:'text/javascript',
                    innerHTML: `/* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);`
                }
            ]
        }
    }
}

in nuxt.config.js:

module.exports = {
    head: {
        script: [
            {
                type:'text/javascript',
                innerHTML: `/* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);`
            }
        ]
    }
};

here is what you get

second: custom index.html



  
    {{ HEAD }}

  
  
    {{ APP }}

user_4328275 · Answer

The right way in Nuxt is to create your own plugin for GrowSurf (see nuxt plugin docs).

First, create your plugin in a new file plugins/growsurf.js:

/* eslint-disable */

export default ({ app }) => {
  /*
   ** Only run on client-side and only in production mode
   */
  if (process.env.NODE_ENV !== 'production') {
    return;
  }

  /* To enable Participant Auto Authentication, uncomment this code below (https://docs.growsurf.com/getting-started/participant-auto-authentication) */
  /*
  window.grsfConfig = {
    email: "participant@email.com",// Replace this with the participant's email address
    hash: "HASH_VALUE" // Replace this with the SHA-256 HMAC value
  };
  */
  (function(g,r,s,f){g.grsfSettings={campaignId:"mpw47p",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://app.growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);

}

Then tell Nuxt to import it in your main application:

// nuxt.config.js

export default {
  plugins: [{ src: '~plugins/growsurf.js', mode: 'client' }]
}

In addition, you can find a similar example for Google Analytics in the official Nuxt FAQ: https://nuxtjs.org/faq/ga

How to add "text/javascript" to <head> in Nuxt

2 Answers