Vue.js

Add Humblytics Analytics to a Vue.js Site

1 · Sign up (or log in)

Visit humblytics.com → Start Free Trial. Finish signup—or log in to your existing workspace.

2 · Add your website in Humblytics

In the sidebar, click Add Website.

  • Domain – enter your-domain.com (omit https:// and www)

  • Site Name – internal label (e.g. Marketing-Prod)

Copy the snippet from Install Tracking Code:

html

<!-- Start Humblytics Tracking Code -->
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
<!-- End Humblytics Tracking Code -->

Keep this tab open—we'll return and click Verify Website once the tag is live.

3 · Add the script to your Vue.js app

Option 1: Add in public/index.html (recommended)

Best for: Simple setup, works with all Vue build tools (Vite, Vue CLI, Webpack)

  1. Open your Vue project folder

  2. Navigate to public/index.html

  3. Paste your Humblytics script just before the closing </head> tag:

html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Your App</title>
  
  <!-- Humblytics Analytics -->
  <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>

  1. Save the file and rebuild your app

This ensures Humblytics loads on every page and route automatically.

Option 2: Load dynamically in production only

Best for: Disabling tracking in local development

For Vite (Vue 3):

Open src/main.js or src/main.ts and add:

javascript

import { createApp } from 'vue'
import App from './App.vue'

// Load Humblytics only in production
if (import.meta.env.PROD) {
  const script = document.createElement('script')
  script.async = true
  script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE'
  document.head.appendChild(script)
}

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

For Vue CLI (Webpack):

Open src/main.js and add:

javascript

import Vue from 'vue'
import App from './App.vue'

// Load Humblytics only in production
if (process.env.NODE_ENV === 'production') {
  const script = document.createElement('script')
  script.async = true
  script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE'
  document.head.appendChild(script)
}

new Vue({
  render: h => h(App),
}).$mount('#app')

Note: Replace YOUR_ID_HERE with your actual project ID from Humblytics.

For Nuxt.js

If you're using Nuxt, see our dedicated Nuxt.js installation guide for SSR-compatible setup.

4 · Verify installation

  1. Return to Humblytics and click Verify Website

  2. Open your live site in a private/incognito window and refresh once

  3. Within ~30 seconds you should see a green Verified badge and live visitor count

If verification fails, check:

  • Script ID matches your project in Humblytics

  • You rebuilt and deployed the updated code

  • You're testing on the correct domain (not localhost if using production-only setup)

  • No browser extensions or ad-blockers are blocking the script

5 · Explore & optimize

  • Dashboard – track visitors, top pages, and referrers

  • Heatmaps – auto-generated for clicks and scroll depth

  • Experiments – run A/B tests without extra libraries (Experiments → New Test)

PreviousGhost CMSNextLaravel

Last updated

Was this helpful?