Vue / Nuxt 연동

SilentShield의 Vue.js 및 Nuxt 연동은 곧 제공될 예정입니다.

출시 예정

원활한 연동을 위해 Vue composable과 Nuxt 모듈을 개발하고 있습니다. 그동안에는 모든 프레임워크에서 작동하는 바닐라 JavaScript 연동을 사용하실 수 있습니다.

미리보기: composable

지금 바로 사용할 수 있는 기본 composable입니다:

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

export function useSilentShield(apiKey: string) {
  let script: HTMLScriptElement | null = null;

  onMounted(() => {
    script = document.createElement('script');
    script.src = `https://api.silentshield.io/client.js?k=${apiKey}`;
    script.crossOrigin = 'anonymous';
    script.defer = true;
    document.head.appendChild(script);
  });

  onUnmounted(() => {
    if (script) document.head.removeChild(script);
  });
}