# Sehen, welcher Kanal Nuxt-Kunden bringt

> MIRA FIVE in Nuxt 4 einrichten: ein Modul, automatisch importierte Composables für Events und Flags und bezahlte Bestellungen aus Server-Routen.

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

Ein Modul zählt jede Route, Ihre Server-Routen melden die bezahlten Bestellungen.

Paket `@mirafive/sdk-nuxt`

## In 5 Schritten eingerichtet

1. ### Pakete installieren  
Das Modul baut auf dem Vue-, Browser- und Server-SDK auf. Es setzt Nuxt 4 und Node.js 20 oder neuer voraus; das Server-SDK gelangt nie in den Browser.  
```  
npm install @mirafive/sdk-nuxt @mirafive/sdk-vue @mirafive/sdk-browser @mirafive/sdk-server  
```
2. ### Modul eintragen  
Pageviews brauchen keinen Code, das Modul folgt dem Nuxt-Router. Unter `features` steht, was außer Pageviews ins Bundle kommt, hier Feature-Flags.  
```  
export default defineNuxtConfig({  
  modules: ['@mirafive/sdk-nuxt'],  
  mirafive: {  
    features: ['flags'],  
  },  
})  
```
3. ### Zwei Schlüssel eintragen  
Der Website-Schlüssel ist öffentlich. Der geheime Schlüssel einer Server-Quelle bleibt in der privaten Runtime-Config, nie in `runtimeConfig.public`.  
```  
NUXT_PUBLIC_MIRAFIVE_KEY=mf_…  
MIRAFIVE_SECRET_KEY=mf_…  
```
4. ### Eigenes Event senden  
`useMira()` wird automatisch importiert. Beim Server-Rendering tut der Aufruf nichts, dieselbe Komponente läuft also auf beiden Seiten.  
```  
<script setup lang="ts">  
const mira = useMira()  
</script>  
<template>  
  <button @click="mira.track('added_to_cart', { product: 'merino-shirt' })">In den Warenkorb</button>  
</template>  
```
5. ### Bestellung aus einer Server-Route melden  
`useServerMira(event)` steht in `server/` automatisch bereit, mit dem geheimen Schlüssel. Das Modul sendet die Events der Anfrage nach der Antwort.  
```  
// In der Server-Route, die die Zahlung bestätigt  
useServerMira(event).track('order_paid', {  
  userId: order.customerId,  
  properties: { revenue: 328, currency: 'EUR' },  
})  
```

## Was sehen Sie nach der Installation?

Die Einrichtung oben zählt ohne Cookies und ohne Speicher auf dem Gerät: Besuche, Seiten, Kanäle, Kampagnen, Länder, Geräte und Events. Danach zeigen die Übersicht und [Herkunft › Kanäle](https://mirafive.io/de/produkt/herkunft), woher Ihre Besuche kommen, und [Wege › Seiten](https://mirafive.io/de/produkt/wege), welche Routen Einstiege bringen.

## Wie kommt eine Bestellung zu ihrem Kanal?

Über die Person. Mit Einwilligung führt der Browser eine Kennung, und `identify` verknüpft sie beim Anmelden mit Ihrer Nutzer-ID. Meldet die Server-Route die Bestellung mit derselben ID, landet der Kauf bei dieser Person, neben ihrem ersten Besuch und dessen Kanal.

Mit einem Kaufziel auf `order_paid` zeigt Herkunft › Kanäle Käufer und Umsatz je Kanal. Mit verbundenem Google Ads kommen die [Kosten pro Käufer](https://mirafive.io/de/lernen/google-ads-kosten-pro-kaeufer) dazu.

## Wie erfassen Sie mit Einwilligung?

Stellen Sie die Website-Quelle unter **Daten → Quellen** auf **Vollständig**. Dann setzen Sie `mode: 'full'` in `nuxt.config.ts`. Das Modul nimmt so den Code für Kennungen ins Bundle. Ihr Banner übergibt die Antwort, nach der Anmeldung folgt `identify`:

```ts
const mira = useMira()

// Aus Ihrem Consent-Banner
mira.consent({ statistics: true, experiments: true, targeting: false })

// Nach der Anmeldung, mit Ihrer eigenen Nutzer-ID
mira.identify(user.id, { plan: user.plan })

// Nach der Abmeldung
mira.reset()
```

Vor der Antwort speichert und sendet der volle Modus nichts, und `consent(false)` löscht, was auf dem Gerät liegt. Kennungen liegen im localStorage, nie in Cookies.

## Wie zählt ein Webhook nur einmal?

Mit `send` und einem Idempotenzschlüssel. Eine Wiederholung mit demselben Schlüssel wird einmal gespeichert:

```ts
await useServerMira(event).send(
  [{ name: 'order_paid', userId: order.customerId, properties: { revenue: 328, currency: 'EUR' } }],
  { idempotencyKey: `order-${order.id}` },
)
```

## Liest das Modul Feature-Flags?

Ja. `useFlag` und `useFlagConfig` liefern schreibgeschützte Refs, Server-Routen lesen [Feature-Flags](https://mirafive.io/de/glossar/feature-flag) mit `miraFlagsFor(event, { userId })`. Ein Code-[A/B-Test](https://mirafive.io/de/glossar/ab-test) ist ein Flag, das genauso gelesen wird. Alle Optionen stehen in der [Dokumentation](https://docs.mirafive.io/sdks/nuxt).

## 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)
- [Symfony](https://mirafive.io/de/fuer/symfony)
- [PHP](https://mirafive.io/de/fuer/php)
- [Vue](https://mirafive.io/de/fuer/vue)
- [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

### Warum kommt von localhost nichts an?

Auf localhost sendet das Browser-SDK nichts und schreibt einen Hinweis in die Konsole. Testen Sie auf der ausgerollten Website oder mit dem Production-Build auf einem anderen Host.

### Flackern Feature-Flags beim ersten Bild?

Nein. Mit Flags und geheimem Schlüssel liest jedes Server-Rendering die Flags der Person und schreibt sie in den Head. Gecachte und vorgerenderte Routen laden Flags im Browser.

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

Ja, als @mirafive/sdk-vue für Vue 3\. Darauf baut das Modul auf.

## 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)