Ho to not load a head script in dev

In my nuxt.config.js I have a script in the html head config.

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'My cool Website !',
    script: [
      { 
        hid: "thesemetrics",
        src: "https://unpkg.com/thesemetrics@latest",
        async: true,
        type: "text/javascript",
     },
     { src: 'https://identity.netlify.com/v1/netlify-identity-widget.js'}
    ]
  },
  // ...
}

Is there a way to not load this script when I am in Dev Mode ?

1 answer

  • answered 2021-04-14 22:27 tony19

    Use the function form of head, and conditionally add these scripts based on process.env.NODE_ENV:

    export default {
      head() {
        const productionScripts =
          process.env.NODE_ENV === 'production'
            ? [
                { 
                  hid: "thesemetrics",
                  src: "https://unpkg.com/thesemetrics@latest",
                  async: true,
                  type: "text/javascript",
                },
                { src: 'https://identity.netlify.com/v1/netlify-identity-widget.js'}
              ]
            : []
    
        return {
          title: 'My cool Website !',
          script: [
            // other scripts to always load here
    
            ...productionScripts
          ]
        }
      },
      // ...
    }