実装ガイド

Vue 3 統合

モダンなライフサイクルフックでTagticsを統合します。クライアントがルート変更を自動で処理します。

初期化

アプリのマウント時に init を、アンマウント時に destroy を呼び出してメモリリークを防ぎます。

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    let script;

    onMounted(() => {
      script = document.createElement('script');
      script.src = 'https://cdn.tagtics.online/client.js';
      script.async = true;
      script.onload = () => {
        window.Tagtics?.init({ apiKey: 'YOUR_API_KEY' });
      };
      document.body.appendChild(script);
    });

    onUnmounted(() => {
      window.Tagtics?.destroy();
      script?.remove();
    });
  }
}

実装ガイド

Vue 3 統合

モダンなライフサイクルフックでTagticsを統合します。クライアントがルート変更を自動で処理します。

初期化

アプリのマウント時に init を、アンマウント時に destroy を呼び出してメモリリークを防ぎます。

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    let script;

    onMounted(() => {
      script = document.createElement('script');
      script.src = 'https://cdn.tagtics.online/client.js';
      script.async = true;
      script.onload = () => {
        window.Tagtics?.init({ apiKey: 'YOUR_API_KEY' });
      };
      document.body.appendChild(script);
    });

    onUnmounted(() => {
      window.Tagtics?.destroy();
      script?.remove();
    });
  }
}