Documentation for using the 'scripts:registry' hook wrong

[bernhardberger]

📚 Is your documentation request related to a problem?

I tried implementing a module to add OneTrust SDK integration to the registry, however:

https://scripts.nuxt.com/docs/api/nuxt-hooks

This flat out doesn't work.

 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'add')                                                                                                                                         4:47:10 PM

  at modules/onetrust/src/module.ts:7:20
  at node_modules/hookable/dist/index.mjs:48:66
  at node_modules/hookable/dist/index.mjs:48:56
  at async node_modules/@nuxt/scripts/dist/module.mjs:593:7
  at async initNuxt (node_modules/nuxt/dist/index.mjs:4510:3)
  at async NuxtDevServer._load (node_modules/nuxi/dist/chunks/dev2.mjs:6871:5)
  at async NuxtDevServer.load (node_modules/nuxi/dist/chunks/dev2.mjs:6806:7)
  at async NuxtDevServer.init (node_modules/nuxi/dist/chunks/dev2.mjs:6801:5)
  at async Object.run (node_modules/nuxi/dist/chunks/dev-child.mjs:102:5)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.b8b195e1.mjs:1648:16)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.b8b195e1.mjs:1639:11)
  at async runMain$1 (node_modules/nuxi/dist/shared/nuxi.b8b195e1.mjs:1777:7)

import { defineNuxtModule } from 'nuxt/kit'
import { resolve } from 'pathe'

export default defineNuxtModule({
  setup(_options, nuxt) {
    nuxt.hooks.hook('scripts:registry', async (ctx) => {
      ctx.registry.add({
        // used in DevTools
        label: 'OneTrust SDK',
        logo: ``,
        // if the script can be bundled we need to define a resolver
        src: 'https://XXX.my.onetrust.eu/cdn/cookies/scripttemplates/otSDKStub.js',
        category: 'consent-management',
        import: {
          name: 'useScriptOneTrust',
          // key is based on package name
          from: resolve('./runtime/registry/onetrust'),
        },
      })
    })
  },
})

🔍 Where should you find it?

https://scripts.nuxt.com/docs/api/nuxt-hooks

[bernhardberger]

Proper way to implement it currently seems to be:

import { addImports, createResolver, defineNuxtModule, installModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    configKey: 'oneTrust',
    name: '@my-namespace/nuxt-onetrust',
    compatibility: {
      bridge: false,
      nuxt: '>=3',
    },
  },

 async setup(_options, nuxt) {
    const { resolve } = createResolver(import.meta.url)
    const runtimeDir = resolve('./runtime')

    await installModule('@nuxt/scripts')

    const onetrustRegistry = {
      import: {
        from: resolve(runtimeDir, 'registry/onetrust'),
        name: 'useScriptOneTrust',
      },
    }

    addImports(onetrustRegistry.import)

    nuxt.hook('scripts:registry', (registry) => {
      registry.push ({
        // used in DevTools
        label: 'OneTrust SDK',
        logo: ``,
        // if the script can be bundled we need to define a resolver
        src: 'https://xxx.my.onetrust.eu/cdn/cookies/scripttemplates/otSDKStub.js',
        category: 'consent-management',
        import: onetrustRegistry.import,
      })
    })
  },
})