fix(types): NuxtOptionsHead can be a function

[OrkhanAlikhanov]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)

Description

NuxtOptionsHead can be a function too.

I don't know if it's ever meant to be a function in config file or not. It happily works in my nuxt.config.ts.

If this is going to be merged, I can fix the semantic issue.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[pi0]

Thanks @OrkhanAlikhanov for PR. Actually it is possible to serialize head function from nuxt.config (here) but will be deprecated since serializing fns from nuxt.config is not safe

[OrkhanAlikhanov]

@pi0 Thanks for merging it!

I actually needed head to take function because I use process.env.MY_VAR to generate head. I don't want nuxt to serialize it as a constant during build process. I want it to be resolved at runtime because that variable is set differently on server, having it as a function ensures that

Do you have any suggestions for that case?

[pi0]

Actually you don't need to make it a function or order using process.env.

If it is required to be changed after build you can use publicRuntimeConfig and setting head in layout.

[danielroe]

@OrkhanAlikhanov you could add it in your default layout, and use runtimeConfig instead of env.

[danielroe]

Jinx. 😆

[OrkhanAlikhanov]

Let me elaborate more. My goal was to push GTM script to the top of the script head so that it starts loading before nuxt scripts do. @nuxtjs/gtm module does that by injecting script into the head. But it requires the GTM id to be part of the production code which will be uploaded to server. I wanted to make nuxt load the GTM id from process.env.GOOGLE_TAG_MANAGER_ID at the startup in server instead of hardcoding it into the production code. Here is how I did it:

const config: NuxtConfig = {

  head(): MetaInfo {
    /// Injects gtm script at the top of all scripts
    const injectGTM = (head: MetaInfo) => {
      const gtmId = process.env.GOOGLE_TAG_MANAGER_ID

      if (gtmId) {
        head.script = head.script || []
        head.script.unshift({
          hid: 'gtm-script',
          innerHTML: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${gtmId}');`,
        })

        head.__dangerouslyDisableSanitizersByTagID = head.__dangerouslyDisableSanitizersByTagID || {}
        head.__dangerouslyDisableSanitizersByTagID['gtm-script'] = ['innerHTML']
      }

      return head
    }

    return injectGTM({ ... })
  },

I might be over-engineering it. What do you guys think?