index.vue

<template>
  <section class="index-page">
    <h2>#</h2>

    <form @submit.prevent="onSubmit">
      <input
        autocomplete="true"
        placeholder="Email"
        type="email"
        v-model="email"
      >

      <input
        autocomplete="current-password"
        placeholder="Password"
        type="password"
        v-model="password"
      >

      <recaptcha
        @error="onError"
        @success="onSuccess"
        @expired="onExpired"
        @load="onLoad"
      />

      <button type="submit">#</button>
      <nuxt-link :to="{ name: 'about' }">About</nuxt-link>
    </form>
  </section>
</template>

<script>
export default {
  data: () => ({
    email: 'test@example.com',
    password: '123',
  }),

  methods: {
    onError (error) {
      console.log('Error happened:', error)
    },

    async onSubmit() {
      try {
        const token = await this.$recaptcha.getResponse()

        const response = await fetch('/api/check-token', {
          method: 'POST',
          body: JSON.stringify({
            token,
            email: this.email,
            password: this.password
          })
        }).then(res => res.json())

        console.log('Server Response: ', response)

        await this.$recaptcha.reset()
      } catch (error) {
        console.log('Login error:', error)
      }
    },

    onSuccess (token) {
      console.log('Succeeded:', token)
    },

    onExpired () {
      console.log('Expired')
    },

    onLoad () {
      console.log('Loaded')
    }
  },
}
</script>