Customize reCAPTCHA script loading

import { onMounted } from 'vue'
import { defineScriptLoader, toQueryString } from 'vue-recaptcha'

// Define your own loadScript function
const loadScript = defineScriptLoader((options) => {
  // This function will be called by useRecaptchaProvider
  return () => {
    onMounted(() => {
      // You can use any way to load the reCAPTCHA script
      const script = document.createElement('script')
      script.src = `${options.recaptchaApiURL}?${toQueryString(options.params)}`
      script.async = true
      script.defer = true
      if (options.nonce)
        script.nonce = options.nonce

      document.head.append(script)
    })
  }
})

const plugin = createPlugin(loadScript)

export interface RecaptchaParams {
  // You must pass these two value as query string to reCAPTCHA
  render: LiteralUnion<'explicit', string>
  onload: string

  // Below you can customize as you want
  hl?: string | undefined
  trustedtypes?: 'true' | undefined
  [k: string]: string | undefined
}

export interface ScriptLoaderOptions {
  /**
   * you can use recaptcha.net instead of google.com, if you set recaptchaApiURL, this option will be ignored
   */
  useRecaptchaNet?: boolean
  /**
   * you can use your own recaptcha api url, if you set this option, useRecaptchaNet will be ignored
   */
  recaptchaApiURL: string
  /**
   * nonce for script tag
   */
  nonce?: string
  /**
   * params for recaptcha api
   */
  params: RecaptchaParams
}

/**
 *  Helper function for define your own loadScript function
 */
function defineScriptLoader(fn: ScriptLoaderFactory): NormalizedScriptLoaderFactory