feat: runtime config

[bason8800]

No description provided.

[Marcosaurios]

I was thinking about opening a new PR solving this issue, updating the plugin configuration in runtime. Thanks @bason8800 for the approach, I hope it gets merged!

[MrCode1997]

Hope, this will be merged soon!

[Marcosaurios]

To solve the problem with using multiple instances or versions of Google Recaptcha on the same page,I just discovered that if you need to change the plugin settings in runtime, you can do it updating plugin's object directly via window.$nuxt.$recaptcha.version = 3 (in nuxt) or this.$recaptcha in vue.

The point is if you update the plugin's version and siteKey you will need to force a render on the <recaptcha /> plugin's component. I solved it adding the attribute :key (see VUE docs :key attribute) to the recaptcha component, and passing it the new updated value. Every time the :key property updates, the component will be rendered again. For example:

<recaptcha :key="this.$nuxt.$recaptcha.siteKey"
   @error="captchaV2Error"
   @success="captchaV2Success"
   @expired="captchaV2Expired"
 />

By this way, each time you update plugin's version and siteKey (in this order), the component will render again with the updated values from the plugin, so that you can use the same recaptcha component for testing V3 and V2 version.

I hope it helps as I have been struggling with this for almost a week.
@joelfloressottile @belgacea

[atinux]

Thank you for this great PT @bason8800

Do you mind adding a note into the README to show how to use the publicRuntimeConfig too?

[bason8800]

@atinux done

[farnabaz]

Thank you for the contribution @bason8800
I don't see the reason behind this changes. What is the difference between these two?

Proposed by this PR:

export default {
  publicRuntimeConfig: {
     recaptcha: {
       siteKey: process.env.RECAPTCHA_SITE_KEY
    }
  }
}

Current state:

export default {
   recaptcha: {
      siteKey: process.env.RECAPTCHA_SITE_KEY
    }
}

[MrCode1997]

Hi @farnabaz , with the @bason8800 change, we can use publicRuntimeConfig, to change the env var for sitekey without rebuild all project, but just launching the "npm start" command, we can have the var updated.

The normal way, compile the env var in a bundle that nuxt use to start, with publicRuntimeConfig the var are read runtime with the start of the project.

Thx

[atinux]

Changes looks good, I added two small code suggestions

[farnabaz]

@bason8800 Do you mind to resolve conflicts? (I don't have write permission of your repo)

[farnabaz]

Thank you @bason8800