1---
2category: Browser
3---
4 
5# useScriptTag
6 
7Creates a script tag, with support for automatically unloading (deleting) the script tag on unmount.
8 
9If a script tag already exists for the given URL, `useScriptTag()` will not create another script tag, but keep in mind that depending on how you use it, `useScriptTag()` might have already loaded then unloaded that particular JS file from a previous call of `useScriptTag()`.
10 
11## Usage
12 
13```ts
14import { useScriptTag } from '@vueuse/core'
15 
16useScriptTag(
17  'https://player.twitch.tv/js/embed/v1.js',
18  // on script tag loaded.
19  (el: HTMLScriptElement) => {
20    // do something
21  },
22)
23```
24 
25The script will be automatically loaded when the component is mounted and removed when the component is unmounted.
26 
27## Configuration
28 
29Set `manual: true` to have manual control over the timing to load the script.
30 
31```ts
32import { useScriptTag } from '@vueuse/core'
33 
34const { scriptTag, load, unload } = useScriptTag(
35  'https://player.twitch.tv/js/embed/v1.js',
36  () => {
37    // do something
38  },
39  { manual: true },
40)
41 
42// manual controls
43await load()
44await unload()
45```
46 
47## Type Declarations
48 
49```ts
50export interface UseScriptTagOptions extends ConfigurableDocument {
51  /**
52   * Load the script immediately
53   *
54   * @default true
55   */
56  immediate?: boolean
57  /**
58   * Add `async` attribute to the script tag
59   *
60   * @default true
61   */
62  async?: boolean
63  /**
64   * Script type
65   *
66   * @default 'text/javascript'
67   */
68  type?: string
69  /**
70   * Manual controls the timing of loading and unloading
71   *
72   * @default false
73   */
74  manual?: boolean
75  crossOrigin?: "anonymous" | "use-credentials"
76  referrerPolicy?:
77    | "no-referrer"
78    | "no-referrer-when-downgrade"
79    | "origin"
80    | "origin-when-cross-origin"
81    | "same-origin"
82    | "strict-origin"
83    | "strict-origin-when-cross-origin"
84    | "unsafe-url"
85  noModule?: boolean
86  defer?: boolean
87  /**
88   * Add custom attribute to the script tag
89   *
90   */
91  attrs?: Record<string, string>
92  /**
93   * Nonce value for CSP (Content Security Policy)
94   * @default undefined
95   */
96  nonce?: string
97}
98export interface UseScriptTagReturn {
99  scriptTag: ShallowRef<HTMLScriptElement | null>
100  load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>
101  unload: () => void
102}
103/**
104 * Async script tag loading.
105 *
106 * @see https://vueuse.org/useScriptTag
107 * @param src
108 * @param onLoaded
109 * @param options
110 */
111export declare function useScriptTag(
112  src: MaybeRefOrGetter<string>,
113  onLoaded?: (el: HTMLScriptElement) => void,
114  options?: UseScriptTagOptions,
115): UseScriptTagReturn
116```
117