Skip to main content

Vue.js / Nuxt Integration

Integration guide for Vue.js and Nuxt applications.

Method 1: Client Plugin​

Create a plugin that runs only client-side:

// plugins/adwall.client.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  
  // Optional configuration
  if (config.public.adwallDebug) {
    (window as any).ADWALL_CONFIG = { debug: true }
  }

  // Load script
  const script = document.createElement('script')
  script.src = `https://adwall-backend-xxxxx.run.app/v1/loader/${config.public.adwallSiteId}.js`
  script.async = true
  document.body.appendChild(script)
})

Configuration in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      adwallSiteId: process.env.NUXT_PUBLIC_ADWALL_SITE_ID || '',
      adwallDebug: process.env.NODE_ENV === 'development'
    }
  }
})

Method 2: useHead in app.vue​

<!-- app.vue -->
<script setup lang="ts">
const config = useRuntimeConfig()

useHead({
  script: [
    {
      src: `https://adwall-backend-xxxxx.run.app/v1/loader/${config.public.adwallSiteId}.js`,
      async: true,
      body: true
    }
  ]
})
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Nuxt 2​

Plugin​

// plugins/adwall.client.js
export default function () {
  if (process.client) {
    // Optional configuration
    window.ADWALL_CONFIG = {
      debug: process.env.NODE_ENV === 'development'
    }

    // Load script
    const script = document.createElement('script')
    script.src = `https://adwall-backend-xxxxx.run.app/v1/loader/${process.env.ADWALL_SITE_ID}.js`
    script.async = true
    document.body.appendChild(script)
  }
}
// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/adwall.client.js', mode: 'client' }
  ],
  env: {
    ADWALL_SITE_ID: process.env.ADWALL_SITE_ID
  }
}

Vue 3 (Vite)​

Method 1: In index.html​

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  
  <!-- Ad Sentinelle SDK -->
  <script src="https://adwall-backend-xxxxx.run.app/v1/loader/YOUR_SITE_ID.js" async></script>
</body>
</html>

Method 2: Composable​

// composables/useAdSentinelle.ts
import { onMounted, onUnmounted } from 'vue'

interface UseAdSentinelleOptions {
  siteId: string
  debug?: boolean
  onConverted?: () => void
  onDetected?: () => void
}

export function useAdSentinelle({
  siteId,
  debug = false,
  onConverted,
  onDetected
}: UseAdSentinelleOptions) {
  let script: HTMLScriptElement | null = null

  const handleConverted = () => onConverted?.()
  const handleDetected = () => onDetected?.()

  onMounted(() => {
    // Configuration
    if (debug) {
      (window as any).ADWALL_CONFIG = { debug: true }
    }

    // Event listeners
    window.addEventListener('adwall:converted', handleConverted)
    window.addEventListener('adwall:detected', handleDetected)

    // Load script
    script = document.createElement('script')
    script.src = `https://adwall-backend-xxxxx.run.app/v1/loader/${siteId}.js`
    script.async = true
    document.body.appendChild(script)
  })

  onUnmounted(() => {
    if (script) {
      script.remove()
    }
    window.removeEventListener('adwall:converted', handleConverted)
    window.removeEventListener('adwall:detected', handleDetected)
  })
}

Usage in a component:

<!-- App.vue -->
<script setup lang="ts">
import { useAdSentinelle } from '@/composables/useAdSentinelle'

useAdSentinelle({
  siteId: import.meta.env.VITE_ADWALL_SITE_ID,
  debug: import.meta.env.DEV,
  onConverted: () => {
    console.log('User converted!')
  },
  onDetected: () => {
    console.log('Ad blocker detected')
  }
})
</script>

<template>
  <RouterView />
</template>

Method 3: Vue Plugin​

// plugins/adwall.ts
import type { App } from 'vue'

interface AdSentinellePluginOptions {
  siteId: string
  debug?: boolean
}

export const AdSentinellePlugin = {
  install(app: App, options: AdSentinellePluginOptions) {
    // Configuration
    if (options.debug) {
      (window as any).ADWALL_CONFIG = { debug: true }
    }

    // Load script
    const script = document.createElement('script')
    script.src = `https://adwall-backend-xxxxx.run.app/v1/loader/${options.siteId}.js`
    script.async = true
    document.body.appendChild(script)

    // Expose Ad Sentinelle globally
    app.config.globalProperties.$adwall = {
      check: () => (window as any).AdSentinelle?.check(),
      getSessionId: () => (window as any).AdSentinelle?.getSessionId()
    }
  }
}
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { AdSentinellePlugin } from './plugins/adwall'

const app = createApp(App)

app.use(AdSentinellePlugin, {
  siteId: import.meta.env.VITE_ADWALL_SITE_ID,
  debug: import.meta.env.DEV
})

app.mount('#app')

Vue 2​

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

// Load Ad Sentinelle
if (typeof window !== 'undefined') {
  const script = document.createElement('script')
  script.src = `https://adwall-backend-xxxxx.run.app/v1/loader/${process.env.VUE_APP_ADWALL_SITE_ID}.js`
  script.async = true
  document.body.appendChild(script)
}

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

Environment Variables​

Nuxt 3​

# .env
NUXT_PUBLIC_ADWALL_SITE_ID=677c2846-fed7-4461-b69c-7717bc3be9b4

Vite​

# .env
VITE_ADWALL_SITE_ID=677c2846-fed7-4461-b69c-7717bc3be9b4

Vue CLI​

# .env
VUE_APP_ADWALL_SITE_ID=677c2846-fed7-4461-b69c-7717bc3be9b4
SSR

The Ad Sentinelle SDK is designed to work only client-side. Make sure to use client-only modes or process.client checks to avoid SSR errors.