useScriptTag
Script tag injecting.
Usage
import { useScriptTag } from '@vueuse/core'
useScriptTag(
'https://player.twitch.tv/js/embed/v1.js',
// on script tag loaded.
(el: HTMLScriptElement) => {
// do something
},
)
import { useScriptTag } from '@vueuse/core'
useScriptTag(
'https://player.twitch.tv/js/embed/v1.js',
// on script tag loaded.
(el: HTMLScriptElement) => {
// do something
},
)
The script will be automatically loaded on the component mounted and removed when the component on unmounting.
Configurations
Set manual: true
to have manual control over the timing to load the script.
import { useScriptTag } from '@vueuse/core'
const { scriptTag, load, unload } = useScriptTag(
'https://player.twitch.tv/js/embed/v1.js',
() => {
// do something
},
{ manual: true },
)
// manual controls
await load()
await unload()
import { useScriptTag } from '@vueuse/core'
const { scriptTag, load, unload } = useScriptTag(
'https://player.twitch.tv/js/embed/v1.js',
() => {
// do something
},
{ manual: true },
)
// manual controls
await load()
await unload()
Type Declarations
Show Type Declarations
export interface UseScriptTagOptions extends ConfigurableDocument {
/**
* Load the script immediately
*
* @default true
*/
immediate?: boolean
/**
* Add `async` attribute to the script tag
*
* @default true
*/
async?: boolean
/**
* Script type
*
* @default 'text/javascript'
*/
type?: string
/**
* Manual controls the timing of loading and unloading
*
* @default false
*/
manual?: boolean
crossOrigin?: "anonymous" | "use-credentials"
referrerPolicy?:
| "no-referrer"
| "no-referrer-when-downgrade"
| "origin"
| "origin-when-cross-origin"
| "same-origin"
| "strict-origin"
| "strict-origin-when-cross-origin"
| "unsafe-url"
noModule?: boolean
defer?: boolean
/**
* Add custom attribute to the script tag
*
*/
attrs?: Record<string, string>
}
/**
* Async script tag loading.
*
* @see https://vueuse.org/useScriptTag
* @param src
* @param onLoaded
* @param options
*/
export declare function useScriptTag(
src: MaybeRef<string>,
onLoaded?: (el: HTMLScriptElement) => void,
options?: UseScriptTagOptions
): {
scriptTag: Ref<HTMLScriptElement | null>
load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>
unload: () => void
}
export declare type UseScriptTagReturn = ReturnType<typeof useScriptTag>
export interface UseScriptTagOptions extends ConfigurableDocument {
/**
* Load the script immediately
*
* @default true
*/
immediate?: boolean
/**
* Add `async` attribute to the script tag
*
* @default true
*/
async?: boolean
/**
* Script type
*
* @default 'text/javascript'
*/
type?: string
/**
* Manual controls the timing of loading and unloading
*
* @default false
*/
manual?: boolean
crossOrigin?: "anonymous" | "use-credentials"
referrerPolicy?:
| "no-referrer"
| "no-referrer-when-downgrade"
| "origin"
| "origin-when-cross-origin"
| "same-origin"
| "strict-origin"
| "strict-origin-when-cross-origin"
| "unsafe-url"
noModule?: boolean
defer?: boolean
/**
* Add custom attribute to the script tag
*
*/
attrs?: Record<string, string>
}
/**
* Async script tag loading.
*
* @see https://vueuse.org/useScriptTag
* @param src
* @param onLoaded
* @param options
*/
export declare function useScriptTag(
src: MaybeRef<string>,
onLoaded?: (el: HTMLScriptElement) => void,
options?: UseScriptTagOptions
): {
scriptTag: Ref<HTMLScriptElement | null>
load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>
unload: () => void
}
export declare type UseScriptTagReturn = ReturnType<typeof useScriptTag>
Source
Contributors
Anthony Fu
Denis Blazhkun
Tomáš Livora
webfansplz
Preston Alvarado
Shinigami
Alex Kozack
Yaël GUILLOUX