> ## 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
> So integrierst du bchic Analytics in deine Vue.js Anwendung.
Die Integration in Vue.js (Vite oder CLI) ist sehr einfach. Da bchic moderne History-API-Events automatisch erkennt, musst du für das Tracking von Seitenwechseln (via Vue Router) nichts weiter konfigurieren.
Kopiere dein Skript aus den bchic Einstellungen. Es sollte deine `data-website-id` enthalten.
```html theme={null}
```
Suche in deinem Projektordner nach der Datei `index.html` (bei Vite-Projekten liegt diese meist direkt im Hauptverzeichnis oder unter `/public`).
Füge das Skript in den `` Bereich ein:
```html index.html theme={null}
Meine Vue App
```
Sobald du deine App veröffentlichst (oder lokal startest), beginnt bchic automatisch zu tracken. Klicke dich durch deine Routen, um sicherzustellen, dass jeder Seitenwechsel als Besuch gezählt wird.
## Custom Events (TypeScript-sicher)
Wenn du `window.bchic` direkt im Code aufrufst, erhältst du oft TypeScript- oder ESLint-Fehler ("Property 'bchic' does not exist on type 'Window'").
Wir empfehlen daher folgenden Best-Practice-Ansatz mit einer Typ-Definition und einem Composable.
### 1. Typ-Definition erstellen
Erstelle eine Datei `src/bchic.d.ts`, damit TypeScript das `bchic` Objekt kennt.
```typescript src/bchic.d.ts theme={null}
export {};
declare global {
interface Window {
bchic: (command: string, eventName: string, payload?: Record) => void;
}
}
```
### 2. Composable erstellen (Optional aber empfohlen)
Um den Zugriff noch einfacher zu machen, erstelle ein Composable unter `src/composables/useTracking.ts`:
```typescript src/composables/useTracking.ts theme={null}
export function useTracking() {
const trackEvent = (eventName: string, payload?: Record) => {
// Sicherheitscheck für SSR und Ladezustand
if (typeof window !== 'undefined' && window.bchic) {
window.bchic('track', eventName, payload);
} else {
console.warn('Tracking noch nicht geladen');
}
};
return { trackEvent };
}
```
### 3. Verwendung in Komponenten
Jetzt kannst du das Tracking in jeder Komponente sauber verwenden:
```vue src/components/SignupButton.vue theme={null}
```