# 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)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.humblytics.com/how-to-get-started/vuejs.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.