# 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
```html
```
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 `` tag:
html
```html
Your App
```
4. 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
```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
```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)