How can I add data-* attributes to the generated <script> tag?

[bernhardberger]

📚 What are you trying to do?

I need to implement OneTrustSDK and that thing needs a data-domain-script attribute on the <script>-Tag. How can I get this data-attribute to render?

🔍 What have you tried?

I tried adding it in sciprts.global key:

  scripts: {
    globals: {
      oneTrust: {
        src: 'https://XXX.my.onetrust.eu/cdn/cookies/scripttemplates/otSDKStub.js',
        'data-domain-script': 'XXXXXX-XXXXXXX-XXXXX',
      }
    },

I also tried adding it in my composable:

export function useScriptOneTrust<T extends OneTrustApi>(options?: OneTrustInput) {
  return useRegistryScript<T, typeof OneTrustOptions>('oneTrust', options => ({
    scriptInput: {
      'src': 'https://XXX.my.onetrust.eu/cdn/cookies/scripttemplates/otSDKStub.js', // can't be bundled
      'data-domain-script': options.domainScript,
    },
  }))
}

The only thing I can see being rendered is a preload link which fails because it needs a <script>-Tag with a data-domain-script attribute:

<link rel="preload" as="script" href="https://XXX.my.onetrust.eu/cdn/cookies/scripttemplates/otSDKStub.js" crossorigin="anonymous" fetchpriority="low" data-hid="1817094">

I can see some data-cf-beacon attribute being set here, so I assumed it should be possible: https://github.com/nuxt/scripts/blob/main/src/runtime/registry/cloudflare-web-analytics.ts#L44

No response

[bernhardberger]

Solved. I messed up passing the options properly. Works as expected and documented (it won't render a script tag by default by design).