> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bchic.de/llms.txt
> Use this file to discover all available pages before exploring further.
# Vue.js Integration
> How to integrate bchic Analytics into your Vue.js application.
Integration into Vue.js (Vite or CLI) is very simple. Since bchic automatically detects modern History API events, you don't need to configure anything extra for tracking page changes (via Vue Router).
Copy your script from the bchic settings. It should include your `data-website-id`.
```html theme={null}
```
Search for the `index.html` file in your project folder (in Vite projects, this is usually directly in the root directory or under `/public`).
Insert the script into the `` area:
```html index.html theme={null}
My Vue App
```
Once you publish your app (or start it locally), bchic starts tracking automatically. Click through your routes to ensure every page change is counted as a visit.
## Custom Events (TypeScript-safe)
If you call `window.bchic` directly in the code, you often get TypeScript or ESLint errors ("Property 'bchic' does not exist on type 'Window'").
We therefore recommend the following best practice approach with a type definition and a composable.
### 1. Create Type Definition
Create a file `src/bchic.d.ts` so TypeScript knows the `bchic` object.
```typescript src/bchic.d.ts theme={null}
export {};
declare global {
interface Window {
bchic: (command: string, eventName: string, payload?: Record) => void;
}
}
```
### 2. Create Composable (Optional but recommended)
To make access even easier, create a composable under `src/composables/useTracking.ts`:
```typescript src/composables/useTracking.ts theme={null}
export function useTracking() {
const trackEvent = (eventName: string, payload?: Record) => {
// Security check for SSR and loading state
if (typeof window !== 'undefined' && window.bchic) {
window.bchic('track', eventName, payload);
} else {
console.warn('Tracking not loaded yet');
}
};
return { trackEvent };
}
```
### 3. Usage in Components
Now you can use tracking cleanly in every component:
```vue src/components/SignupButton.vue theme={null}
```