Vue
Vue
Install
1
npm i botbye-vue
or
1
yarn add botbye-vue
Configuration
There are two ways to configure BotBye! in Vue: BotByeVuePlugin or BotByeComponent
BotByeVuePlugin
1. Init BotBye! using BotByeVuePlugin
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createApp } from 'vue'
import App from './App.vue'
import { BotByeVuePlugin } from "botbye-vue";
const botByeOptions = {
// Use your client-key
clientKey: "00000000-0000-0000-0000-000000000000"
};
const app = createApp(App)
app.use(BotByeVuePlugin, botByeOptions)
app.mount('#app')
BotByeComponent
1. Init BotBye! using BotByeComponent
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<\script setup>
import { BotByeComponent } from "botbye-vue"
/* Use your client-key */
const clientKey="00000000-0000-0000-0000-000000000000";
</script>
<template>
<BotByeComponent :client-key="clientKey"/>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125"/>
</header>
<main>
<!-- some code -->
</main>
</template>
Usage
To run challenge and generate BotBye! token call runChallenge. Send this token in any convenient way to the server. For example in "x-botbye-token" header:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script setup>
import { runChallenge } from "botbye-vue";
async function handleSubmit() {
const token = await runChallenge();
const res = await $fetch("/api/login", {
method: "POST",
headers: {
["x-botbye-token"]: token
}
})
}
</script>