Api
useScriptTriggerConsent()
Load a script once you provide consent through either a resolvable consent or the accept method. Supports revoking consent via the revoke method or the reactive consented ref.
The trigger by itself does nothing - scripts will only load when consent is granted through either the
accept() method or by providing a consent option that resolves to true.Signature
function useScriptTriggerConsent(options?: ConsentScriptTriggerOptions): UseConsentScriptTriggerApi {}
Arguments
export interface ConsentScriptTriggerOptions {
/**
* An optional reactive (or promise) reference to the consent state. You can use this to accept the consent for scripts
* instead of using the accept() method.
*/
consent?: Promise<boolean | void> | Ref<boolean> | ComputedRef<boolean> | boolean
/**
* Should the script be loaded on the `requestIdleCallback` callback. This is useful for non-essential scripts that
* have already been consented to be loaded.
*/
postConsentTrigger?: NuxtUseScriptOptions['trigger']
}
Returns
An extended promise with methods to accept and revoke consent.
interface UseConsentScriptTriggerApi extends Promise<void> {
/**
* A function that can be called to accept the consent and load the script.
*/
accept: () => void
/**
* A function that can be called to revoke consent and signal the script should be unloaded.
*/
revoke: () => void
/**
* Reactive reference to the consent state.
*/
consented: Ref<boolean>
}
Examples
Basic Usage
app.vue
<script setup lang="ts">
const trigger = useScriptTriggerConsent()
useScript('https://example.com/script.js', { trigger })
</script>
<template>
<div v-if="trigger.consented.value">
<p>Cookies accepted</p>
<button @click="trigger.revoke">
Revoke Consent
</button>
</div>
<button v-else @click="trigger.accept">
Accept Consent
</button>
</template>