Aller au contenu principal

Intégration Vue.js / Nuxt

Guide d'intégration pour les applications Vue.js et Nuxt.

Nuxt 3 (Recommandé)​

Méthode 1 : Plugin client​

Créez un plugin qui s'exécute uniquement côté client :

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

  // Charger le script
  const script = document.createElement('script')
  script.src = `https://cdn.web-kit.io/loader.js?site=${config.public.adwallSiteId}`
  script.async = true
  document.body.appendChild(script)
})

Configuration dans 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'
    }
  }
})

Méthode 2 : useHead dans app.vue​

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

useHead({
  script: [
    {
      src: `https://cdn.web-kit.io/loader.js?site=${config.public.adwallSiteId}`,
      async: true,
      body: true
    }
  ]
})
</script>

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

Nuxt 2​

Plugin​

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

    // Charger le script
    const script = document.createElement('script')
    script.src = `https://cdn.web-kit.io/loader.js?site=${process.env.ADWALL_SITE_ID}`
    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)​

Méthode 1 : Dans index.html​

<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Mon App Vue</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  
  <!-- AdSentinel SDK -->
  <script src="https://cdn.web-kit.io/loader.js?site=VOTRE_SITE_ID" async></script>
</body>
</html>

Méthode 2 : Composable​

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

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

export function useAdSentinel({
  siteId,
  debug = false,
  onConverted,
  onDetected
}: UseAdSentinelOptions) {
  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)

    // Charger le script
    script = document.createElement('script')
    script.src = `https://cdn.web-kit.io/loader.js?site=${siteId}`
    script.async = true
    document.body.appendChild(script)
  })

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

Utilisation dans un composant :

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

useAdSentinel({
  siteId: import.meta.env.VITE_ADWALL_SITE_ID,
  debug: import.meta.env.DEV,
  onConverted: () => {
    console.log('Utilisateur converti !')
  },
  onDetected: () => {
    console.log('Adblock détecté')
  }
})
</script>

<template>
  <RouterView />
</template>

Méthode 3 : Plugin Vue​

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

interface AdSentinelPluginOptions {
  siteId: string
  debug?: boolean
}

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

    // Charger le script
    const script = document.createElement('script')
    script.src = `https://cdn.web-kit.io/loader.js?site=${options.siteId}`
    script.async = true
    document.body.appendChild(script)

    // Expose AdSentinel globalement
    app.config.globalProperties.$adwall = {
      check: () => (window as any).AdSentinel?.check(),
      getSessionId: () => (window as any).AdSentinel?.getSessionId()
    }
  }
}
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { AdSentinelPlugin } from './plugins/adwall'

const app = createApp(App)

app.use(AdSentinelPlugin, {
  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'

// Charger AdSentinel
if (typeof window !== 'undefined') {
  const script = document.createElement('script')
  script.src = `https://cdn.web-kit.io/loader.js?site=${process.env.VUE_APP_ADWALL_SITE_ID}`
  script.async = true
  document.body.appendChild(script)
}

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

Variables d'environnement​

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

Le SDK AdSentinel est conçu pour fonctionner uniquement côté client. Assurez-vous d'utiliser les modes client-only ou les vérifications process.client pour éviter les erreurs SSR.