---
title: "Clarity · Nuxt Scripts"
meta:
  description: "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:description": "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:title": "Clarity · Nuxt Scripts"
---

```

Nuxt Scripts on GitHub

**

**Marketing**# **Clarity**[Copy for LLMs](https://scripts.nuxt.com/scripts/v0/marketing/clarity.md) [**~~Clarity~~**](https://clarity.microsoft.com/) by Microsoft is a screen recorder and heatmap tool that helps you understand how users interact with your website. Nuxt Scripts provides a registry script composable `useScriptClarity` to easily integrate Clarity in your Nuxt app. The simplest way to load Clarity globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the **~~useScriptClarity~~** composable. ## Loading Globally If you don't plan to send custom events you can use the [**~~Environment overrides~~**](https://nuxt.com/docs/getting-started/configuration#environment-overrides) to disable the script in development.```
export default defineNuxtConfig({
  scripts: {
    registry: {
      clarity: {
        id: 'YOUR_ID'
      }
    }
  }
})
``````
export default defineNuxtConfig({
  $production: {
    scripts: {
      registry: {
        clarity: {
          id: 'YOUR_ID',
        }
      }
    }
  }
})
``````
export default defineNuxtConfig({
  scripts: {
    registry: {
      clarity: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        clarity: {
          // .env
          // NUXT_PUBLIC_SCRIPTS_CLARITY_ID=<your-id>
          id: '',
        },
      },
    },
  },
})
```## useScriptClarity The `useScriptClarity` composable lets you have fine-grain control over when and how Clarity is loaded on your site.```
const { proxy } = useScriptClarity({
  id: 'YOUR_ID'
})
// example
proxy.clarity("identify", "custom-id", "custom-session-id", "custom-page-id", "friendly-name")
``` Please follow the [**~~Registry Scripts~~**](https://scripts.nuxt.com/docs/guides/registry-scripts) guide to learn more about advanced usage. ### ClarityApi```
type ClarityFunctions = ((fn: 'start', options: { content: boolean, cookies: string[], dob: number, expire: number, projectId: string, upload: string }) => void)
  & ((fn: 'identify', id: string, session?: string, page?: string, userHint?: string) => Promise<{
  id: string
  session: string
  page: string
  userHint: string
}>)
  & ((fn: 'consent') => void)
  & ((fn: 'set', key: any, value: any) => void)
  & ((fn: 'event', value: any) => void)
  & ((fn: 'upgrade', upgradeReason: any) => void)
  & ((fn: string, ...args: any[]) => void)

export interface ClarityApi {
  clarity: ClarityFunctions & {
    q: any[]
    v: string
  }
}
```### Config Schema You must provide the options when setting up the script for the first time.```
export const ClarityOptions = object({
  /**
   * The Clarity token.
   */
  id: pipe(string(), minLength(10)),
})
```## Example Using Clarity only in production while using `clarity` to send a conversion event.```
<script setup lang="ts">
const { proxy } = useScriptClarity()

// noop in development, ssr
// just works in production, client
function sendConversion() {
  proxy.clarity('event', 'conversion')
}
</script>

<template>
  <div>
    <button @click="sendConversion">
      Send Conversion
    </button>
  </div>
</template>
```[~~Edit this page~~](https://github.com/nuxt/scripts/edit/0.x/docs/content/scripts/v0/marketing/clarity.md) [~~Markdown For LLMs~~](https://scripts.nuxt.com/scripts/v0/marketing/clarity.md) [**YouTube Player** Show performance-optimized YouTube videos in your Nuxt app.](https://scripts.nuxt.com/scripts/v0/content/youtube-player) [**Hotjar** Use Hotjar in your Nuxt app.](https://scripts.nuxt.com/scripts/v0/marketing/hotjar)**On this page **- [Loading Globally](#loading-globally) - [useScriptClarity](#usescriptclarity) - [Example](#example)