Api

useScript

Source
API documentation for the useScript function.

This composable is a wrapper around the Unhead useScript with extra Nuxt goodies on top, for full documentation please refer to this.

Signature

export function useScript<T extends Record<string | symbol, any>>(input: UseScriptInput, options?: NuxtUseScriptOptions): T & { $script: Promise<T> & VueScriptInstance<T> } {}

Arguments

UseScriptInput

This is the script tag input. For example, you can pass a URL string or an object with the script tag attributes.

export type UseScriptInput = string | {
  src?: string
  async?: boolean
  defer?: boolean
  type?: string
  integrity?: string
  crossorigin?: string
  text?: string
  innerHTML?: string
  innerText?: string
  content?: string
  referrerPolicy?: string
  attributes?: Record<string, string>
}

See the Script Input documentation for more information on the options.

NuxtUseScriptOptions

See the Script Options documentation for more information on the options.

export type NuxtUseScriptOptions<T = any> = Omit<UseScriptOptions<T>, 'trigger'> & {
  /**
   * The trigger to load the script:
   * - `onNuxtReady` - Load the script when Nuxt is ready.
   * - `manual` - Load the script manually by calling `load()`
   * - `Promise` - Load the script when the promise resolves.
   */
  trigger?: UseScriptOptions<T>['trigger'] | 'onNuxtReady'
  /**
   * Should the script be bundled as an asset and loaded from your server. This is useful for improving the
   * performance by avoiding the extra DNS lookup and reducing the number of requests. It also
   * improves privacy by not sharing the user's IP address with third-party servers.
   * - `true` - Bundle the script as an asset.
   * - `false` - Do not bundle the script. (default)
   */
  bundle?: boolean
  /**
   * Skip any schema validation for the script input. This is useful for loading the script stubs for development without
   * loading the actual script and not getting warnings.
   */
  skipValidation?: boolean
}

Return

See the Understanding proxied functions and $script documentation for more information on the return.

Facade Components

Facade Components are fake UI elements that get replaced once a third-party script loads.

useScriptTriggerConsent

API documentation for the useScriptTriggerConsent function.