Recaptcha doesn't show up unless page is refreshed (F5)

[alimoabd2127]

Using version 0.6.2, my Recaptcha v2 doesn't appear unless I navigate directly to the page or refresh after navigating to the page. Might be related to #12. I tried calling this.$recaptcha.reset() on mount but that didn't have any effect.

[owalid]

what do you have in your nuxt.config.js ? And how do you use the component in your template part ?

[alimoabd2127]

My nuxt config looks like this:

recaptcha: {
    hideBadge: true,
    siteKey: '...',
    version: 2,
    size: 'normal'
 }

And my component is in a Vuetify form like so:

<v-form ref="register" v-model="registerValid">
    <v-text-field
    ...
    />
    <v-text-field
    ...
    />
    <v-text-field
    ...
    />
    <v-text-field
    ...
    />
    <v-input v-model="recaptchaValid" :rules="recaptchaRules">
        <v-row justify="center">
            <recaptcha
            @success="onRecaptchaSuccess"
            @error="onRecaptchaError"
            @expired="onRecaptchaExpired"
            />
        </v-row>
    </v-input>
</v-form>

[farnabaz]

Hey, Sorry for the late response. I could not reproduce the issue, do you mind create a simple reproduction? You can fork template.nuxtjs.org

[kennyki]

For Nuxt, create a middleware to call $recaptcha.destroy either on every route change or on the pages with recaptcha:

// middleware/recaptcha.js
export default function ({ app }) {
  app.$recaptcha.destroy()
}

then either one of the following:

// nuxt.config.js
router: {
  middleware: 'recaptcha'
}

// pages/registration.vue
export default {
  middleware: 'recaptcha'
}