Priority Hunter
/Docs/Widget/Frameworks/Vue 3
DocsWidgetFrameworksVue 3

Vue 3

Un composable que inicializa el widget al montar, observa los cambios de usuario y limpia al desmontar.

El composable

composables/usePriorityHunter.ts
// composables/usePriorityHunter.ts
import { onMounted, onUnmounted, watch, type Ref } from 'vue';

export function usePriorityHunter(
  widgetId: string,
  user: Ref<{ id: string; email?: string; name?: string } | null>
) {
  onMounted(() => {
    if (document.getElementById('ph-embed-script')) return;

    const w = window as any;
    if (!w.PH) {
      w.PH = function(...args: unknown[]) {
        (w.PH.q = w.PH.q ?? []).push(args);
      };
    }

    w.PH('init', { widgetId });

    const script = document.createElement('script');
    script.id = 'ph-embed-script';
    script.src = 'https://widget.priorityhunter.com/embed.js';
    script.async = true;
    document.head.appendChild(script);
  });

  watch(user, (u) => {
    const w = window as any;
    if (u) w.PH?.('identify', { id: u.id, email: u.email, name: u.name }); // email optional
    else   w.PH?.('unidentify');
  });

  onUnmounted(() => {
    (window as any).PH?.('destroy');
  });
}

El watch sobre el usuario garantiza que el widget se identifique tras el login y se desidentifique tras el logout — necesario para que el usuario pueda votar. Ver Identificar usuarios.

Documentación de Priority Hunterpriorityhunter.com →