> For an index of all Botscent documentation, see https://botscent.nibnalin.me/llms.txt.

# 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](/docs/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.

```sh title="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`.

```ts title="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:

* [Express](/docs/express)
* [Hono](/docs/hono)
* [Cloudflare Workers](/docs/cloudflare-workers)
* [Netlify](/docs/netlify)
* [Vercel](/docs/vercel)
* [FastAPI and Starlette](/docs/fastapi)
* [Django](/docs/django)
* [Flask](/docs/flask)
* [Any other server](/docs/other-servers)

## 4. Read the verdict

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

```vue title="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](/docs/trust-model) describes.

## 5. Check the install

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

```sh title="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](/docs/verify).

## Next steps

* [The verdict](/docs/verdict): Read what `type`, `agent_name` and `reasons` mean.
* [From the page to the server](/docs/page-to-server): Send the page verdict to your server with `reportHeaders`.
* [Page API](/docs/page-api#usebotscent-for-vue): Read every option of `useBotscent` and the plugin.
* [examples/vue](https://github.com/nalinbhardwaj/botscent/tree/main/examples/vue): Run a Vite and Vue app with the page half.