---
title: "Consent Management · Nuxt Scripts"
meta:
  description: "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:description": "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:title": "Consent Management · Nuxt Scripts"
---

```

Nuxt Scripts on GitHub

**

**Guides**

# **Consent Management**

[Copy for LLMs](https://scripts.nuxt.com/docs/v0/guides/consent.md)

## Background

Many third-party scripts include tracking cookies that require user consent under privacy laws. Nuxt Scripts simplifies this process with the [**~~useScriptTriggerConsent~~**](https://scripts.nuxt.com/docs/api/use-script-trigger-consent) composable, allowing scripts to be loaded only after receiving user consent.

## Usage

The [**~~useScriptTriggerConsent~~**](https://scripts.nuxt.com/docs/api/use-script-trigger-consent) composable offers flexible interaction options suitable for various scenarios.

See the [**~~API~~**](https://scripts.nuxt.com/docs/api/use-script-trigger-consent) docs for full details on the available options.

### Accepting as a Function

The easiest way to make use of `useScriptTriggerConsent` is by invoking the `accept` method when user consent is granted.

For an example of how you might lay out your code to handle this, see the following:

```
export const agreedToCookiesScriptConsent = useScriptTriggerConsent()
``````
<script setup lang="ts">
import { agreedToCookiesScriptConsent } from '#imports'

useScript('https://www.google-analytics.com/analytics.js', {
  trigger: agreedToCookiesScriptConsent
})
</script>
``````
<script setup lang="ts">
import { agreedToCookiesScriptConsent } from '#imports'
</script>

<template>
  <button @click="agreedToCookiesScriptConsent.accept()">
    Accept Cookies
  </button>
</template>
```### Accepting as a resolvable boolean Alternatively, you can pass a reactive reference to the consent state to the `useScriptTriggerConsent` composable. This will automatically load the script when the consent state is `true`.```
const agreedToCookies = ref(false)
useScript('https://www.google-analytics.com/analytics.js', {
  trigger: useScriptTriggerConsent({
    consent: agreedToCookies
  })
})
```### Delaying script load after consent There may be instances where you want to trigger the script load after a certain event, only if the user has consented. For this you can use the `postConsentTrigger`, which shares the same API as `trigger` from the `useScript` composable.```
const agreedToCookies = ref(false)
useScript('https://www.google-analytics.com/analytics.js', {
  trigger: useScriptTriggerConsent({
    consent: agreedToCookies,
    // load 3 seconds after consent is granted
    postConsentTrigger: () => new Promise<void>(resolve =>
      setTimeout(resolve, 3000),
    ),
  })
})
```[~~Edit this page~~](https://github.com/nuxt/scripts/edit/0.x/docs/content/docs/v0/1.guides/3.consent.md) [~~Markdown For LLMs~~](https://scripts.nuxt.com/docs/v0/guides/consent.md) [**Bundling Remote Scripts** Optimize third-party scripts by bundling them with your app.](https://scripts.nuxt.com/docs/v0/guides/bundling) [**Script Event Page** Learn how to send page events to your analytics provider.](https://scripts.nuxt.com/docs/v0/guides/page-events)**On this page **- [Background](#background) - [Usage](#usage)