# Sehen, woher die Käufer Ihrer Vue-App kommen

> MIRA FIVE in Vue 3 einrichten: ein Plugin und useMira für eigene Events, jede Navigation mit Vue Router gezählt und bezahlte Bestellungen vom Server.

URL: https://mirafive.io/de/fuer/vue  
Updated: 2026-09-28

Ein Vue-Plugin zählt jede Navigation, auch mit Vue Router, Ihr Server meldet die bezahlten Bestellungen.

Paket `@mirafive/sdk-vue`

## In 5 Schritten eingerichtet

1. ### Pakete installieren  
Das Vue-SDK setzt Plugin und Composables auf das Browser-SDK, 0,68 kB (min + gzip). Es setzt Vue 3.5 voraus.  
```  
npm install @mirafive/sdk-vue @mirafive/sdk-browser  
```
2. ### Website-Schlüssel eintragen  
Legen Sie den Website-Schlüssel Ihrer Website-Quelle aus **Daten → Quellen** in Vites öffentlicher Variable ab. Der geheime Schlüssel gehört nie in Browser-Code.  
```  
VITE_MIRAFIVE_KEY=mf_…  
```
3. ### Plugin installieren  
Legen Sie den Client einmal im Browser-Einstieg an und installieren Sie das Plugin vor `mount`. `pageviews()` zählt die erste Seite und jede Navigation, auch mit Vue Router, ohne Router-Hooks. Ohne Flags lassen Sie `flags()` weg.  
```  
import { createMira } from '@mirafive/sdk-browser'  
import { flags } from '@mirafive/sdk-browser/flags'  
import { pageviews } from '@mirafive/sdk-browser/pageviews'  
import { createMiraPlugin } from '@mirafive/sdk-vue'  
import { createApp } from 'vue'  
import App from './App.vue'  
const mira = createMira({  
  key: import.meta.env.VITE_MIRAFIVE_KEY,  
  plugins: [pageviews(), flags()],  
})  
createApp(App).use(createMiraPlugin(mira)).mount('#app')  
```
4. ### Bestellung vom Server melden  
Ihr Backend meldet den Kauf mit `@mirafive/sdk-server` und dem geheimen Schlüssel einer Server-Quelle, sobald die Zahlung bestätigt ist. Der Schlüssel bleibt auf dem Server.  
```  
import { Mira } from '@mirafive/sdk-server'  
const mira = new Mira({ key: process.env.MIRAFIVE_SECRET_KEY })  
// Dort, wo Ihr Backend die Zahlung bestätigt  
mira.track('order_paid', {  
  userId: order.customerId,  
  properties: { revenue: 328, currency: 'EUR' },  
})  
```
5. ### Live-Ansicht prüfen  
Öffnen Sie eine Seite unter der echten Domain und sehen Sie unter **Daten → Live** nach. Von localhost kommt nichts, außer Sie übergeben `trackLocalhost: true` an `createMira`.

MIRA FIVE ist Analyse rund um die Person. In Vue 3 ist es ein Plugin auf dem Browser-SDK: `useMira()` gibt jeder Komponente den Client, Ihr Server meldet die bezahlten Bestellungen.

## Wie senden Sie eigene Events?

Mit `track` in einem Handler. Namen mit `$` am Anfang sind reserviert.

```vue
<script setup lang="ts">
import { useMira } from '@mirafive/sdk-vue'

const mira = useMira()
</script>

<template>
  <button @click="mira.track('added_to_cart', { product: 'merino-shirt' })">In den Warenkorb</button>
</template>
```

## Wie kommt eine Bestellung zu ihrem Kanal?

Über die Person. Stellen Sie die Website-Quelle unter **Daten → Quellen** auf **Vollständig**, setzen Sie dann `mode: 'full'` und das Plugin `identity()`:

```ts
import { identity } from '@mirafive/sdk-browser/identity'

const mira = createMira({
  key: import.meta.env.VITE_MIRAFIVE_KEY,
  mode: 'full',
  plugins: [pageviews(), identity(), flags()],
})
```

Ihr Banner übergibt die Antwort mit `mira.consent({ statistics: true, experiments: true, targeting: false })`, nach der Anmeldung folgt `mira.identify(user.id, { plan: user.plan })`, nach der Abmeldung `mira.reset()`. Vor der Antwort speichert und sendet der volle Modus nichts; Kennungen liegen im localStorage, nie in Cookies.

Meldet Ihr Server die Bestellung mit derselben ID, landet der Kauf bei dieser Person. Mit einem Kaufziel auf `order_paid` zeigt Herkunft Käufer und Umsatz je Kanal. Ihr Backend muss kein Node.js sein: Für [PHP](https://mirafive.io/de/fuer/php), [Laravel](https://mirafive.io/de/fuer/laravel), [Symfony](https://mirafive.io/de/fuer/symfony) und [Convex](https://mirafive.io/de/fuer/convex) gibt es eigene Pakete.

Im Tab **Einbauen** der Quelle steht **Von Ihrem Coding-Agent einbauen lassen**: ein Prompt für Claude Code, Cursor oder Codex mit Schlüssel, allen Schritten und der Prüfung. Server-Rendering beschreibt die [Dokumentation](https://docs.mirafive.io/sdks/vue), die Aufgabenteilung die [Einrichtungsseite](https://mirafive.io/de/einrichtung).

## Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

- [Next.js](https://mirafive.io/de/fuer/nextjs)
- [React](https://mirafive.io/de/fuer/react)
- [Astro](https://mirafive.io/de/fuer/astro)
- [Laravel](https://mirafive.io/de/fuer/laravel)
- [Nuxt](https://mirafive.io/de/fuer/nuxt)
- [Symfony](https://mirafive.io/de/fuer/symfony)
- [PHP](https://mirafive.io/de/fuer/php)
- [TanStack Start](https://mirafive.io/de/fuer/tanstack-start)
- [Node.js](https://mirafive.io/de/fuer/nodejs)
- [Convex](https://mirafive.io/de/fuer/convex)
- [JavaScript](https://mirafive.io/de/fuer/javascript)
- [jede Website](https://mirafive.io/de/fuer/website)

[Zur Dokumentation](https://docs.mirafive.io)

## Fragen und Antworten

### Gehören Pageview-Aufrufe in die Hooks von Vue Router?

Nein. `pageviews()` zählt die erste Seite und jede Navigation über die Navigation API oder die History API, mit Vue Router wie ohne.

### Wo funktioniert useMira()?

In `setup` oder in Code, der in `app.runWithContext()` läuft. Außerhalb davon, oder ohne `app.use(createMiraPlugin(mira))`, meldet es `[mirafive] install the plugin first`.

### Gibt es das auch für Nuxt?

Ja, als `@mirafive/sdk-nuxt`. Das Modul baut auf diesem Paket auf und bringt die Server-Seite mit, siehe [Einrichtung für Nuxt](https://mirafive.io/de/fuer/nuxt).

## Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.

[Kostenlos starten](https://app.mirafive.io/register)[Zu den Preisen](https://mirafive.io/de/preise)