https://github.com/KermanX/vite-plugin-ms-clarity
https://github.com/KermanX/vite-plugin-ms-clarity
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/KermanX/vite-plugin-ms-clarity
- Owner: kermanx
- Created: 2023-12-22T12:41:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-01T15:42:54.000Z (about 1 year ago)
- Last Synced: 2025-04-11T20:21:22.238Z (8 days ago)
- Language: TypeScript
- Size: 18.6 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-ms-clarity - Inject the Microsoft Clarity script to `index.html`. (Plugins / Framework-agnostic Plugins)
- 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.