Automatically load script from Google

[IlyaSemenov]

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.

[IlyaSemenov]

The first way for sure. Then to support the named import + custom script scenario, you can just add a new optional property so they will do <VueRecaptcha disable-autoload ...> (or: <VueRecaptcha lang="de" ...>.

Also, it doesn't have to be a breaking change. The autoload could be disabled by default (for now) to keep backward compatibility. (Although in the long run it makes sense to enable it by default.)

[DanSnow]

About the language config, I think it shouldn't be a component's prop. Because it is only allow to config with url parameter. It will be a global config that share between all component until you refersh the page. If it is a component prop, someone may think that he/she can bind a data on it and change the language dynamically. It'll be confusing.
Although I can document this behavior. I think just make it be a immutable global option will be better.

[benArambide]

I think that autoload and lang are ok in global config, because you can use the component int more than one place, even sitekey must be placed in the global config

[yariksav]

I suppose will be better to load google recaptcha libraries when component is created first time.
Because, loading in Vue.use(...) - means load libraries always when project started, even if recaptcha will not be used

[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.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.