{"_id":"@adkit/meta-pixel-nuxt","_rev":"3-69d8e3563e206450a3ac806a9267e043","name":"@adkit/meta-pixel-nuxt","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.0":{"name":"@adkit/meta-pixel-nuxt","version":"1.1.0","license":"MIT","_id":"@adkit/meta-pixel-nuxt@1.1.0","maintainers":[{"name":"jeannen","email":"nicolas@jeannen.com"}],"homepage":"https://github.com/adkit/ads-tracking#readme","bugs":{"url":"https://github.com/adkit/ads-tracking/issues"},"dist":{"shasum":"b9570cd7689c3da08f14db4f9f31b2b6e7bd0b23","tarball":"https://registry.npmjs.org/@adkit/meta-pixel-nuxt/-/meta-pixel-nuxt-1.1.0.tgz","fileCount":11,"integrity":"sha512-J52upekU0WXpUQFoT6NtI7eAL131JOngHfoTwFKEq9sf7mIzuSCTXTgDNJbxSeGjxIhJWFkPv+URqszBHOUStw==","signatures":[{"sig":"MEUCIFoc1V9+m5K2hV+43+YswS38Mq3/xDLVKWacfmyk7z6VAiEA9FnZkTFhRdHXbmwRLheJBepA1vc/on1gQEZ3sMCPwio=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31281},"main":"./dist/module.mjs","type":"module","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"scripts":{"dev":"npm run dev:prepare && nuxi dev playground --port 3333","lint":"eslint .","test":"npm run test:unit","build":"nuxt-module-build build","prepack":"nuxt-module-build build","test:ui":"playwright test --config test/playwright.config.ts --ui","test:e2e":"playwright test --config test/playwright.config.ts","dev:build":"nuxi build playground","test:unit":"vitest run --config test/vitest.config.ts","typecheck":"vue-tsc --noEmit","test:types":"vue-tsc --noEmit && cd playground && vue-tsc --noEmit","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground","test:unit:watch":"vitest watch --config test/vitest.config.ts"},"_npmUser":{"name":"jeannen","email":"nicolas@jeannen.com"},"repository":{"url":"git+https://github.com/adkit/ads-tracking.git","type":"git","directory":"packages/meta-pixel-nuxt"},"_npmVersion":"11.4.2","description":"Nuxt 3 & 4 module for Meta Pixel tracking, built on top of @adkit/meta-pixel","directories":{},"_nodeVersion":"23.7.0","dependencies":{"@nuxt/kit":"^4.2.1","@adkit/meta-pixel":"^1.2.0"},"publishConfig":{"access":"public"},"typesVersions":{"*":{".":["./dist/types.d.mts"]}},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^4.2.1","eslint":"^9.39.1","vitest":"^3.2.0","vue-tsc":"^3.1.4","typescript":"~5.9.3","@types/node":"latest","@nuxt/schema":"^4.2.1","playwright-core":"^1.56.1","@nuxt/test-utils":"^3.20.1","@playwright/test":"^1.56.1","@nuxt/eslint-config":"^1.10.0","@nuxt/module-builder":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/meta-pixel-nuxt_1.1.0_1785327344813_0.6999555604449099","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@adkit/meta-pixel-nuxt","version":"1.1.1","license":"MIT","_id":"@adkit/meta-pixel-nuxt@1.1.1","maintainers":[{"name":"jeannen","email":"nicolas@jeannen.com"}],"homepage":"https://github.com/adkit/ads-tracking#readme","bugs":{"url":"https://github.com/adkit/ads-tracking/issues"},"dist":{"shasum":"30d1d75fc7eefe6f8088b0694cc551d602934cb1","tarball":"https://registry.npmjs.org/@adkit/meta-pixel-nuxt/-/meta-pixel-nuxt-1.1.1.tgz","fileCount":11,"integrity":"sha512-Rc/nCPcXX1x5GzK/P3pDImY9/3rZtBrlLr3l6+OBirs04dDC1xcVHh+80O23erFEh4Kct6nnrCBMxpLtTVmTKQ==","signatures":[{"sig":"MEUCIFFq6xFjI58VR53E+No5TV1Mvc6A0WUWVkOwH1yPfzHmAiEAjTkpgUXfd2j59WFMBKtRagsHuFZX+t8loLynzV5rGpQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31281},"main":"./dist/module.mjs","type":"module","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"29c938569d7399ae6110f022e737c4aeaaa3fcae","scripts":{"dev":"npm run dev:prepare && nuxi dev playground --port 3333","lint":"eslint .","test":"npm run test:unit","build":"nuxt-module-build build","prepack":"nuxt-module-build build","test:ui":"playwright test --config test/playwright.config.ts --ui","test:e2e":"playwright test --config test/playwright.config.ts","dev:build":"nuxi build playground","test:unit":"vitest run --config test/vitest.config.ts","typecheck":"vue-tsc --noEmit","test:types":"vue-tsc --noEmit && cd playground && vue-tsc --noEmit","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground","test:unit:watch":"vitest watch --config test/vitest.config.ts"},"_npmUser":{"name":"jeannen","email":"nicolas@jeannen.com"},"repository":{"url":"git+https://github.com/adkit/ads-tracking.git","type":"git","directory":"packages/nuxt/meta-pixel"},"_npmVersion":"11.4.2","description":"Nuxt 3 & 4 module for Meta Pixel tracking, built on top of @adkit/meta-pixel","directories":{},"_nodeVersion":"23.7.0","dependencies":{"@nuxt/kit":"^4.2.1","@adkit/meta-pixel":"^1.2.1"},"publishConfig":{"access":"public"},"typesVersions":{"*":{".":["./dist/types.d.mts"]}},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^4.2.1","eslint":"^9.39.1","vitest":"^3.2.0","vue-tsc":"^3.1.4","typescript":"~5.9.3","@types/node":"latest","@nuxt/schema":"^4.2.1","playwright-core":"^1.56.1","@nuxt/test-utils":"^3.20.1","@playwright/test":"^1.56.1","@nuxt/eslint-config":"^1.10.0","@nuxt/module-builder":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/meta-pixel-nuxt_1.1.1_1785328854467_0.8811482513659703","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@adkit/meta-pixel-nuxt","version":"1.1.2","description":"Meta (Facebook) Pixel module for Nuxt 3 and 4. Auto-imported composable, per-route tracking control, and lazy script loading.","homepage":"https://adkit.so","keywords":["meta-pixel","facebook-pixel","nuxt-facebook-pixel","meta","facebook","pixel","conversion-tracking","tracking","analytics","nuxt","nuxt-module","typescript"],"repository":{"type":"git","url":"git+https://github.com/adkit/conversion-tracking.git","directory":"packages/nuxt/meta-pixel"},"license":"MIT","type":"module","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"main":"./dist/module.mjs","typesVersions":{"*":{".":["./dist/types.d.mts"]}},"scripts":{"build":"nuxt-module-build build","typecheck":"vue-tsc --noEmit","prepack":"nuxt-module-build build","dev":"npm run dev:prepare && nuxi dev playground --port 3333","dev:build":"nuxi build playground","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground","lint":"eslint .","test":"npm run test:unit","test:e2e":"playwright test --config test/playwright.config.ts","test:ui":"playwright test --config test/playwright.config.ts --ui","test:unit":"vitest run --config test/vitest.config.ts","test:unit:watch":"vitest watch --config test/vitest.config.ts","test:types":"vue-tsc --noEmit && cd playground && vue-tsc --noEmit"},"dependencies":{"@adkit/meta-pixel":"^1.2.1","@nuxt/kit":"^4.2.1"},"devDependencies":{"@nuxt/eslint-config":"^1.10.0","@nuxt/module-builder":"^1.0.2","@nuxt/schema":"^4.2.1","@nuxt/test-utils":"^3.20.1","@playwright/test":"^1.56.1","@types/node":"latest","eslint":"^9.39.1","nuxt":"^4.2.1","playwright-core":"^1.56.1","typescript":"~5.9.3","vitest":"^3.2.0","vue-tsc":"^3.1.4"},"publishConfig":{"access":"public"},"_id":"@adkit/meta-pixel-nuxt@1.1.2","gitHead":"9088428717b71e58ed944f993ca21544bd7af84b","bugs":{"url":"https://github.com/adkit/conversion-tracking/issues"},"_nodeVersion":"23.7.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-lzuUoDDYScEJ0XeVBFN9C+OczJYkyQDcW5yKgw2V5adoYwKmFfH++HmOFh/uK/Tyat1iCWfvDvmfjGhUI30bDA==","shasum":"3d390d7999cfbb9b17c6a0f27cce213752bcd2b9","tarball":"https://registry.npmjs.org/@adkit/meta-pixel-nuxt/-/meta-pixel-nuxt-1.1.2.tgz","fileCount":11,"unpackedSize":32120,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGmh8rJQTIofx2UOP3ZX5IoG0JPNFgto6BV0fC6GE1s6AiAWGxFhPQKnrIcWBt5U92ImFtZs76htgwp7Z+01Ew/CtA=="}]},"_npmUser":{"name":"jeannen","email":"nicolas@jeannen.com"},"directories":{},"maintainers":[{"name":"jeannen","email":"nicolas@jeannen.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/meta-pixel-nuxt_1.1.2_1785384168649_0.12748355680365298"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-29T12:15:44.636Z","modified":"2026-07-30T04:02:48.966Z","1.1.0":"2026-07-29T12:15:44.942Z","1.1.1":"2026-07-29T12:40:54.615Z","1.1.2":"2026-07-30T04:02:48.790Z"},"bugs":{"url":"https://github.com/adkit/conversion-tracking/issues"},"license":"MIT","homepage":"https://adkit.so","repository":{"type":"git","url":"git+https://github.com/adkit/conversion-tracking.git","directory":"packages/nuxt/meta-pixel"},"description":"Meta (Facebook) Pixel module for Nuxt 3 and 4. Auto-imported composable, per-route tracking control, and lazy script loading.","maintainers":[{"name":"jeannen","email":"nicolas@jeannen.com"}],"readme":"# Meta (Facebook) Pixel for Nuxt\n\nAdd the Meta Pixel to your Nuxt 3 or 4 app with one module and an auto-imported `useMetaPixel()` composable. Type-safe events, per-route tracking control, event deduplication for the Conversions API, and lazy script loading that keeps fbevents.js off your critical path.\n\n[![npm version](https://img.shields.io/npm/v/@adkit/meta-pixel-nuxt.svg)](https://www.npmjs.com/package/@adkit/meta-pixel-nuxt)\n[![npm downloads](https://img.shields.io/npm/dm/@adkit/meta-pixel-nuxt.svg)](https://www.npmjs.com/package/@adkit/meta-pixel-nuxt)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nBuilt on [@adkit/meta-pixel](https://www.npmjs.com/package/@adkit/meta-pixel), the framework-independent core.\n\n## 📚 Table of Contents\n\n-   [Features](#-features)\n-   [Quick Start](#-quick-start)\n-   [Installation](#-installation)\n-   [Configuration](#%EF%B8%8F-configuration)\n-   [Usage](#-usage)\n-   [Route Control](#-route-control)\n-   [Standard Events](#-standard-events)\n-   [Advanced Usage](#-advanced-usage)\n-   [Troubleshooting](#-troubleshooting)\n-   [Official Documentation](#-official-documentation)\n-   [License](#-license)\n\n## ✨ Features\n\n-   ✅ **Typescript Support** - Full TypeScript support with autocomplete for all official events and parameters\n-   🎨 **Auto-imported Composable** - `useMetaPixel()` available everywhere, zero boilerplate\n-   🎯 **Custom Events Support** - Track custom events with full type safety and flexible data structures\n-   🛣️ **Advanced Route Control** - Granular control on where to enable or disable tracking\n-   🚦 **Event Deduplication** - Support for preventing duplicate events with event IDs\n-   🔌 **Multiple Pixels Support** - Load and manage multiple pixel IDs effortlessly\n-   ⏱️ **Flexible Loading** - Download Meta eagerly, lazily, or on a host-controlled schedule\n\n## ⚡ Quick Start\n\n```bash\nnpx nuxi@latest module add @adkit/meta-pixel-nuxt\n```\n\nOR\n\n```bash\nnpm install @adkit/meta-pixel-nuxt\n```\n\n```typescript\nexport default defineNuxtConfig({\n    modules: ['@adkit/meta-pixel-nuxt'],\n    metaPixel: {\n        pixelIds: 'YOUR_PIXEL_ID',\n    },\n});\n```\n\n```vue\n<template>\n    <button @click=\"handlePurchase\">Complete Purchase</button>\n</template>\n\n<script setup>\n    const meta = useMetaPixel();\n\n    const handlePurchase = () => {\n        meta.track('Purchase', {\n            value: 99.99,\n            currency: 'USD',\n        });\n    };\n</script>\n```\n\nThat's it! 🎉\n\n## 📦 Installation\n\n```bash\nnpx nuxi@latest module add @adkit/meta-pixel-nuxt\n```\n\n```bash\nnpm install @adkit/meta-pixel-nuxt\n```\n\n## ⚙️ Configuration\n\n### Basic Setup\n\nAdd the module to your `nuxt.config.ts`:\n\n```typescript\nexport default defineNuxtConfig({\n    modules: ['@adkit/meta-pixel-nuxt'],\n\n    metaPixel: {\n        pixelIds: 'YOUR_PIXEL_ID', // or array ['PIXEL_1', 'PIXEL_2']\n        autoTrackPageView: true, // default: true\n        debug: true, // Enable debug logs (default: false)\n        enableLocalhost: true, // Enable on localhost (default: false)\n        loadMode: 'lazy', // 'eager' (default), 'lazy', or 'manual'\n    },\n});\n```\n\n### Configuration Options\n\n| Option              | Type                 | Default | Description                                                             |\n| ------------------- | -------------------- | ------- | ----------------------------------------------------------------------- |\n| `pixelIds`          | `string \\| string[]` | `''`    | **Required.** Single pixel ID or array of pixel IDs                     |\n| `autoTrackPageView` | `boolean`            | `true`  | Automatically track PageView on initialization                          |\n| `debug`             | `boolean`            | `false` | Enable styled console logs with background colors                       |\n| `enableLocalhost`   | `boolean`            | `false` | Enable tracking on localhost (useful for testing)                       |\n| `loadMode`          | `'eager' \\| 'lazy' \\| 'manual'` | `'eager'` | Choose when to download `fbevents.js`                                   |\n| `excludedRoutes`    | `string[]`           | `[]`    | Array of glob patterns to exclude from tracking (e.g., `/dashboard/**`) |\n| `includedRoutes`    | `string[]`           | `[]`    | Array of glob patterns to whitelist (only these routes will be tracked) |\n\n### Loading Modes\n\n-   `eager` downloads `fbevents.js` when the first allowed route initializes Meta. This remains the default.\n-   `lazy` starts Meta's queue immediately, then downloads `fbevents.js` after the page has loaded and the browser has an idle opportunity.\n-   `manual` starts the queue immediately but leaves the download to your application.\n\n```typescript\nexport default defineNuxtConfig({\n    modules: ['@adkit/meta-pixel-nuxt'],\n    metaPixel: {\n        pixelIds: 'YOUR_PIXEL_ID',\n        loadMode: 'manual',\n    },\n});\n```\n\n```vue\n<script setup>\nconst meta = useMetaPixel();\n\n// Events queue until the host's vendor schedule starts Meta.\nmeta.track('Lead', {}, { eventID: 'lead-123' });\nmeta.load();\n</script>\n```\n\n### Multiple Pixels Example\n\n```typescript\n// nuxt.config.ts\nexport default defineNuxtConfig({\n    metaPixel: {\n        pixelIds: ['PIXEL_ID_1', 'PIXEL_ID_2', 'PIXEL_ID_3'],\n        autoTrackPageView: true,\n    },\n});\n```\n\n## 💡 Usage\n\nThe `useMetaPixel()` composable is auto-imported and ready to use anywhere in your Nuxt app. It provides direct access to the Meta Pixel instance with all methods from `@adkit/meta-pixel`.\n\n### Basic Usage\n\n```vue\n<!-- index.vue -->\n<template>\n    <button @click=\"meta.track('AddToCart', { value: 29.99, currency: 'USD' })\">Add to Cart</button>\n</template>\n\n<script setup>\n    const meta = useMetaPixel();\n\n    // Track standard events\n    meta.track('Purchase', {\n        value: 99.99,\n        currency: 'USD',\n        content_ids: ['SKU_123'],\n    });\n\n    // Track custom events\n    meta.trackCustom('MyCustomEvent', {\n        custom_param: 'value',\n    });\n</script>\n```\n\n### With Event Deduplication\n\n```vue\n<!-- index.vue -->\n<template>\n    <button @click=\"handleCheckout\">Checkout</button>\n</template>\n\n<script setup>\n    const meta = useMetaPixel();\n\n    const handleCheckout = () => {\n        meta.track(\n            'InitiateCheckout',\n            {\n                value: 149.99,\n                currency: 'USD',\n                num_items: 3,\n            },\n            {\n                eventID: `checkout-${Date.now()}`,\n            },\n        );\n    };\n</script>\n```\n\n### Check if the Pixel Queue Is Ready\n\n```vue\n<!-- index.vue -->\n<template>\n    <button @click=\"trackIfReady\">Track Purchase</button>\n</template>\n\n<script setup>\n    const meta = useMetaPixel();\n\n    const trackIfReady = () => {\n        if (meta.isLoaded()) {\n            meta.track('Purchase', { value: 99.99, currency: 'USD' });\n        }\n    };\n</script>\n```\n\nIn lazy and manual modes, `isLoaded()` reports that Meta's public queue is ready even before `fbevents.js` is downloaded.\n\n## 🛣️ Route Control\n\nYou can control where the pixel is loaded using three methods:\n\n### 1. Exclude Routes (Global)\n\nIn `nuxt.config.ts`, provide an array of glob patterns to exclude specific routes:\n\n```typescript\n// nuxt.config.ts\nexport default defineNuxtConfig({\n    metaPixel: {\n        pixelIds: '...',\n\n        excludedRoutes: [\n            '/dashboard/*', // Excludes /dashboard/inbox, /dashboard/settings (one level)\n            '/dashboard/**', // Excludes /dashboard and ALL nested routes (any depth)\n            '/admin/**', // Excludes /admin and all nested routes\n            '/api/*', // Excludes /api/users, /api/posts (one level only)\n        ],\n    },\n});\n```\n\n**Pattern Syntax:**\n\n-   `*` - Matches any characters except `/` (single path segment)\n-   `**` - Matches any characters including `/` (multiple path segments, any depth)\n\n**Examples:**\n\n-   `/dashboard/*` → Excludes `/dashboard/inbox` but NOT `/dashboard/inbox/messages`\n-   `/dashboard/**` → Excludes `/dashboard`, `/dashboard/inbox`, `/dashboard/inbox/messages`, etc. (any depth)\n-   `/api/*` → Excludes `/api/users` but NOT `/api/users/123`\n\n### 2. Include Routes (Global)\n\nIf you only want to track specific sections, use `includedRoutes`. This takes precedence over excluded routes (except for page-level overrides).\n\n```typescript\n// nuxt.config.ts\nexport default defineNuxtConfig({\n    metaPixel: {\n        pixelIds: '...',\n\n        includedRoutes: [\n            '/shop/**', // Track all shop pages (any depth)\n            '/checkout/**', // Track all checkout pages (any depth)\n            '/product/*', // Track product pages (one level only)\n        ],\n    },\n});\n```\n\n### 3. Page-Level Control\n\nYou can enable or disable the pixel on a per-page basis using `definePageMeta`:\n\n```vue\n<template>\n    <div>Secret page - no tracking here</div>\n</template>\n\n<script setup>\n    definePageMeta({\n        metaPixel: false,\n    });\n</script>\n```\n\n**Priority Order:**\n\n1. Page-level `definePageMeta` (highest priority)\n2. `includedRoutes` (if set, only these are tracked)\n3. `excludedRoutes` (if set, these are ignored)\n4. Default: Track everything\n\n## 🌍 Environment Variables\n\nYou can configure pixel IDs via environment variables instead of hardcoding them in `nuxt.config.ts`. This is especially useful for different environments (dev, staging, production).\n\n```bash\n# .env\nMETA_PIXEL_ID=123456789012345\n```\n\nThen reference it in your config:\n\n```typescript\n// nuxt.config.ts\nexport default defineNuxtConfig({\n    metaPixel: {\n        pixelIds: process.env.META_PIXEL_ID || '',\n    },\n});\n```\n\n### Multiple Pixels via Environment Variables\n\n```bash\n# .env\nMETA_PIXEL_DEFAULT=123456789012345\nMETA_PIXEL_BACKUP=987654321098765\n```\n\n```typescript\nexport default defineNuxtConfig({\n    metaPixel: {\n        pixelIds: [process.env.META_PIXEL_DEFAULT, process.env.META_PIXEL_BACKUP],\n    },\n});\n```\n\n## 🐛 Debug Mode\n\nWhen `debug: true`, you'll see beautiful styled console logs:\n\n-   🔵 **[Meta Pixel]** Info messages (blue background)\n-   ✅ **[Meta Pixel]** Success messages (green background)\n-   ⚠️ **[Meta Pixel]** Warning messages (orange background)\n\nExample output:\n\n```\n[Meta Pixel] Initializing Meta Pixel... { pixelIds: [...], autoTrackPageView: true }\n[Meta Pixel] ✓ Meta Pixel initialized successfully\n[Meta Pixel] Tracking standard event: \"Purchase\" { data: {...}, eventData: {...} }\n```\n\n## 📊 Standard Events\n\nAll Meta Pixel standard events are supported with full TypeScript autocomplete. These events help you track important actions on your website and optimize your ad campaigns.\n\n| Event                  | Description                   | Common Use Cases              |\n| ---------------------- | ----------------------------- | ----------------------------- |\n| `AddPaymentInfo`       | Payment info added            | Checkout flow                 |\n| `AddToCart`            | Item added to shopping cart   | E-commerce                    |\n| `AddToWishlist`        | Item added to wishlist        | E-commerce                    |\n| `CompleteRegistration` | User completed registration   | Sign-ups, account creation    |\n| `Contact`              | User contacted business       | Contact forms                 |\n| `CustomizeProduct`     | Product customization started | Product configurators         |\n| `Donate`               | Donation made                 | Non-profits                   |\n| `FindLocation`         | Location finder used          | Store locators                |\n| `InitiateCheckout`     | Checkout process started      | E-commerce funnels            |\n| `Lead`                 | Lead submitted                | Lead generation forms         |\n| `Purchase`             | Purchase completed            | Transaction confirmation      |\n| `Schedule`             | Appointment scheduled         | Booking systems               |\n| `Search`               | Search performed              | Site search                   |\n| `StartTrial`           | Trial started                 | SaaS applications             |\n| `SubmitApplication`    | Application submitted         | Job boards, loan applications |\n| `Subscribe`            | Subscription started          | Newsletters, subscriptions    |\n| `ViewContent`          | Content viewed                | Product pages, blog posts     |\n\nYou can find the official list of standard events [here](https://developers.facebook.com/docs/meta-pixel/reference/#standard-events).\n\n### Example Usage\n\n```vue\n<template>\n    <div>\n        <button @click=\"trackPurchase\">Complete Purchase</button>\n        <button @click=\"trackLead\">Submit Lead</button>\n        <input @input=\"trackSearch($event.target.value)\" placeholder=\"Search...\" />\n    </div>\n</template>\n\n<script setup>\n    const meta = useMetaPixel();\n\n    const trackPurchase = () => {\n        meta.track('Purchase', {\n            value: 299.99,\n            currency: 'USD',\n            content_ids: ['SKU_12345'],\n            content_type: 'product',\n            num_items: 1,\n        });\n    };\n\n    const trackLead = () => {\n        meta.track('Lead', {\n            content_name: 'Newsletter Signup',\n            content_category: 'Marketing',\n        });\n    };\n\n    const trackSearch = (query: string) => {\n        meta.track('Search', {\n            search_string: query,\n        });\n    };\n</script>\n```\n\n## 📋 Event Data Parameters\n\nAll event parameters are optional but help improve ad targeting and conversion tracking. Here are the most common ones:\n\n| Parameter          | Type                    | Description                          | Example                          |\n| ------------------ | ----------------------- | ------------------------------------ | -------------------------------- |\n| `value`            | `number`                | Monetary value of the event          | `99.99`                          |\n| `currency`         | `string`                | ISO 4217 currency code               | `'USD'`, `'EUR'`, `'GBP'`        |\n| `content_ids`      | `string[]`              | Product IDs or SKUs                  | `['SKU_123', 'SKU_456']`         |\n| `content_type`     | `string`                | Type of content                      | `'product'`, `'product_group'`   |\n| `content_name`     | `string`                | Name of page/product                 | `'Blue T-Shirt'`                 |\n| `content_category` | `string`                | Category of page/product             | `'Apparel'`, `'Electronics'`     |\n| `contents`         | `Array<{id, quantity}>` | Detailed product information         | `[{id: 'SKU_123', quantity: 2}]` |\n| `num_items`        | `number`                | Number of items                      | `3`                              |\n| `search_string`    | `string`                | Search query                         | `'running shoes'`                |\n| `status`           | `boolean`               | Registration/subscription status     | `true`                           |\n| `predicted_ltv`    | `number`                | Predicted lifetime value of customer | `450.00`                         |\n\n### Complete E-commerce Example\n\n```vue\n<template>\n    <div>\n        <h1>{{ product.name }}</h1>\n        <p>${{ product.price }}</p>\n        <button @click=\"trackAddToCart\">Add to Cart</button>\n        <button @click=\"trackPurchase('order-123')\">Buy Now</button>\n    </div>\n</template>\n\n<script setup>\n    const meta = useMetaPixel();\n\n    const product = {\n        id: 'SKU_789',\n        name: 'Wireless Headphones',\n        price: 149.99,\n        category: 'Electronics',\n    };\n\n    onMounted(() => {\n        trackProductView();\n    });\n\n    const trackProductView = () => {\n        meta.track('ViewContent', {\n            content_ids: [product.id],\n            content_type: 'product',\n            content_name: product.name,\n            content_category: product.category,\n            value: product.price,\n            currency: 'USD',\n        });\n    };\n\n    const trackAddToCart = () => {\n        meta.track('AddToCart', {\n            content_ids: [product.id],\n            content_type: 'product',\n            content_name: product.name,\n            value: product.price,\n            currency: 'USD',\n        });\n    };\n\n    const trackPurchase = (orderId: string) => {\n        meta.track(\n            'Purchase',\n            {\n                content_ids: [product.id],\n                content_type: 'product',\n                value: product.price,\n                currency: 'USD',\n                num_items: 1,\n            },\n            {\n                eventID: orderId,\n            },\n        );\n    };\n</script>\n```\n\n## 🚀 Advanced Usage\n\n### Custom Events\n\nTrack custom events specific to your business:\n\n```vue\n<template>\n    <div>\n        <button @click=\"trackPricingView\">View Pricing</button>\n        <video @ended=\"trackVideoComplete\">Your video</video>\n    </div>\n</template>\n\n<script setup>\n    const meta = useMetaPixel();\n\n    const trackPricingView = () => {\n        meta.trackCustom('PricingPageViewed', {\n            plan: 'enterprise',\n            duration: 'annual',\n        });\n    };\n\n    const trackVideoComplete = () => {\n        meta.trackCustom('VideoWatched', {\n            video_id: 'intro_2024',\n            watch_percentage: 100,\n        });\n    };\n</script>\n```\n\n### Event Deduplication\n\nPrevent duplicate event tracking by using unique event IDs. This is crucial when tracking conversions from both client and server:\n\n```vue\n<script setup>\n    const meta = useMetaPixel();\n\n    const processOrder = async (orderId: string) => {\n        // Use order ID as event ID to prevent duplicates\n        meta.track(\n            'Purchase',\n            {\n                value: 299.99,\n                currency: 'USD',\n                content_ids: ['SKU_123'],\n            },\n            {\n                eventID: `order-${orderId}`,\n            },\n        );\n\n        // Even if this fires multiple times or from server too,\n        // Meta will deduplicate based on eventID\n    };\n</script>\n```\n\n### Conditional Tracking\n\n```vue\n<script setup>\n    const meta = useMetaPixel();\n    const userStore = useUserStore();\n\n    const trackWithUserContext = () => {\n        // Only track if pixel is loaded\n        if (!meta.isLoaded()) {\n            console.warn('Meta Pixel not loaded yet');\n            return;\n        }\n\n        // Add user context to events\n        meta.track('CompleteRegistration', {\n            status: true,\n            content_name: userStore.accountType,\n        });\n    };\n</script>\n```\n\n## 📝 TypeScript Support\n\nFull type safety with exported types:\n\n```typescript\nimport type { StandardEvent, EventData, EventMetaData } from '@adkit/meta-pixel';\n\nconst meta = useMetaPixel();\n\nconst trackEvent = (event: StandardEvent, data: EventData) => {\n    meta.track(event, data);\n};\n```\n\nAll methods, events, and parameters have complete TypeScript definitions with IntelliSense support in your IDE.\n\n## ❓ Troubleshooting\n\n### Does the Facebook Pixel slow down my Nuxt app?\n\nfbevents.js is loaded `async`, so it doesn't block HTML parsing. To keep the download out of your Core Web Vitals window entirely, set `loadMode: 'lazy'` in the module options: the event queue is created immediately, but the script only downloads after the page `load` event, at the browser's next idle moment. Events fired in the meantime are queued and sent once the script arrives.\n\n### Pixel not loading?\n\n1. **Check your pixel ID** - Make sure it's correct in your config\n2. **Enable debug mode** - Set `debug: true` to see detailed logs\n3. **Check browser console** - Look for errors or warnings\n4. **Verify route isn't excluded** - Check your `excludedRoutes` config\n5. **Enable on localhost** - Set `enableLocalhost: true` for local testing\n\n### Route exclusion not working?\n\nIf your routes aren't being excluded properly:\n\n1. **Use glob patterns** - For most cases, glob patterns are easier:\n\n    ```typescript\n    excludedRoutes: ['/dashboard/**']; // ✅ Correct - excludes all dashboard routes\n    ```\n\n2. **Common mistakes to avoid**:\n\n    ```typescript\n    // ❌ Wrong - missing leading slash\n    excludedRoutes: ['dashboard/**'];\n\n    // ✅ Correct - with leading slash\n    excludedRoutes: ['/dashboard/**'];\n    ```\n\n3. **Enable debug mode** to see which routes are being excluded:\n\n    ```typescript\n    metaPixel: {\n        debug: true,  // Will log \"Route excluded: /dashboard/inbox\"\n        excludedRoutes: ['/dashboard/**'],\n    }\n    ```\n\n4. **Pattern examples**:\n    - `/dashboard/*` - Excludes `/dashboard/inbox` but NOT `/dashboard/inbox/messages`\n    - `/dashboard/**` - Excludes `/dashboard`, `/dashboard/inbox`, `/dashboard/inbox/messages`, etc. (any depth)\n\n### Events not showing in Meta Events Manager?\n\n-   **Wait a few minutes** - Events can take 5-20 minutes to appear\n-   **Check Test Events** - Use the Test Events tool in Meta Events Manager\n-   **Verify event names** - Standard events are case-sensitive\n-   **Use event deduplication** - Add unique `eventID` to prevent duplicates\n-   **Check ad blockers** - Some extensions block Meta Pixel\n\n### TypeScript errors?\n\nMake sure you have the latest version:\n\n```bash\nnpm update @adkit/meta-pixel-nuxt\n```\n\n### Multiple pixels not working?\n\n```typescript\n// ✅ Correct\nmetaPixel: {\n    pixelIds: ['ID_1', 'ID_2'],\n}\n\n// ❌ Incorrect\nmetaPixel: {\n    pixelIds: 'ID_1,ID_2',\n}\n```\n\n## 📖 Full Guide\n\nFor a complete step-by-step guide on installing and configuring Meta Pixel, check out our detailed tutorial:\n\n**[How to Install Meta Pixel](https://adkit.so/resources/how-to-install-meta-pixel)**\n\n## 📚 Official Documentation\n\nLearn more about Meta Pixel from official Facebook resources:\n\n-   **[Meta Pixel Reference](https://developers.facebook.com/docs/meta-pixel/reference/)** - Complete API reference\n-   **[Standard Events Guide](https://developers.facebook.com/docs/meta-pixel/implementation/conversion-tracking#standard-events)** - Detailed event documentation\n-   **[Object Properties Reference](https://developers.facebook.com/docs/meta-pixel/reference/#object-properties)** - All available event parameters\n-   **[Conversions API](https://developers.facebook.com/docs/marketing-api/conversions-api)** - Server-side event tracking\n-   **[Events Manager](https://www.facebook.com/events_manager2)** - Monitor your pixel events\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n## 📄 License\n\nMIT\n\n---\n\n**Made with ❤️ by [Adkit](https://adkit.so)**\n\nIf this package helped you, please consider giving it a ⭐️ on [GitHub](https://github.com/adkit/conversion-tracking)!\n","readmeFilename":"README.md","keywords":["meta-pixel","facebook-pixel","nuxt-facebook-pixel","meta","facebook","pixel","conversion-tracking","tracking","analytics","nuxt","nuxt-module","typescript"]}