Used with prerender spa plugin returns 400 error about vue-recaptcha

[esmsnt]

I had a similar issue with prerender-spa-plugin. I recommend you run a quick post-processing on the prerender-spa-plugin output and strip out the recaptcha script tags. Your Vue instance will re-insert them when it takes over from the pre-rendered page. Here is what I used in my prod webpack file:

Ignore the stuff about toasted-vue, that also causes a problem if it renders a toast inside the phantomjs prerender. You will need to install cheerio (npm --save install cheerio ).

    // Recommended for SEO  http://vuejs-templates.github.io/webpack/prerender.html
    // https://www.npmjs.com/package/prerender-spa-plugin
    // Be sure to add this https://github.com/chrisvfritz/prerender-spa-plugin/pull/54
    // Otherwise PhantomJS polyfill does not get injected
    new PrerenderSpaPlugin(
      // Path to compiled app
      path.join(__dirname, '../dist'),
      // List of endpoints you wish to prerender
      [ '/', '/terms', '/privacy', '/contact' ],
      {
        captureAfterTime: 10000,
        navigationLocked: true,
        postProcessHtml: function (context) {
          // Post Process the static rendered HTML to clean up some issues
          var $ = cheerio.load(context.html)
          // Remove cookie notification popup
          //  <div id="toasted-container" class="bottom-right"> ... </div>
          $('#toasted-container').remove()
          // Remove recaptcha script tags
          //  <script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/api2/r20170629165701/recaptcha__en.js"></script>
          //  <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&amp;render=explicit" async="" defer="" data-vue-meta="true"></script>
          var recaptchaRegex = /recaptcha/i
          $('head').find('script').each(function (i, elem) {
            if (recaptchaRegex.test($(this).attr('src'))) {
              $(this).remove()
            }
          })
          return $.html()
        }
      }

You may also find that setting navigationLocked=true seems to fix the recaptcha most of the time...

[DanSnow]

Sorry for late reply.
Seem prerender-spa-plugin is using phantomjs to capture html output.
Thus it is not support by Google reCAPTCHA.
So I don't think this is an issue related to vue-recaptcha.

But after a little try on prerender-spa-plugin.
I notice that reCAPTCHA will re-render in a real browser.
So maybe using the prerender plugin won't be a problem.

[neovea]

Thanks for answering. Still I cannot figure it out. Which is unconvenient as you can guess... Maybe would you provide an example of your implementation please ? I know this is not an issue but I'm stuck with this and didn't find any help out there till now.
Thanks

[DanSnow]

But actually I didn't do anything.
Seem reCAPTCHA just re-render automatically.

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