useScriptTag

スクリプトタグを作成し、アンマウント時にスクリプトタグを自動的にアンロード（削除）する機能をサポートします。

指定されたURLに対して既にスクリプトタグが存在する場合、useScriptTag()は新たなスクリプトタグを作成しません。ただし、使用方法によっては、useScriptTag()が以前の呼び出しでその特定のJSファイルを既にロードしてアンロードしている可能性があることに注意してください。

使用法

import { useScriptTag } from '@vueuse/core'

useScriptTag(
  'https://player.twitch.tv/js/embed/v1.js',
  // スクリプトタグがロードされたとき。
  (el: HTMLScriptElement) => {
    // 何かを実行
  },
)

スクリプトはコンポーネントがマウントされたときに自動的にロードされ、コンポーネントがアンマウントされたときに削除されます。

設定

manual: trueを設定すると、スクリプトをロードするタイミングを手動で制御できます。

import { useScriptTag } from '@vueuse/core'

const { scriptTag, load, unload } = useScriptTag(
  'https://player.twitch.tv/js/embed/v1.js',
  () => {
    // 何かを実行
  },
  { manual: true },
)

// 手動制御
await load()
await unload()