Vue.js Integration

Vue Composable

import { ref, onMounted } from 'vue';
import { detectAdblock, type NoBlockyResult } from 'noblocky';

export function useAdblockDetection(options = {}) {
  const detection = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const runDetection = async () => {
    try {
      loading.value = true;
      error.value = null;
      
      const result = await detectAdblock(options.value || options);
      detection.value = result;
      return result;
    } catch (err) {
      error.value = err.message;
      throw err;
    } finally {
      loading.value = false;
    }
  };

  return { detection, loading, error, runDetection };
}
					

Vue Component Usage

<template>
  <div>
    <h2>Adblock Status</h2>
    
    <div v-if="loading">Checking...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else-if="detection">
      <p>{{ detection.isBlocked ? 'Blocked' : 'Not Blocked' }}</p>
    </div>
    
    <button @click="runDetection">Check Again</button>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useAdblockDetection } from './composables/useAdblockDetection';

const { detection, loading, error, runDetection } = 
  useAdblockDetection({
    timeout: 5000
  });

onMounted(() => {
  runDetection();
});
</script>
					

Reactive Configuration

const config = ref({
  timeout: 3000
});

const { detection, runDetection } = useAdblockDetection(config);

// Watch for config changes and re-run detection
watch(config, () => {
  runDetection();
}, { deep: true });
					

1. Installation

npm install noblocky vue@3

2. Composition API Setup

Create a reusable composable for managing adblock detection state:

// composables/useAdblockDetection.js
import { ref } from 'vue';
import { detectAdblock } from 'noblocky';
				

3. TypeScript Support

Use TypeScript for better development experience:

import type { 
  NoBlockyResult,
  NoBlockyOptions 
} from 'noblocky';