Install Muro on Vue

Add the Muro script to a Vue app built with Vite or Vue CLI, or to a Nuxt app. Vue Router navigation is tracked automatically.

For a Vue app, the Muro script goes in your index.html. In Nuxt, it goes in nuxt.config. Navigation with Vue Router's history mode is tracked without any extra code.

Steps

Copy your snippet

In Muro, go to Settings → Project → Tracking script and click Copy script:

<script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>

Add it to your app

Open index.html in the root of your project and paste the snippet inside <head>:

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your app</title>
    <script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Open public/index.html and paste the snippet inside <head>:

<!-- public/index.html -->
<head>
  <meta charset="utf-8" />
  <title>Your app</title>
  <script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>
</head>

Nuxt has no index.html. Add the script to app.head in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://api.muroanalytics.com/muro.js',
          async: true,
          'data-project-id': 'YOUR_PROJECT_ID',
        },
      ],
    },
  },
});

Nuxt renders this as a plain <script async> tag in the <head> of every page. The in-app AI install prompt doesn't have a Nuxt section, so use this guide for Nuxt.

Build and deploy

Build and deploy as usual.

Verify it works

Open your deployed app.
Open DevTools, go to the Network tab, filter by collect and reload. You should see a POST to cdn.muroanalytics.com/collect with status 202.
Navigate to another route. A new collect request appears.
Or, in Muro, set the time picker to Live. Your visit appears within about 30 seconds.

Good to know

Use history mode. createWebHistory() is tracked. createWebHashHistory() (URLs like /#/settings) isn't: every route counts as the same page. See Single-page apps.
No router code needed. Don't add a router.afterEach hook that calls window.muro.track, or every page is counted twice.
Calling window.muro. Use window.muro?.track(...) in methods and event handlers. In Nuxt, only on the client, never during server rendering. See Track custom events.
Keep localhost out. Muro counts dev-server visits too. See Keep staging and localhost out of your data.

Install Muro on Vue

Steps

Copy your snippet

Add it to your app

Build and deploy

Verify it works

Good to know

Next steps

Track custom events

Set up goals

Understand insights

On this page