Vue & Nuxt Installation

Install Narrowbeam in Vue.js and Nuxt applications using npm or script tag.

Installation Options

You can install Narrowbeam in two ways:

NPM Package (Recommended) - Better for TypeScript support and tree-shaking
Script Tag - Simpler setup, works with any framework

Nuxt 3 Installation

Option 1: NPM Package (Recommended)

Install the package:

npm install @narrowbeam/browser

Create a plugin in plugins/narrowbeam.client.ts:

import { narrowbeam } from '@narrowbeam/browser';

export default defineNuxtPlugin(() => {
  narrowbeam.init({
    orgKey: useRuntimeConfig().public.narrowbeamOrgKey || ''
  });
});

Add your org key to nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      narrowbeamOrgKey: process.env.NUXT_PUBLIC_NARROWBEAM_ORG_KEY
    }
  }
});

Option 2: Script Tag in app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<script setup>
useHead({
  script: [
    {
      innerHTML: `
        (function(w,d,e,s,n) {
          w=w[n]=w[n]||{q:[],onReady:function(c){w.q.push(c)}};
          e=d.createElement(e);e.async=1;e.src=s;
          s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
        })(window,document,'script','https://unpkg.com/@narrowbeam/browser/dist/narrowbeam.min.js','narrowbeam');
        window.narrowbeam.onReady(function() {
          window.narrowbeam.init({
            orgKey: 'YOUR_ORG_KEY'
          });
        });
      `,
      type: 'text/javascript'
    }
  ]
});
</script>

Nuxt 2 Installation

For Nuxt 2, add the script inline to nuxt.config.js:

export default {
  head: {
    script: [
      {
        innerHTML: `
          (function(w,d,e,s,n) {
            w=w[n]=w[n]||{q:[],onReady:function(c){w.q.push(c)}};
            e=d.createElement(e);e.async=1;e.src=s;
            s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
          })(window,document,'script','https://unpkg.com/@narrowbeam/browser/dist/narrowbeam.min.js','narrowbeam');
          window.narrowbeam.onReady(function() {
            window.narrowbeam.init({
              orgKey: 'YOUR_ORG_KEY'
            });
          });`,
        type: 'text/javascript'
      }
    ]
  }
};

Vue 3 (Vite) Installation

Option 1: NPM Package (Recommended)

Install the package:

npm install @narrowbeam/browser

Initialize in your src/main.ts:

import { createApp } from 'vue';
import { narrowbeam } from '@narrowbeam/browser';
import App from './App.vue';

narrowbeam.init({
  orgKey: import.meta.env.VITE_NARROWBEAM_ORG_KEY || ''
});

createApp(App).mount('#app');

Option 2: Script Tag in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      (function(w,d,e,s,n) {
        w=w[n]=w[n]||{q:[],onReady:function(c){w.q.push(c)}};
        e=d.createElement(e);e.async=1;e.src=s;
        s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
      })(window,document,'script','https://unpkg.com/@narrowbeam/browser/dist/narrowbeam.min.js','narrowbeam');
      window.narrowbeam.onReady(function() {
        window.narrowbeam.init({
          orgKey: 'YOUR_ORG_KEY'
        });
      });
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

SPA Navigation Tracking

Narrowbeam automatically tracks Single Page Application navigation in Vue Router and Nuxt. No additional configuration needed!

Automatic SPA Tracking

Client-side navigation with Vue Router is tracked automatically by interceptinghistory.pushState and history.replaceState.

Tracking Custom Events in Vue

With NPM Package

Import and use directly:

<template>
  <button @click="handleSignUp">Sign Up</button>
</template>

<script setup>
import { narrowbeam } from '@narrowbeam/browser';

const handleSignUp = () => {
  narrowbeam.trackAction('signup-clicked');
  // Your sign-up logic
};
</script>

With Script Tag

Use the global API:

<template>
  <button @click="handleSignUp">Sign Up</button>
</template>

<script setup>
const handleSignUp = () => {
  window.narrowbeam?.trackAction('signup-clicked');
  // Your sign-up logic
};
</script>

Using Data Attributes

For simpler tracking without JavaScript:

<template>
  <button data-narrowbeam-action-name="signup-clicked">
    Sign Up
  </button>
</template>

TypeScript Support

The @narrowbeam/browser package includes TypeScript definitions. If using the script tag, add type definitions:

// types/narrowbeam.d.ts
interface Window {
  narrowbeam?: {
    init: (config: { orgKey: string }) => void;
    trackAction: (actionName: string) => void;
    trackPageView: () => void;
    checkPageChange: () => void;
    onReady: (callback: () => void) => void;
  };
}

Environment Variables

Use environment variables for different environments:

# .env
NUXT_PUBLIC_NARROWBEAM_ORG_KEY=your-org-key-here # Nuxt
VITE_NARROWBEAM_ORG_KEY=your-org-key-here # Vite

Next Steps

Track Custom Events

Learn how to track button clicks and custom actions