Api
Nuxt Hooks
Use Nuxt hooks to extend the Nuxt Scripts module.
scripts:registry
- Type:
async (ctx: { registry: ScriptRegistry }) => 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 (ctx) => {
ctx.registry.add({
// 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'),
},
})
})
},
})