Vue.js

Add Humblytics Analytics to a Vue.js Site

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)

Open your Vue project folder
Navigate to public/index.html
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>

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

Return to Humblytics and click Verify Website
Open your live site in a private/incognito window and refresh once
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)

PreviousVerify & Troubleshoot Tracking NextWebflow

Last updated 1 month ago

Was this helpful?