Vue Integration

📝 Basic Implementation

<script setup>
import { ref, onMounted } from 'vue';
import { detectAdblock } from 'noblocky';

const isBlocked = ref(null);
const loading = ref(true);

onMounted(async () => {
  try {
    const result = await detectAdblock({
      timeout: 5000,
      debug: true
    });
    
    isBlocked.value = result.isBlocked;
  } catch (error) {
    console.error('Detection failed:', error);
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <div v-if="loading">Checking...</div>
  <div v-else>
    <h2>Adblock Status</h2>
    <p>{{ isBlocked ? '🚫 Blocked' : '✅ Not Blocked' }}</p>
  </div>
</template>

// composables/useAdblockDetection.ts
import { ref, onMounted } from 'vue';
import { detectAdblock, type NoBlockyResult } from 'noblocky';

export function useAdblockDetection() {
  const detection = ref<NoBlockyResult | null>(null);
  const loading = ref(true);

  onMounted(async () => {
    const result = await detectAdblock();
    detection.value = result;
    loading.value = false;
  });

  return { detection, loading };
}

// Usage in component
<script setup>
import { useAdblockDetection } from '@/composables/useAdblockDetection';

const { detection, loading } = useAdblockDetection();
</script>

<template>
  <div v-if="!loading">
    {{ detection?.isBlocked ? 'Blocked' : 'Clear' }}
  </div>
</template>

<script>
import { detectAdblock } from 'noblocky';

export default {
  data() {
    return {
      isBlocked: null,
      loading: true
    };
  },
  async mounted() {
    try {
      const result = await detectAdblock();
      this.isBlocked = result.isBlocked;
    } finally {
      this.loading = false;
    }
  }
};
</script>

📦 Installation

npm install @wildebeest-webtech/noblocky

import { detectAdblock } from 'noblocky';

⚙️ Advanced Configuration

For complete configuration options including custom detectors, callbacks, timeout settings, and advanced features, visit the advanced configuration page.