Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Automatically load script from Google

See original GitHub issue

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

Instead of requiring a user to insert this tag:

<script src="" 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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

DanSnowcommented, Sep 30, 2018

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.

DanSnowcommented, Dec 24, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I auto run script in Google sheet
In the Script Editor, under Edit, select "This project's triggers". Establish a trigger for that script. Done. Perfectly worked as I want.
Read more >
Simple Triggers | Apps Script - Google Developers
Triggers let Apps Script run a function automatically when a certain event, like opening a document, occurs. Simple triggers are a set of ......
Read more >
5+ ways to run Google Apps Scripts in Google Sheets
Google Apps Script enables you to extend Google Sheets and automate repetitive tasks. Once you write a script, you'll need to decide how...
Read more >
How to automatically run code from Google Sheets script?
Hi there ! I am trying to run a script (in javascript) automatically. The trigger in the google app script do not work...
Read more >
Run a Google apps script automatically upon loading a ...
The index.html file is an HTML file inside of the Apps Script code editor, as is the file also. The file...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found