### Install Dependencies

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Installs the necessary dependencies for the project.

```bash
npm install
```

--------------------------------

### Reactivity Chain Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Illustrates the flow of state updates within the module, starting from cookie changes to the re-evaluation of computed properties and component re-renders.

```plaintext
Cookie Changes
  ↓
preferencesCookie.value updated
  ↓
Watchers detect change
  ↓
state.value updated (useState)
  ↓
preferences (exposed Ref) updated
  ↓
hasUserMadeChoice computed re-evaluated
  ↓
Components watching preferences re-render
```

--------------------------------

### Module Setup and Runtime Config

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

The module's setup function receives options and the Nuxt instance, making the provided options available in the public runtime configuration for access within the application.

```typescript
// module.ts setup()
setup(options, nuxt) {
  nuxt.options.runtimeConfig.public.cookieConsent = options
}
```

--------------------------------

### Develop with Playground

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Starts the development server with the playground environment for live development.

```bash
npm run dev
```

--------------------------------

### Inject Scripts Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/utilities.md

Demonstrates how `injectScripts` is called within `updatePreferences` to add scripts based on user consent. It also shows its usage during plugin setup.

```typescript
// Inside updatePreferences()
removeScripts(updated);
injectScripts(
  config.scripts,
  updated,
  config.gtmConsentMapping,
  config?.debug || false
);

// And later:
if (config.gtmConsentMapping) {
  setTimeout(() => {
    sendConsentToGTM(updated, config.gtmConsentMapping, !!config.debug)
  }, 300) // 300ms delay for GTM script to load
}

```

```typescript
// In plugin setup
if (hasUserMadeChoice) {
  injectScripts(
    config.scripts,
    acceptedCategories,
    config.gtmConsentMapping,
    config?.debug || false
  );
}

```

--------------------------------

### Complete Cookie Consent Configuration Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

This example demonstrates a comprehensive configuration including category definitions, script injections, cookie options, and GTM integration.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-simple-cookie-consent'],
  cookieConsent: {
    // Category definitions
    categories: {
      essential: {
        label: 'Essential Cookies',
        description: 'Required for core site functionality',
        required: true // Users cannot opt-out
      },
      analytics: {
        label: 'Analytics',
        description: 'Help us understand how you use the site',
        required: false
      },
      marketing: {
        label: 'Marketing',
        description: 'Show you relevant ads and content',
        required: false
      },
      personalization: {
        label: 'Personalization',
        description: 'Remember your preferences',
        required: false
      }
    },

    // Scripts to conditionally inject
    scripts: [
      {
        id: 'gtag',
        src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX',
        async: true,
        categories: ['analytics']
      },
      {
        id: 'gtag-config',
        customContent: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXXXXX');
        `,
        categories: ['analytics']
      },
      {
        id: 'facebook-pixel',
        src: 'https://connect.facebook.net/en_US/fbevents.js',
        async: true,
        categories: ['marketing']
      },
      {
        id: 'facebook-pixel-config',
        customContent: `
          fbq('init', 'YOUR_FB_PIXEL_ID');
          fbq('track', 'PageView');
        `,
        categories: ['marketing']
      }
    ],

    // Cookie options
    cookieName: 'user_consent_prefs',
    expiresInDays: 365,
    consentVersion: '1.0.0',

    // GTM integration
    gtmConsentMapping: {
      analytics: 'analytics_storage',
      marketing: 'ad_storage',
      personalization: 'personalization_storage'
    },

    // Development aid
    debug: process.env.DEBUG === 'true'
  }
})
```

--------------------------------

### Install nuxt-simple-cookie-consent

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Install the module to your Nuxt application using nuxi.

```bash
npx nuxi@latest module add nuxt-simple-cookie-consent
```

--------------------------------

### Full Module Configuration with GTM

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

An extensive configuration example demonstrating how to set up categories, scripts, and Google Tag Manager consent mapping for comprehensive cookie consent management.

```typescript
cookieConsent: {
  categories: {
    analytics: { label: 'Analytics', required: false },
    essential: { label: 'Essential', required: true }
  },
  scripts: [
    {
      id: 'gtag',
      src: 'https://www.googletagmanager.com/gtag/js?id=GA_ID',
      categories: ['analytics']
    }
  ],
  expiresInDays: 365,
  consentVersion: '1.0',
  gtmConsentMapping: {
    analytics: 'analytics_storage'
  },
  debug: false
}
```

--------------------------------

### Debug Log Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

Example of debug output that may appear in the console when debug mode is enabled.

```log
[DEBUG] Sending GTM consent update: { analytics_storage: "granted" }
```

--------------------------------

### Documentation Navigation Structure

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/MANIFEST.md

This structure outlines the organization of the documentation files for the Nuxt Simple Cookie Consent module, guiding users through setup, API, architecture, and troubleshooting.

```markdown
README.md (Start here)
├── configuration.md (Setup & options)
├── types.md (Type reference)
├── api-reference/
│   ├── index.md (API overview)
│   ├── useCookieConsent.md (Main composable)
│   ├── events.md (Event system)
│   └── utilities.md (Internal functions)
├── architecture.md (System design)
└── errors.md (Troubleshooting)
```

--------------------------------

### Cookie Persistence Serialization Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Demonstrates how user preferences, timestamp, and version are serialized for storage in cookies.

```javascript
// Preferences stored as JSON
{ "analytics": true, "ads": false }

// Timestamp as milliseconds
1234567890123

// Version as string
"1.0.0"
```

--------------------------------

### Complete Cookie Consent Management Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/useCookieConsent.md

A comprehensive example demonstrating the integration of useCookieConsent composable in a Vue.js application. It includes setting up event listeners, managing user preferences, and rendering a cookie consent banner with category selection.

```vue
<script setup lang="ts">
import { computed } from 'vue';
import { useCookieConsent } from '#app';

const { 
  preferences, 
  categories, 
  categoryMeta, 
  hasUserMadeChoice, 
  isConsentExpired, 
  acceptAll, 
  denyAll, 
  acceptCategories, 
  updatePreferences, 
  resetPreferences, 
  onConsentAccepted, 
  onConsentDenied, 
  onCategoryAccepted, 
  onScriptsInjected, 
} = useCookieConsent();

// Track selected categories for UI
const selected = computed({
  get: () => Object.entries(preferences.value)
    .filter(([_, accepted]) => accepted)
    .map(([category]) => category),
  set: (cats) => acceptCategories(cats)
});

// Set up event listeners
onConsentAccepted(() => {
  console.log('All cookies accepted');
});

onCategoryAccepted((cat) => {
  console.log(`Category ${cat} accepted`);
});

onScriptsInjected((cat) => {
  console.log(`Scripts for ${cat} injected`);
});

const handleSave = () => {
  updatePreferences({
    analytics: selected.value.includes('analytics'),
    ads: selected.value.includes('ads'),
  });
};
</script>

<template>
  <div v-if="!hasUserMadeChoice || isConsentExpired" class="cookie-banner">
    <h2>Cookie Preferences</h2>
    <p>We use cookies to improve your experience.</p>

    <!-- Show each category -->
    <div v-for="cat of categories" :key="cat">
      <label>
        <input
          type="checkbox"
          :checked="preferences[cat]"
          :disabled="categoryMeta[cat].required"
          @change="() => toggleCategory(cat)"
        />
        {{ categoryMeta[cat].label }}
      </label>
      <p>{{ categoryMeta[cat].description }}</p>
    </div>

    <!-- Action buttons -->
    <button @click="acceptAll">Accept All</button>
    <button @click="denyAll">Reject All</button>
    <button @click="handleSave">Save Preferences</button>
    <button v-if="hasUserMadeChoice" @click="resetPreferences">Reset</button>
  </div>
</template>
```

--------------------------------

### GTM Consent Update Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Demonstrates how the GTM consent object is updated based on user preferences and the defined mapping. This example shows 'analytics_storage' granted and 'ad_storage' denied.

```javascript
window.gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': 'denied'
})
```

--------------------------------

### GTM Script Setup - Immediate Load

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Configures the GTM script to load immediately upon initialization, regardless of user consent. This is achieved by assigning an empty array to the categories property.

```typescript
scripts: [
  {
    id: 'gtag',
    src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX',
    categories: [] // Loads immediately regardless of consent
  }
]
```

--------------------------------

### GTM Script Setup - With Category

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Sets up the GTM script to be loaded only when the user accepts the specified category, typically 'analytics'. Ensure this script is listed first in the scripts array.

```typescript
scripts: [
  {
    id: 'gtag',
    src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX',
    categories: ['analytics'] // or include in all
  },
  // Other scripts...
]
```

--------------------------------

### Overriding Configuration at Runtime (Not Recommended)

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

While possible, directly overriding the runtime configuration is not recommended. Use the module's options in nuxt.config.ts for initial setup.

```typescript
// Override at runtime
const config = useRuntimeConfig().public.cookieConsent
config.categories = newCategories  // NOT RECOMMENDED
```

--------------------------------

### CookieScript Usage Examples

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/types.md

Demonstrates how to define an array of CookieScript objects for loading external scripts, injecting inline JavaScript, or embedding raw HTML like pixels and iframes. Ensure at least one of `src` or `customContent` is provided.

```typescript
const scripts = [
  // External script
  {
    id: 'ga',
    src: 'https://www.googletagmanager.com/gtag/js?id=GA_ID',
    async: true,
    categories: ['analytics']
  },
  // Inline script
  {
    id: 'ga-init',
    customContent: '
      window.dataLayer = window.dataLayer || [];
      gtag(\'config\', \'GA_ID\');
    ',
    categories: ['analytics']
  },
  // Pixel/iframe
  {
    id: 'facebook-pixel',
    customHTML: '<img src="https://pixel.example.com?id=123" />',
    categories: ['ads']
  },
  // Multi-category script
  {
    id: 'universal-pixel',
    src: 'https://tracking.example.com/pixel.js',
    categories: ['analytics', 'ads']
  }
];
```

--------------------------------

### User Preferences Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/README.md

This JavaScript object represents a user's cookie consent preferences, where keys are category names and values indicate acceptance (true) or rejection (false). Essential categories are always true.

```javascript
{
  analytics: true,      // User accepted analytics
  ads: false,           // User rejected ads
  essential: true       // Required, always true
}
```

--------------------------------

### Nuxt Module Definition

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Defines the core Nuxt module, including metadata, default options, and setup logic. This file is primarily for configuration and does not contain core functionality.

```typescript
export default defineNuxtModule<ModuleOptions>({
  meta: { name: 'nuxt-simple-cookie-consent', configKey: 'cookieConsent' },
  defaults: { categories: {}, scripts: [], cookieName: 'cookie_consent' },
  setup(options, nuxt) {
    // Store config in public runtime config
    // Add plugin
    // Add auto-imports for composables
  }
})
```

--------------------------------

### GTM Consent Mapping Example

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/types.md

Illustrates mapping custom cookie consent categories to Google Tag Manager consent fields. This mapping is crucial for correctly configuring the `gtag` consent updates based on user choices.

```typescript
// Map cookie consent categories to GTM consent fields
const gtmConsentMapping = {
  ads: 'ad_storage',
  analytics: 'analytics_storage',
  personalization: 'personalization_storage'
};

// This mapping is passed to useCookieConsent config
// When user accepts 'ads', GTM receives: gtag('consent', 'update', { ad_storage: 'granted' })
```

--------------------------------

### Custom Banner Component with Nuxt Composables

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

Example of a custom cookie banner component using the `useCookieConsent` composable to manage user preferences and actions like accepting or denying all cookies.

```vue
<script setup lang="ts">
import { useCookieConsent } from '#app';

const { 
  categories,
  categoryMeta,
  preferences,
  hasUserMadeChoice,
  acceptAll,
  denyAll,
  updatePreferences
} = useCookieConsent();

const selected = reactive({ ...preferences.value });

const handleSave = () => {
  updatePreferences(selected);
};
</script>

<template>
  <div v-if="!hasUserMadeChoice" class="cookie-banner">
    <!-- Banner UI -->
    <button @click="acceptAll">Accept All</button>
    <button @click="denyAll">Reject All</button>
    <button @click="handleSave">Save Preferences</button>
  </div>
</template>
```

--------------------------------

### Build Playground

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Builds the playground environment for deployment or testing.

```bash
npm run dev:build
```

--------------------------------

### Post-Consent Initialization with Nuxt Plugin

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

Demonstrates how to use Nuxt plugin to initialize tracking scripts based on user consent events like full acceptance or category acceptance.

```typescript
import { onConsentAccepted, onCategoryAccepted } from 'nuxt-simple-cookie-consent';

export default defineNuxtPlugin(() => {
  onConsentAccepted(() => {
    // Initialize all tracking
    initializeAnalytics();
    initializeAdvertising();
  });

  onCategoryAccepted((category) => {
    if (category === 'analytics') {
      initializeAnalytics();
    }
  });
});
```

--------------------------------

### App Initialization Data Flow

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Diagram outlining the process during application startup, including reading cookies, initializing state, and injecting scripts based on stored user preferences.

```mermaid
App Starts
  ↓
Plugin Runs
  ↓
├─ Read stored cookies
├─ Parse JSON preferences
├─ Check expiration & version
├─ Initialize state
│  └─ Required categories: true
│  └─ Other categories: stored value or null
├─ hasUserMadeChoice computed
├─ If user chose & client:
│  └─ injectScripts()
│     └─ Inject for accepted categories
│     └─ Emit 'categoryAccepted' events
  ↓
App Ready
  ↓
Component can call useCookieConsent()
```

--------------------------------

### Standalone Cookie Categories Object

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/types.md

Example of creating a TypeScript object that conforms to the CookieConsentCategory type. This can be used for defining categories outside of the nuxt.config.ts.

```typescript
const categories = {
  analytics: {
    label: 'Analytics',
    description: 'Used to improve your browsing experience',
    required: false
  },
  essential: {
    label: 'Essential Cookies',
    description: 'Required for site functionality',
    required: true
  }
};
```

--------------------------------

### Run Vitest

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Runs the test suite using Vitest.

```bash
npm run test
```

--------------------------------

### Run ESLint

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Executes ESLint to check code for style and potential errors.

```bash
npm run lint
```

--------------------------------

### Multi-Category Script Configuration

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Configures a script to load if the user accepts any of the specified categories. This allows a single script to serve multiple purposes, like analytics and marketing.

```typescript
{
  id: 'universal-tracking',
  src: 'https://tracking.example.com/script.js',
  categories: ['analytics', 'marketing']
}
```

--------------------------------

### Post-Consent Script Initialization

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Extend the module's functionality by executing custom code after a user accepts the cookie consent. This is useful for initializing third-party tracking scripts or analytics.

```typescript
onConsentAccepted(() => {
  // Initialize custom tracking
})
```

--------------------------------

### Listening for Full Consent Acceptance

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/events.md

Use this shortcut to execute a callback function specifically when the user accepts all cookie categories. This is ideal for initializing tracking scripts.

```typescript
import { onConsentAccepted } from 'nuxt-simple-cookie-consent';

onConsentAccepted(() => {
  console.log('User has given full consent');
  // Initialize all tracking
  gtag('config', 'GA_ID');
  fbq('track', 'PageView');
});
```

--------------------------------

### Release New Version

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Automates the process of releasing a new version of the package.

```bash
npm run release
```

--------------------------------

### Minimal Module Configuration

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

This snippet shows the most basic configuration for the cookie consent module, defining only the necessary categories.

```typescript
cookieConsent: {
  categories: {
    analytics: { label: 'Analytics' }
  },
  scripts: []
}
```

--------------------------------

### Run Vitest in Watch Mode

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Runs the test suite using Vitest and watches for file changes to re-run tests.

```bash
npm run test:watch
```

--------------------------------

### Properties & Methods

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/MANIFEST.md

This section outlines the reactive properties and methods exposed by the main composable, allowing you to interact with and control the cookie consent state within your Nuxt application.

```APIDOC
## Properties & Methods

### Description
Exposed properties and methods from the main composable for managing cookie consent.

### Properties
- **preferences** (`Ref`) - A reactive reference to the user's current cookie preferences.
- **categories** (`array`) - An array representing the current state of all cookie categories.
- **categoryMeta** (`object`) - Metadata associated with each cookie category.
- **scripts** (`array`) - An array of scripts managed by the module.
- **hasUserMadeChoice** (`computed`) - A computed property indicating if the user has made any consent choice.
- **consentTimestamp** (`Ref`) - A reactive reference to the timestamp of the user's consent.
- **isConsentExpired** (`computed`) - A computed property indicating if the current consent has expired.

### Methods
- **acceptAll()** - Accepts all available cookie categories.
- **denyAll()** - Denies all available cookie categories.
- **acceptCategories()** - Accepts a specified set of cookie categories.
- **updatePreferences()** - Updates the user's cookie preferences based on provided settings.
- **resetPreferences()** - Resets all cookie consent preferences to their default state.
```

--------------------------------

### Reactive UI Updates with Composables

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

Shows how to use computed properties with `useCookieConsent` to reactively update the UI based on user preferences and consent status, such as enabling analytics or displaying a banner.

```typescript
const { preferences, isConsentExpired } = useCookieConsent();

const isAnalyticsEnabled = computed(
  () => preferences.value.analytics === true
);

const showBanner = computed(
  () => !hasUserMadeChoice.value || isConsentExpired.value
);
```

--------------------------------

### Import All Type Exports

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/types.md

Import all available type definitions from the package for comprehensive type checking and autocompletion.

```typescript
import type {
  ModuleOptions,
  CookieConsentCategory,
  CookieScript,
  GTMConsentField
} from 'nuxt-simple-cookie-consent'
```

--------------------------------

### Listening for Consent Denial

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/events.md

This function allows you to register a callback that runs when a user denies all non-essential cookies, either by explicitly denying or resetting preferences. Use this to clean up analytics or ad scripts.

```typescript
import { onConsentDenied } from 'nuxt-simple-cookie-consent';

onConsentDenied(() => {
  console.log('User has rejected non-essential cookies');
  // Clean up analytics, ads
});
```

--------------------------------

### User Updates Preferences Data Flow

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Diagram illustrating the sequence of operations when a user updates their preferences, from clicking 'Accept All' to injecting scripts and sending consent to GTM.

```mermaid
User clicks "Accept All"
  ↓
useCookieConsent().acceptAll()
  ↓
updatePreferences() called
  ↓
├─ Update reactive state
├─ Save to cookies (preferences, timestamp, version)
├─ removeScripts(updated)
│  └─ Remove denied category scripts
│     └─ Emit 'scriptsRemoved' events
├─ injectScripts(config.scripts, updated)
│  └─ Inject accepted category scripts
│     └─ Emit 'categoryAccepted' events
│     └─ After 300ms: sendConsentToGTM()
├─ Emit 'consentAccepted' event
  ↓
Listeners notified
  ↓
Done
```

--------------------------------

### Generate Type Stubs

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/README.md

Generates type stubs for the project, typically required before development.

```bash
npm run dev:prepare
```

--------------------------------

### Configuration Options

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/MANIFEST.md

These are the options available for configuring the Nuxt Simple Cookie Consent module. They control various aspects of its behavior, such as cookie management, script execution, and integration with other services.

```APIDOC
## Configuration Options

### Description
Configuration options to customize the behavior of the cookie consent module.

### Options
- **categories** (`Record<string, CookieConsentCategory>`) - Defines the available cookie categories.
- **scripts** (`CookieScript[]`) - An array of scripts to manage based on consent.
- **cookieName** (`string`) - The name of the cookie used to store consent preferences.
- **expiresInDays** (`number`) - The number of days until the consent cookie expires.
- **consentVersion** (`string`) - A version identifier for the consent.
- **gtmConsentMapping** (`Record<string, GTMConsentField>`) - Maps consent states to Google Tag Manager consent states.
- **debug** (`boolean`) - Enables or disables debug mode for the module.
```

--------------------------------

### Configure Cookie Consent with TypeScript

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Utilize TypeScript for type-safe configuration of `nuxt-simple-cookie-consent`. Import `ModuleOptions` for type checking and IDE autocomplete.

```typescript
import type { ModuleOptions } from 'nuxt-simple-cookie-consent'

const config: ModuleOptions = {
  categories: { /* ... */ },
  scripts: [ /* ... */ ]
}

export default defineNuxtConfig({
  cookieConsent: config
})
```

--------------------------------

### Inline Script Configuration

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Creates an inline script tag with custom JavaScript content. Useful for initialization scripts or direct commands. The src property should be omitted or empty.

```typescript
{
  id: 'ga-init',
  src: '', // Empty or omit
  customContent: '
    window.dataLayer = window.dataLayer || [];
    gtag(\'config\', \'GA_ID\');
  ',
  categories: ['analytics']
}
```

--------------------------------

### Configure Cookie Consent for Development

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Enable debug mode and set a short cookie expiry for development environments. Uses `process.env.NODE_ENV` to determine the environment.

```typescript
const isDev = process.env.NODE_ENV === 'development';

export default defineNuxtConfig({
  cookieConsent: {
    debug: isDev,
    expiresInDays: isDev ? 1 : 180  // Short expiry in dev
  }
})
```

--------------------------------

### useCookieConsent API

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/README.md

The main composable provides access to cookie consent preferences, categories, and methods to manage user consent. It also exposes computed properties for consent status and event listeners for consent changes.

```APIDOC
## useCookieConsent

### Description
Provides reactive access to cookie consent state and management functions. This composable is the primary interface for interacting with the cookie consent module in your Nuxt application.

### Method Signature
```typescript
const {
  preferences,
  categories,
  categoryMeta,
  acceptAll,
  denyAll,
  acceptCategories,
  updatePreferences,
  hasUserMadeChoice,
  isConsentExpired,
  onConsentAccepted,
  onConsentDenied,
  onCategoryAccepted,
  onScriptsInjected,
  onScriptsRemoved
} = useCookieConsent();
```

### Properties
- **preferences** (Ref<Record<string, boolean>>) - Reactive object holding the user's cookie preferences for each category.
- **categories** (string[]) - An array of all available cookie category names.
- **categoryMeta** (Record<string, CookieConsentCategory>) - An object containing metadata for each cookie category.
- **hasUserMadeChoice** (ComputedRef<boolean>) - A computed property that is true if the user has made a choice regarding consent.
- **isConsentExpired** (ComputedRef<boolean>) - A computed property that is true if the user's consent has expired.

### Methods
- **acceptAll** - () => void - Accepts all available cookie categories.
- **denyAll** - () => void - Denies all available cookie categories.
- **acceptCategories** - (categories: string[]) => void - Accepts a specific list of cookie categories.
- **updatePreferences** - (prefs: Record<string, boolean>) => void - Updates the user's preferences with a new set of category states.
- **onConsentAccepted** - (cb: () => void) => void - Registers a callback function to be executed when the user accepts consent.
- **onConsentDenied** - (cb: () => void) => void - Registers a callback function to be executed when the user denies consent.
- **onCategoryAccepted** - (cb: (cat: string) => void) => void - Registers a callback function to be executed when a specific category is accepted.
- **onScriptsInjected** - (cb: (cat: string) => void) => void - Registers a callback function to be executed after scripts for a category are injected.
- **onScriptsRemoved** - (cb: (cat: string) => void) => void - Registers a callback function to be executed after scripts for a category are removed.
```

--------------------------------

### Utility Functions

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/MANIFEST.md

Utility functions for managing script injection, removal, and Google Tag Manager consent integration.

```APIDOC
## Utility Functions

### `injectScripts(scripts: Array<Object>)`

#### Description
Injects an array of script objects into the DOM. Each script object should contain details like URL, attributes, and placement.

#### Parameters
- **`scripts`** (Array<Object>) - An array of script objects to inject. Each object may include `src`, `async`, `defer`, `id`, `type`, `data-gtm-ignore` etc.

#### Behavior
- Creates `<script>` or `<link>` elements.
- Appends them to the document's `<head>` or `<body>`.
- Handles script loading and error states.

### `removeScripts(scriptIds: Array<string>)`

#### Description
Removes scripts from the DOM based on their IDs. This is useful for cleaning up or dynamically managing scripts.

#### Parameters
- **`scriptIds`** (Array<string>) - An array of script element IDs to remove.

#### Behavior
- Finds script elements by their IDs and removes them from the DOM.
- Includes special handling to exempt Google Tag Manager scripts from removal if configured.

### `sendConsentToGTM(consentData: Object)`

#### Description
Sends the current consent status and preferences to Google Tag Manager.

#### Parameters
- **`consentData`** (Object) - An object containing consent information, typically structured for GTM's `gtag` consent command.

#### Prerequisites
- Google Tag Manager must be initialized and available in the global scope (`window.gtag`).

### Usage Example (injectScripts)
```javascript
import { injectScripts } from '#imports';

const myScripts = [
  { src: '/js/script1.js', async: true },
  { src: '/js/script2.js', id: 'script-2' }
];

injectScripts(myScripts);
```

### Usage Example (sendConsentToGTM)
```javascript
import { sendConsentToGTM } from '#imports';

// Assuming consentData is structured appropriately for GTM
const consentData = {
  'function': 'consent', 
  'args': [
    'default', 
    {
      'ad_storage': 'granted',
      'analytics_storage': 'granted'
    }
  ]
};

sendConsentToGTM(consentData);
```
```

--------------------------------

### Resetting User Preferences via Composable

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

Programmatically reset user preferences to their default state (all non-required categories denied) using the `resetPreferences` function.

```typescript
const { resetPreferences } = useCookieConsent();
resetPreferences();  // Back to defaults, all non-required categories false
```

--------------------------------

### Accept All Cookies

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/useCookieConsent.md

Call this method when the user clicks an 'Accept All' button to set all categories to accepted. Required categories remain true. Triggers consent events and script injection.

```typescript
const { acceptAll } = useCookieConsent();
const handleAcceptAll = () => {
  acceptAll(); // User clicked "Accept All"
};
```

--------------------------------

### Cookie Options Configuration

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

Specifies the standard options applied to all cookies set by the module, including sameSite, path, maxAge, and expires. These ensure proper cookie handling across the site.

```typescript
{
  sameSite: 'lax',
  path: '/',
  maxAge: expiresInDays * 24 * 60 * 60,  // seconds
  expires: new Date(Date.now() + expiresInDays * 24 * 60 * 60 * 1000) // milliseconds
}
```

--------------------------------

### Minimal Cookie Consent Configuration

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/configuration.md

A minimal configuration requires defining at least essential categories and an empty scripts array.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-simple-cookie-consent'],
  cookieConsent: {
    categories: {
      essential: { label: 'Essential' }
    },
    scripts: []
  }
})
```

--------------------------------

### Checking GTM Availability and Manual Consent Update

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

Verify if the `window.gtag` function is available, indicating that the GTM script has loaded correctly. This snippet also shows how to manually trigger a consent update to test the integration.

```typescript
// Check if GTM loaded
console.log('GTM available:', typeof window.gtag);

// Manually trigger update to test
window.gtag?.('consent', 'update', {
  'analytics_storage': 'granted'
});
```

--------------------------------

### Correctly Importing useCookieConsent

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

Use the auto-imported `useCookieConsent` composable provided by the module, rather than a direct import.

```typescript
// WRONG
import { useCookieConsent } from 'nuxt-simple-cookie-consent';

// RIGHT (auto-imported by module)
const { useCookieConsent } = useNuxt();  // Or just use directly
```

--------------------------------

### useCookieConsent Composable

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/useCookieConsent.md

The main composable for managing cookie consent preferences, categories, and script injection. It returns reactive properties and methods to control and observe consent status.

```APIDOC
## useCookieConsent()

### Description
Provides full control over cookie consent management, including tracking user preferences, persisting consent, auto-injecting scripts, and handling event-based callbacks.

### Signature
```typescript
function useCookieConsent(): {
  preferences: Ref<Record<string, boolean>>
  categories: string[]
  categoryMeta: Record<string, CookieConsentCategory>
  scripts: CookieScript[]
  hasUserMadeChoice: ComputedRef<boolean>
  consentTimestamp: Ref<number | null>
  isConsentExpired: ComputedRef<boolean>
  acceptAll: () => void
  denyAll: () => void
  acceptCategories: (categories: string[]) => void
  updatePreferences: (newPrefs: Record<string, boolean>) => void
  resetPreferences: () => void
  onConsentAccepted: (cb: () => void) => void
  onConsentDenied: (cb: () => void) => void
  onCategoryAccepted: (cb: (category: string) => void) => void
  onScriptsInjected: (cb: (category: string) => void) => void
  onScriptsRemoved: (cb: (category: string) => void) => void
}
```

### Properties

#### `preferences`
- **Type**: `Ref<Record<string, boolean>>`
- **Description**: Reactive object of current consent preferences. Keys are category names, values are boolean. Updated when user changes preferences.

#### `categories`
- **Type**: `string[]`
- **Description**: Array of all category keys defined in config. Read-only.

#### `categoryMeta`
- **Type**: `Record<string, CookieConsentCategory>`
- **Description**: Object containing metadata (label, description, required) for each category. Read-only.

#### `scripts`
- **Type**: `CookieScript[]`
- **Description**: Array of all scripts defined in config. Read-only.

#### `hasUserMadeChoice`
- **Type**: `ComputedRef<boolean>`
- **Description**: Whether user has explicitly chosen preferences (true if any non-required category has been set). Automatically computed.

#### `consentTimestamp`
- **Type**: `Ref<number | null>`
- **Description**: Millisecond timestamp of when consent was last updated. Updates automatically when preferences change.

#### `isConsentExpired`
- **Type**: `ComputedRef<boolean>`
- **Description**: Whether current consent has exceeded the configured expiration time. Automatically computed based on `expiresInDays` config.

### Methods

#### `acceptAll()`

##### Description
Set all categories to accepted (true). Required categories remain true regardless. Triggers `onConsentAccepted` event, injects matching scripts, and persists to cookie.

##### Example
```typescript
const { acceptAll } = useCookieConsent();
acceptAll();
```

#### `denyAll()`

##### Description
Set all non-required categories to denied (false). Required categories stay true. Triggers `onConsentDenied` event, removes scripts for denied categories, and persists to cookie.

##### Example
```typescript
const { denyAll } = useCookieConsent();
denyAll();
```

#### `acceptCategories(categories: string[])`

##### Description
Accept specific categories by name. Categories not in the array are denied. Required categories are always kept true.

##### Parameters
- **categories** (`string[]`) - Array of category names to accept (e.g., `['analytics', 'ads']`)

##### Example
```typescript
const { acceptCategories } = useCookieConsent();
acceptCategories(['analytics']);
```

#### `updatePreferences(newPrefs: Record<string, boolean>)`

##### Description
Directly set preferences as an object. Respects required categories (always true). Triggers script injection/removal, GTM consent update if configured, and persists to cookie with timestamp and version.

##### Parameters
- **newPrefs** (`Record<string, boolean>`) - Object where keys are category names and values are boolean preferences

##### Example
```typescript
const { updatePreferences } = useCookieConsent();
updatePreferences({
  analytics: true,
  ads: false,
  functional: true
});
```

#### `resetPreferences()`

##### Description
Reset to default preferences (all non-required categories denied). Equivalent to calling `denyAll()`.

##### Example
```typescript
const { resetPreferences } = useCookieConsent();
resetPreferences();
```

#### `onConsentAccepted(cb: () => void)`

##### Description
Registers a callback function to be executed when consent is accepted (all categories accepted).

#### `onConsentDenied(cb: () => void)`

##### Description
Registers a callback function to be executed when consent is denied (all non-required categories denied).

#### `onCategoryAccepted(cb: (category: string) => void)`

##### Description
Registers a callback function to be executed when a specific category is accepted. The category name is passed as an argument.

#### `onScriptsInjected(cb: (category: string) => void)`

##### Description
Registers a callback function to be executed after scripts for a specific category have been injected.

#### `onScriptsRemoved(cb: (category: string) => void)`

##### Description
Registers a callback function to be executed after scripts for a specific category have been removed.
```

--------------------------------

### Resetting User Preferences

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

Clear and re-prompt the user for consent by resetting preferences. This is useful for resolving hydration mismatches.

```typescript
const { resetPreferences } = useCookieConsent();
resetPreferences();  // Clears and re-prompts
```

--------------------------------

### Register Callback for Consent Denied

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/useCookieConsent.md

Register a callback function that will be executed when the user denies all non-required cookie categories. This occurs when denyAll() or resetPreferences() is called. Use this to clean up or disable services.

```typescript
const { onConsentDenied } = useCookieConsent();
onConsentDenied(() => {
  console.log('User denied all non-required cookies');
});
```

--------------------------------

### Event Listeners

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

Functions to register callbacks for various cookie consent events.

```APIDOC
## Event Functions

### `onConsentAccepted(cb)`

#### Description
Registers a callback function to be executed when the user accepts all consent categories.

#### Parameters
- `cb` (function) - The callback function to execute.

### `onConsentDenied(cb)`

#### Description
Registers a callback function to be executed when the user denies all consent categories.

#### Parameters
- `cb` (function) - The callback function to execute.

### `onCategoryAccepted(cb)`

#### Description
Registers a callback function to be executed when a specific consent category is accepted.

#### Parameters
- `cb` (function) - The callback function to execute. It receives the accepted category name as an argument.

### `onScriptsInjected(cb)`

#### Description
Registers a callback function to be executed after scripts have been injected.

#### Parameters
- `cb` (function) - The callback function to execute.

### `onScriptsRemoved(cb)`

#### Description
Registers a callback function to be executed after scripts have been removed.

#### Parameters
- `cb` (function) - The callback function to execute.

### `onCookieConsentEvent(cb)`

#### Description
Registers a callback function to be executed for all cookie consent-related events.

#### Parameters
- `cb` (function) - The callback function to execute. It receives an event object detailing the event.
```

--------------------------------

### Nuxt Configuration

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Configure the cookie consent module by adding its options to your nuxt.config.ts file. This is the primary way to set up the module for your application.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  cookieConsent: { /* options */ }
})
```

--------------------------------

### Register Callback for Consent Accepted

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/useCookieConsent.md

Register a callback function that will be executed when the user accepts all cookie categories using the acceptAll() method. This is useful for initializing services that depend on user consent.

```typescript
const { onConsentAccepted } = useCookieConsent();
onConsentAccepted(() => {
  console.log('User accepted all cookies');
  // Initialize analytics, ads, etc.
});
```

--------------------------------

### Import Specific Type Export (ModuleOptions)

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/types.md

Import the ModuleOptions type for defining configuration objects. This is useful for specific configuration tasks.

```typescript
import type { ModuleOptions } from 'nuxt-simple-cookie-consent';

const myConfig: ModuleOptions = {
  // ...
};
```

--------------------------------

### Using useCookieConsent on Client-Side

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

The `useCookieConsent` composable can only be used in client-side plugins or components due to its reliance on browser context.

```typescript
// WRONG - server doesn't have composables context
export default defineNuxtPlugin(async () => {
  const consent = useCookieConsent();  // Server doesn't work
});

// RIGHT - use client plugin
export default defineNuxtPlugin(async () => {
  if (import.meta.client) {
    const consent = useCookieConsent();
  }
});
```

--------------------------------

### Registering the Cookie Consent Module

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

Ensure the `nuxt-simple-cookie-consent` module is correctly registered in your `nuxt.config.ts` file.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-simple-cookie-consent']  // Must add
})
```

--------------------------------

### onConsentAccepted

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/useCookieConsent.md

Registers a callback function that is executed when the user accepts all cookie categories using the `acceptAll()` method.

```APIDOC
## onConsentAccepted

### Description
Registers a callback function that is executed when the user accepts all cookie categories.

### Signature
```typescript
onConsentAccepted(cb: () => void): void
```

### Parameters
#### Callback Function (`cb`)
- **cb** (`() => void`) - Required - The function to be called when consent is accepted.
```

--------------------------------

### Enabling Debug Logging

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/errors.md

Enable `debug: true` in your configuration to view internal module state and troubleshoot issues. This is crucial for diagnosing configuration problems and script injection behaviors.

```typescript
cookieConsent: {
  debug: true
}
```

--------------------------------

### useCookieConsent Composable

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

The main composable for managing cookie consent. It provides access to consent state, preferences, and functions to update them.

```APIDOC
## useCookieConsent()

### Description
Provides access to the cookie consent state, including categories, user preferences, and functions to manage consent.

### Usage
```typescript
import { useCookieConsent } from 'nuxt-simple-cookie-consent';

const { 
  categories, 
  categoryMeta, 
  preferences, 
  hasUserMadeChoice, 
  acceptAll, 
  denyAll, 
  updatePreferences 
} = useCookieConsent();
```

### Returns
An object containing:
- `categories`: Reactive object of available consent categories.
- `categoryMeta`: Reactive object with metadata for each category.
- `preferences`: Reactive object representing the user's current consent preferences.
- `hasUserMadeChoice`: Boolean indicating if the user has made a choice.
- `acceptAll`: Function to accept all consent categories.
- `denyAll`: Function to deny all consent categories.
- `updatePreferences`: Function to update user preferences with a new set of choices.
```

--------------------------------

### Event Listeners

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/index.md

Import and use event listener functions to react to consent lifecycle hooks. These functions allow you to perform actions when consent is accepted, categories are accepted, or scripts are injected.

```javascript
import {
  onConsentAccepted,
  onCategoryAccepted,
  onScriptsInjected
} from 'nuxt-simple-cookie-consent';
```

--------------------------------

### onCategoryAccepted

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/events.md

Registers a listener that is triggered when a specific cookie category is accepted.

```APIDOC
## onCategoryAccepted

### Description
Listens for when any specific category is accepted. Fires once per category for each acceptance event. This function is a convenience wrapper around `onCookieConsentEvent`.

### Signature
```typescript
function onCategoryAccepted(cb: (category: string) => void): void
```

### Parameters
#### cb
- **Type**: `(category: string) => void`
- **Description**: Callback function receiving the name of the accepted category.

### Fires when
- User calls `acceptCategories()` with the category.
- User calls `updatePreferences()` with the category set to true.
- Only fires for categories that are newly accepted or explicitly set to true.

### Example
```typescript
import { onCategoryAccepted } from 'nuxt-simple-cookie-consent';

onCategoryAccepted((category) => {
  if (category === 'analytics') {
    // Initialize Google Analytics
    window.dataLayer = window.dataLayer || [];
    gtag('config', 'GA_ID');
  }
  if (category === 'ads') {
    // Initialize ads platform
    fbq('init', 'FB_PIXEL_ID');
  }
});
```
```

--------------------------------

### Event Listeners

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/README.md

Functions to register callbacks for various cookie consent events, allowing you to react to user interactions and module lifecycle changes.

```APIDOC
## Event Listener Functions

### Description
These functions allow you to subscribe to specific events emitted by the cookie consent module, enabling custom logic to run when certain actions occur.

### `onConsentAccepted`

#### Description
Registers a callback function that will be executed when the user accepts all cookie consent.

#### Signature
```typescript
onConsentAccepted(cb: () => void): void
```

### `onConsentDenied`

#### Description
Registers a callback function that will be executed when the user denies all cookie consent.

#### Signature
```typescript
onConsentDenied(cb: () => void): void
```

### `onCategoryAccepted`

#### Description
Registers a callback function that will be executed when the user accepts one or more specific cookie categories.

#### Signature
```typescript
onCategoryAccepted(cb: (cat: string) => void): void
```

### `onScriptsInjected`

#### Description
Registers a callback function that will be executed after the scripts associated with a specific cookie category have been injected into the DOM.

#### Signature
```typescript
onScriptsInjected(cb: (cat: string) => void): void
```

### `onScriptsRemoved`

#### Description
Registers a callback function that will be executed after the scripts associated with a specific cookie category have been removed from the DOM.

#### Signature
```typescript
onScriptsRemoved(cb: (cat: string) => void): void
```
```

--------------------------------

### Standalone Import: Listen for Consent Accepted and Scripts Injected

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/events.md

For standalone usage, import event listeners like `onConsentAccepted` and `onScriptsInjected` directly from the library. This allows for setting up global event handlers outside of Nuxt's specific plugin or composable structures.

```typescript
import { onConsentAccepted, onScriptsInjected } from 'nuxt-simple-cookie-consent';

onConsentAccepted(() => {
  console.log('Full consent');
});

onScriptsInjected((cat) => {
  console.log(`${cat} injected`);
});
```

--------------------------------

### DOM Structure for Injected Scripts

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/architecture.md

Illustrates the HTML structure created by the `injectScripts` function for main scripts, inline scripts, and custom HTML content, each identified by a unique ID and data attributes.

```html
<!-- Main script -->
<script id="cookie-script-{id}" data-type="gdpr" data-categories="...">

<!-- Inline script (if customContent) -->
<script id="cookie-script-inline-{id}" data-type="gdpr">

<!-- Custom HTML (if customHTML) -->
<div id="cookie-html-{id}" data-type="gdpr">
```

--------------------------------

### Listening for Specific Category Acceptance

Source: https://github.com/criting/nuxt-simple-cookie-consent/blob/master/_autodocs/api-reference/events.md

Listen for when a particular cookie category is accepted by the user. The callback receives the name of the accepted category, allowing for granular initialization of services.

```typescript
import { onCategoryAccepted } from 'nuxt-simple-cookie-consent';

onCategoryAccepted((category) => {
  if (category === 'analytics') {
    // Initialize Google Analytics
    window.dataLayer = window.dataLayer || [];
    gtag('config', 'GA_ID');
  }
  if (category === 'ads') {
    // Initialize ads platform
    fbq('init', 'FB_PIXEL_ID');
  }
});
```