Api
Nuxt Hooks
scripts:registry
- Type:
(registry: RegistryScripts) => void | Promise<void>
Use this module hook to add registry scripts at build time. Applications can then configure them through scripts.registry and call their auto-imported composables.
module.ts
import { createResolver, defineNuxtModule } from '@nuxt/kit'
const { resolve } = createResolver(import.meta.url)
export default defineNuxtModule({
setup(_options, nuxt) {
nuxt.hooks.hook('scripts:registry', async (registry) => {
registry.push({
// Shown 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>`,
// Static script URL and bundling capability
src: 'https://cdn.jsdelivr.net/npm/[email protected]',
bundle: true,
// Auto-imported composable
import: {
name: 'useScriptMyCustomScript',
from: resolve('./runtime/scripts/my-custom-script'),
},
})
})
},
})