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

# Nuxt

Add both halves of Botscent to a Nuxt app and check the install.

Add Botscent to a Nuxt app. The page half runs in the browser from the `botscent/nuxt` module. The server half runs in your server routes, where you call `inspect`.

## Before you start

You need:

* Nuxt 3 or 4.
* 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 `nuxt.config.ts`, add `botscent/nuxt` to `modules`.

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
  modules: ['botscent/nuxt'],
})
```

A client plugin now starts the page half in the browser, and the module auto-imports `useBotscent`.

## 3. Add the server half

Botscent has no server adapter for Nuxt. In a server route or a Nitro server middleware, call `inspect` from `botscent/server` with `event.node.req`.

```ts title="server/api/visit.post.ts"
import { inspect } from 'botscent/server'

export default defineEventHandler(async (event) => {
  const verdict = await inspect(event.node.req)
  return verdict
})
```

The route now returns the request's own verdict as JSON.

Without a server adapter, the request's own verdict does not reach the page. On Vercel or Cloudflare, put `botscent/vercel` or `botscent/workers` in front of the app to send the verdict to the page. See [Vercel](/docs/vercel) and [Cloudflare Workers](/docs/cloudflare-workers).

> **Warning:** Do not use `agent_name` or the page verdict to allow access. Anyone can send the headers that produce a name, and the browser computes the page verdict. Use `isVerified` on the request's own verdict, as [The trust model](/docs/trust-model) describes.

## 4. Read the verdict

In any component, call `useBotscent`. The module imports `useBotscent` for you, and `useBotscent` returns a read-only ref.

```vue title="app/app.vue"
<script setup lang="ts">
const verdict = useBotscent()
</script>

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

The server renders `{"type":"human","reasons":[]}`, and after hydration the value follows the page verdict.

## 5. Check the install

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

```sh title="Terminal"
npx botscent check http://localhost:3000/
```

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

The `server-half` check prints `unknown`, because no server adapter sends the request's own verdict to the page. 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 a server route with `reportHeaders`.
* [Server API (TypeScript)](/docs/server-api#inspect): Read every option of `inspect`.
* [examples/nuxt](https://github.com/nalinbhardwaj/botscent/tree/main/examples/nuxt): Run a Nuxt app with both halves.