Vue.js is a progressive JavaScript framework for building user interfaces. Loamly integrates with both Vue CLI / Vite projects and Nuxt.js applications.

Add the tracking script

Method 1: index.html (recommended)

The simplest approach is to add the script tag to your index.html file in the <head> section:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Vue App</title>

  <!-- Loamly tracking script -->
  <script src="https://app.loamly.ai/t.js?d=yourdomain.com" defer></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

Replace yourdomain.com

Replace yourdomain.com with the domain you registered in your Loamly workspace settings.

Method 2: App.vue with onMounted

If you prefer to load the script programmatically, you can use Vue's onMounted lifecycle hook in your root App.vue:

<!-- src/App.vue -->
<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://app.loamly.ai/t.js?d=yourdomain.com';
  script.defer = true;
  document.head.appendChild(script);
});
</script>

<template>
  <RouterView />
</template>

SPA route tracking

Loamly automatically detects client-side route changes in Vue Router apps. No additional configuration is needed for SPA navigation tracking.

Nuxt.js integration

For Nuxt.js applications, the recommended approach is to add the script via nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://app.loamly.ai/t.js?d=yourdomain.com',
          defer: true,
        },
      ],
    },
  },
});

Alternatively, you can use the useHead composable in your app.vue:

<!-- app.vue -->
<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://app.loamly.ai/t.js?d=yourdomain.com',
      defer: true,
    },
  ],
});
</script>

<template>
  <NuxtPage />
</template>

Enable AI verification (recommended)

The client-side script tracks page views, but to unlock the full power of Loamly you need server-side setup. This enables AI bot crawl detection, RFC 9421 signature verification, bot-to-click temporal matching, and prompt-to-crawl correlation with your Intelligence data. Without it, you miss the connection between AI bots crawling your site and the humans who visit after.

See the AI Visitor Verification guide for setup instructions.

Verify installation

Start your development server with npm run dev
Visit your site in a browser
Right-click → View Page Source (or check the Network tab for the t.js request)
Check your Loamly dashboard — the visit should appear within 2 minutes

Troubleshooting

Not seeing visits?

Make sure the domain in the script tag matches the domain registered in your Loamly workspace settings
Wait at least 2 minutes — data is not instant
Check the browser Network tab to confirm t.js loaded successfully

Ad blockers

Some browser extensions may block tracking scripts. Try loading your site in an incognito/private window with extensions disabled

Debug mode

Open your browser's developer console and run:

Loamly.debug(true)

This will log all tracking events to the console so you can verify everything is working.

Need help?

If you're still having trouble, email us at hello@loamly.ai and we'll help you get set up.