Svelte Recaptcha

svelteComponentRecaptcha.svelte

// Due to the nature of svelte, implementing recaptcha inside a svelte component by following the official documentation 
// can lead to DOM issue.
// The best way I find is to render the recaptcha inside onMount

<script>
  import { onMount } from 'svelte';
  
  onMount(async () => {
      window.grecaptcha.ready(() => {
        grecaptcha.render('recaptcha-id', { sitekey: YOUR_SITE_KEY })
      })
  })
</script>

<svelte:head>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</svelte:head>

<div id="recaptcha-id"></div>

I published a component that address most of these DOM issues.

https://github.com/basaran/svelte-recaptcha-v2

This is also on npm as svelte-recaptcha-v2