MIRA FIVE
DEStart free

See which channel brings your Vue buyers

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

Start freeRead the docs

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.

    Code for step 1 of the Vue setup: Install the packages. 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.

    Code for step 2 of the Vue setup: Add the website key. 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.

    Code for step 3 of the Vue setup: Install the plugin. 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.

    Code for step 4 of the Vue setup: Send the paid order from your server. 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.

<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:

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, Laravel, Symfony and 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 cover server rendering and typed events, and the setup page shows who does what, in order.

Other setups

The same numbers, whichever way your site is built.

Read the docs

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 walks through it.

See which channel brings buyers

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

Start freeSee pricing