Getting started with Vue

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <textarea v-model="message" placeholder="Enter your message" />
      <button type="submit" :disabled="loading">Send</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";

// 1. Import the library
import Botpoison from "@botpoison/browser";

export default {
  data() {
    return {
      botpoison: null,
      message: null,
      loading: false,
    };
  },
  created() {
    // 2. Create a new instance with your public key
    this.botpoison = new Botpoison({
      publicKey: "pk_xxxxxxxx",
    });
  },
  methods: {
    async onSubmit() {
      this.loading = true;
      try {
        // 3. Process a challenge
        const { solution } = await this.botpoison.challenge();
        await axios.post("https://example.demo/", {
          message: this.message,
          // 4. Forward the solution
          _botpoison: solution,
        });
        alert("Form submitted");
        this.message = null;
      } catch (error) {
        alert("Error submitting form");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>