Nuxt App Hooks

scripts:updated

• Type: (ctx: { scripts: Record<string, NuxtDevToolsScriptInstance> }) => void | Promise<void>

Triggered after Nuxt updates the script status.

Nuxt uses this internally for the DevTools, but you can use it however you see fit.

export default defineNuxtPlugin({
  setup() {
    useNuxtApp().hooks.hook('scripts:updated', (ctx) => {
      console.log('Scripts updated', ctx.scripts)
    })
  }
})

scripts:globals

• Type: (globals: Record<string, Record<string, any>>) => void | Promise<void>

Fired inside the generated scripts:init plugin, right before it registers each scripts.globals entry. globals is a mutable map of your statically declared globals, keyed by each global's key, with values already merged (build-time default first, then any NUXT_PUBLIC_SCRIPTS_GLOBALS_* env override). Mutate it to rewrite a src/attributes, or delete an entry so it never loads, all per instance without a rebuild.

This is the runtime equivalent of a globals factory: it keeps statically declared globals typed on $scripts and asset-bundled, while letting you compute their inputs at server/client startup. Deleting an entry (or setting enabled: false / an empty src) skips its registration; that key then resolves to undefined on $scripts, so guard access. The hook operates on the declared set only; to load a script that isn't declared in scripts.globals, call useScript() in your own plugin.

Register the listener from an enforce: 'pre' plugin so it runs before scripts:init, otherwise it arrives too late to fire.

export default defineNuxtPlugin({
  enforce: 'pre',
  setup(nuxtApp) {
    const { tenant } = useRuntimeConfig().public
    nuxtApp.hooks.hook('scripts:globals', (globals) => {
      // Drop an integration this tenant doesn't use:
      if (!tenant.awinEnabled)
        delete globals.awin
      // Compute the src from runtime config:
      globals.trustedShops.src = `https://widgets.trustedshops.com/${tenant.trustedShopsId}.js`
    })
  }
})

script:instance-fn (Unhead Hook)

• Type: (ctx: { script: ScriptInstance<any>, fn: string | symbol, args: any, exists: boolean }) => HookResult

This is an Unhead head hook (not a Nuxt app hook). It's fired when accessing properties via the proxy instance and is accessed via injectHead().hooks.hook(...).

Nuxt also uses this internally for the DevTools, but you can use it however you see fit.

export default defineNuxtPlugin({
  setup() {
    const head = injectHead()
    head.hooks.hook('script:instance-fn', ({ fn, args }) => {
      console.log('Function called:', fn)
    })
    const { proxy } = useScript()
    proxy.doSomething() // Function called: doSomething
  }
})