Api

Nuxt Hooks

Use Nuxt hooks to extend the Nuxt Scripts module.

scripts:registry

  • Type: async (registry: RegistryScripts) => HookResult

Add registry scripts at build, allowing them to be loaded via scripts.registry and bundled if available.

This is intended to be used by modules.

module.ts
export default defineNuxtModule({
  setup() {
    nuxt.hooks.hook('scripts:registry', async (registry) => {
      registry.push({
        // used in DevTools
        label: 'My Custom Script',
        logo: `<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" width="28.85" height="32" viewBox="0 0 256 284"><path fill="#F9AB00" d="M256.003 247.933a35.224 35.224 0 0 1-39.376 35.161c-18.044-2.67-31.266-18.371-30.826-36.606V36.845C185.365 18.591 198.62 2.881 216.687.24a35.221 35.221 0 0 1 39.316 35.16z"/><path fill="#E37400" d="M35.101 213.193c19.386 0 35.101 15.716 35.101 35.101c0 19.386-15.715 35.101-35.101 35.101S0 267.68 0 248.295c0-19.386 15.715-35.102 35.101-35.102m92.358-106.387c-19.477 1.068-34.59 17.406-34.137 36.908v94.285c0 25.588 11.259 41.122 27.755 44.433a35.161 35.161 0 0 0 42.146-34.56V142.089a35.222 35.222 0 0 0-35.764-35.282"/></svg>`,
        // if the script can be bundled we need to define a resolver
        scriptBundling: 'https://cdn.jsdelivr.net/npm/[email protected]',
        // how to load the script, will be added as an auto import
        import: {
          name: 'useScriptMyCustomScript',
          from: resolve('./runtime/scripts/my-custom-script'),
        },
      })
    })
  },
})