Skip to content
Botscent

Vue

Add the page half of Botscent to a Vue app and check the install.

Add Botscent to a Vue app without Nuxt, such as a Vite app. The page half runs in the browser from the Botscent plugin. The server half runs in the server for your pages or your API. For a Nuxt app, see Nuxt.

Before you start

You need:

  • Vue 3.3 or later.
  • Node.js 22.12 or later.

1. Install the package

Install botscent from npm.

Terminal
npm install botscent

With pnpm, yarn or bun, use their add command.

2. Add the page half

In src/main.ts, add the Botscent plugin from botscent/vue with app.use.

src/main.ts
import { createApp } from 'vue'
import { Botscent } from 'botscent/vue'
import App from './App.vue'

createApp(App).use(Botscent).mount('#app')

The plugin now starts the page half in the browser.

3. Add the server half

A Vue app without Nuxt runs only in the browser. Add the server half to the server for your pages or your API. Use the page for that server:

4. Read the verdict

In any component, call useBotscent from botscent/vue. useBotscent returns a read-only ref that follows the page verdict.

src/App.vue
<script setup lang="ts">
import { useBotscent } from 'botscent/vue'

const verdict = useBotscent()
</script>

<template>
  <pre>{{ JSON.stringify(verdict) }}</pre>
</template>

In a normal browser, the component shows {"type":"human","reasons":[]}.

Warning: Do not use the page verdict to allow access. The visitor's browser computes the page verdict. On your server, use isVerified on the request's own verdict, as The trust model describes.

5. Check the install

Start the dev server. Then run the check against its URL.

Terminal
npx botscent check http://localhost:5173/

The page-script check prints pass, and the command exits with code 0.

The server-half check prints unknown, because the dev server has no server half. If a check fails, see Verify your install.

Next steps