Usage with Vue CLI 3: Docs need expansion

[joelhoelting]

I would like to update the docs to help folks use this plugin with the Vue CLI. It seems like the obvious injection method in Vue CLI is loading the recaptcha script as soon as the application loads:

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

import { VueReCaptcha } from 'vue-recaptcha-v3';

Vue.config.productionTip = false;

Vue.use(VueReCaptcha, { siteKey: '<site-key>' });

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

However, I am trying to figure out the best way to inject the script within a specific component on a specific page. I have this so far:

signup.vue

<script>
import Vue from 'vue';
import { VueReCaptcha } from 'vue-recaptcha-v3';

export default {
  name: 'SignUp',
  data() {
    ...
  },
  created() {
    // Run recaptcha script on signup page
    if (this.$recaptchaInstance) {
      this.$recaptchaInstance.showBadge();
    } else {
      Vue.use(VueReCaptcha, {
        siteKey: '<site-key>',
      });
    }
  },
  destroyed() {
    this.$recaptchaInstance.hideBadge();
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
};
</script>

Is it bad practice to load the recaptcha within a specific view instead of the app level? If not, then what is the best way to inject the recaptcha at the component level?

[WipeAir]

Hi, sorry for the delayed response!
I'll have to look into Vue CLI first, as I haven't used it yet.

As stated in the the recaptcha docs, it's recommended to always load the recaptcha. I'll look into it, on how to load the recaptcha on specific views/components later.

[karladler]

@joelhoelting I think your script wont work since you don't have the$recaptchaInstance object before calling:

Vue.use(VueReCaptcha, {
    siteKey: '<site-key>',
});