https://github.com/KermanX/vite-plugin-ms-clarity

https://github.com/KermanX/vite-plugin-ms-clarity

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/KermanX/vite-plugin-ms-clarity
• Owner: KermanX
• Created: 2023-12-22T12:41:05.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-03-01T15:42:54.000Z (3 months ago)
• Last Synced: 2024-03-26T18:50:33.758Z (2 months ago)
• Language: TypeScript
• Size: 18.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vite - vite-plugin-ms-clarity - Inject the Microsoft Clarity script to `index.html`. (Plugins / Framework-agnostic Plugins)

README

        
# vite-plugin-ms-clarity

Vite plugin for [Microsoft Clarity](https://clarity.microsoft.com/).

## Usage

```js

// vite.config.js

import { defineConfig } from "vite";

import MsClarity from "vite-plugin-ms-clarity";

export default defineConfig({

  plugins: [MsClarity("YOUR-CLARITY-PROJECT-ID")],

});

```

If you only want to enable the plugin when an environment variable is set, you can use the plugin like this:

```js

defineConfig({

  plugins: [process.env.ENABLE_CLARITY && MsClarity("YOUR-CLARITY-PROJECT-ID")],

});

```

You can also use an object as the option:

```js

MsClarify({

  id: "YOUR-CLARITY-PROJECT-ID",

  enableInDevMode: true,

  // ...

});

```

## Options

### `id`

**Type**: `string | undefined`

**Example**: `k4vhy94oj3`

The ID of the project Clarity provides to you.

Can be found in the URL of your project.

### `script`

**Type**: `string | undefined`

**Default**: `undefined`

The code to inject in the HTML.

If provided, the `id` option will be ignored.

If not provided, the script provided by Clarity will be used, with the `id` provided.

### `enableInDevMode`

**Type**: `boolean`

**Default**: `false`

Whether to inject the script in development mode.

### `injectTo`

**Type**: [`vite.HtmlTagDescriptor["injectTo"]`](https://cn.vitejs.dev/guide/api-plugin#transformindexhtml)

**Default**: `"head-prepend"`

Where to inject the script.