`ts
// vite.config.ts

import Analytics from 'unplugin-analytics/vite';

export default defineConfig({
plugins: [
Analytics({
analytics: {
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
}
})
]
});
`

Full example is located at examples/vite.

`ts
// .vitepress/config.ts

import { defineConfig } from 'vitepress';

import { injectScriptTags } from 'unplugin-analytics/vitepress';

export default defineConfig({
async transformHead(context) {
// Add the following code
injectScriptTags({
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
})(context);
},
});
`

`ts
// astro.config.mjs

import Analytics from 'unplugin-analytics/astro';

export default defineConfig({
integrations: [
Analytics({
analytics: {
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
}
})
],
});
`

Then add the astro component made of injected scripts to your layouts.

`astro
---
// src/layouts/Layout.astro

import Analytics from '~analytics/scripts.astro'

// ...
---








`

To make the TypeScript work, you can add unplugin-analytics/client to your corresponding tsconfig.json.

`json5
{
"compilerOptions": {
// ...
"types": [
"unplugin-analytics/client"
],
},
// ...
}
`

Or you can add TypeScript triple-slash directives to your .d.ts (i.e. for projects initialized by Vite, it may be src/env.d.ts).

`ts
// Your .d.ts file

///
`

Full example is located at examples/astro.

`ts
// nuxt.config.ts

export default defineNuxtConfig({
modules: ['unplugin-analytics/nuxt'],
analytics: {
cloudflare: {
beacon: '...'
},
// Your unplugin-analytics options ...
}
});
`

Full example is located at examples/nuxt.