Automatically load script from Google

Loading recaptcha API from Google can easily be (and should be) automated.

Instead of requiring a user to insert this tag:

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>

vue-recaptcha should simply run document.createElement('script') in its mount() and insert the script object to the document body. This will also fix “ReCAPTCHA couldn’t find user-provided function: vueRecaptchaApiLoaded” race condition.

The current architecture is not optimal in two perspectives:

1. The developer needs to write extra code, and in some circumstances (e.g. with Nuxt or Ream) it’s not even clear where should this code go.
2. Recaptcha API script will load even if it’s not used on a particular page.

[DanSnow]

Yeah, this have been requested before. Because someone may need to custom the language of recaptcha, I thought that they have to load it by themself.

But for now, I have two proposal.

First one:

import Vue from 'vue'
import VueRecaptchaPlugin from 'vue-recaptcha'

Vue.use(VueRecpatchaPlugin, {
  lang: 'en', // Language can be configured here, it will append to the url params
  disableAutoload: true // Or completely disable auto load
})

This one may also register the vue-recaptcha component also.

I also imagine that maybe it will be possible to eliminate this feature as dead code when user only import VueRecaptcha component as named import. Because I like to keep all the thing small when it need to pass through the network and load inside the browser. But I don’t someone else will care about maybe only a few bytes overhead.

Second one:

import Vue from 'vue'
import VueRecpatcha, { setAutoload } from 'vue-recaptcha'

setAutoload(false) // User can disable this functionality when they need to custom the url

new Vue({
  components: {VueRecpatcha} // And use the component like usual
})

Which one do you prefer? Also I’ll mark this issue as help wanted and wait for some feedback. Because both of them will be a breaking changed IMO.

[DanSnow]

@yariksav Current design will defer the loading until the first vue-recaptcha used. Using Vue.use is just for some global config like language.