# See which channel brings your Vue buyers

> Add MIRA FIVE to a Vue 3 app with one plugin and the useMira composable, count every Vue Router navigation and send paid orders from your server.

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

One Vue plugin counts every navigation, Vue Router included, and your server reports the orders that paid.

Package `@mirafive/sdk-vue`

## Set up in 5 steps

1. ### Install the packages  
The Vue SDK adds a plugin and composables on top of the browser SDK, 0.68 kB (min + gzip). It needs Vue 3.5 or later.  
```  
npm install @mirafive/sdk-vue @mirafive/sdk-browser  
```
2. ### Add the website key  
Put the website key of your website source from **Data → Sources** in Vite's public variable. The website key is public; the secret key never goes into browser code.  
```  
VITE_MIRAFIVE_KEY=mf_…  
```
3. ### Install the plugin  
Create the client once in the browser entry and install the plugin before you mount. `pageviews()` counts the first page and every navigation, Vue Router included, so you add no pageview calls to router hooks. Leave out `flags()` if the app reads no flags.  
```  
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. ### Send the paid order from your server  
Record the purchase where the payment is confirmed, with `@mirafive/sdk-server` and the secret key of a server source. The key stays on the server, and the `revenue` property feeds your purchase goal.  
```  
import { Mira } from '@mirafive/sdk-server'  
const mira = new Mira({ key: process.env.MIRAFIVE_SECRET_KEY })  
// Where your backend confirms the payment  
mira.track('order_paid', {  
  userId: order.customerId,  
  properties: { revenue: 328, currency: 'EUR' },  
})  
```
5. ### Check the live view  
Deploy, open a page on its real domain and watch **Data → Live**. Events from localhost are dropped unless you pass `trackLocalhost: true` to `createMira`. In the network tab, the batch to `events.mirafive.io` answers `202`.

MIRA FIVE is analytics built around the person. In a Vue 3 app it is one plugin on top of the browser SDK: `useMira()` hands any component the client, and your server adds the paid orders, so every buyer leads back to the channel that brought them.

## How do I record what matters?

Call `track` in a handler. Name the event after what happened; names that start with `$` are reserved.

```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-crew' })">Add to cart</button>
</template>
```

## How does a paid order reach its channel?

Through the person who paid. Switch the website source to **Full** under **Data → Sources**. Then set full mode and add the `identity()` plugin:

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

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

Your banner passes its answer with `mira.consent({ statistics: true, experiments: true, targeting: false })`. After sign-in, `mira.identify(user.id, { plan: user.plan })` ties the visitor to your own user id; `mira.reset()`forgets them on sign-out. Before an answer, full mode stores and sends nothing, and ids live in localStorage, never in cookies.

Your server sends the order with the same user id, so MIRA FIVE puts the purchase on that person, next to the channel of their first visit. Create a purchase goal for `order_paid`, and Acquisition shows buyers and revenue per channel and campaign. Your backend need not run Node.js: [PHP](https://mirafive.io/for/php), [Laravel](https://mirafive.io/for/laravel), [Symfony](https://mirafive.io/for/symfony) and [Convex](https://mirafive.io/for/convex) have their own packages.

The source’s Install tab has **Let your coding agent install it**, a prompt for Claude Code, Cursor or Codex with the key, every step and the check. The [Vue SDK docs](https://docs.mirafive.io/sdks/vue) cover server rendering and typed events, and the [setup page](https://mirafive.io/setup) shows who does what, in order.

## Other setups

The same numbers, whichever way your site is built.

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

[Read the docs](https://docs.mirafive.io)

## Questions and answers

### Do I add pageview calls to Vue Router hooks?

No. `pageviews()` records the first page and every client-side navigation, Vue Router included, through the Navigation API or the History API.

### Where can I call useMira()?

In `setup`, or in code that runs inside `app.runWithContext()`. Outside both, or without `app.use(createMiraPlugin(mira))`, it reports `[mirafive] install the plugin first`.

### Does it work with server rendering?

Yes. `createMira()` needs a browser, so on the server you install the plugin with `undefined` as the client. During the server render, `useMira()` returns a stand-in whose calls do nothing.

### I use Nuxt. Which package fits?

`@mirafive/sdk-nuxt`, which builds on this one. It creates the client and wires the server side for you; the [Nuxt setup](https://mirafive.io/for/nuxt) walks through it.

## See which channel brings buyers

Free for 25,000 events a month. No card needed.

[Start free](https://app.mirafive.io/register)[See pricing](https://mirafive.io/pricing)