How to Install Meta Pixel in Nuxt

Installing the Meta Pixel in Nuxt takes about 5 minutes: install the @adkit.so/meta-pixel-nuxt package, add your Pixel ID to nuxt.config.ts, and you're tracking.

Video Tutorial

Watch on YouTube →

Prerequisites

Before you start, make sure you have:

• A Nuxt 3 or 4 application
• A Facebook/Meta Pixel ID (how to get your Pixel ID)

How to Install the Package

The fastest way is using the Meta Pixel Nuxt NPM package:

npx nuxi module add @adkit.so/meta-pixel-nuxt

npm install @adkit.so/meta-pixel-nuxt

pnpm add @adkit.so/meta-pixel-nuxt

yarn add @adkit.so/meta-pixel-nuxt

How to Configure Your Pixel ID

Step 1: Add the Module to Your Nuxt Config

If you installed manually with npm/pnpm/yarn, open your nuxt.config.ts and add the module:

export default defineNuxtConfig({
    modules: ['@adkit.so/meta-pixel-nuxt'],
});

Step 2: Add Your Pixel ID

Add your Pixel ID to the module configuration:

export default defineNuxtConfig({
    modules: ['@adkit.so/meta-pixel-nuxt'],
    metaPixel: {
        pixelIds: ['YOUR_PIXEL_ID_HERE'],
    },
});

metaPixel: {
    pixelIds: '123456789012345';
}

metaPixel: {
    pixelIds: ['123456789012345', '987654321098765'];
}

That's it! Your Meta Pixel is now installed and will automatically track page views.

How to Test if the Pixel is Working

Enable Localhost Tracking

By default, the pixel won't fire on localhost to avoid polluting your data. To test during development:

metaPixel: {
  pixelIds: ['YOUR_PIXEL_ID_HERE'],
  enableLocalhost: true,  // Enable for testing
  debug: true             // Show console logs
}

Verify Installation

There are two ways to verify your pixel is working:

How to Track Custom Events

The module provides a useMetaPixel() composable for event tracking.

Basic Event Tracking

<script setup lang="ts">
onMounted(() => {
    useMetaPixel().track('ViewContent');
});
</script>

Standard Events with Parameters

Facebook supports many standard events. Pass parameters for richer data:

<script setup lang="ts">
const meta = useMetaPixel();

onMounted(() => {
    meta.track('ViewContent', { 
        content_id: 'product-123',
        content_name: 'Premium Plan',
        value: 99,
        currency: 'USD'
    });
});
</script>

You should then see the following in the Meta Pixel Helper Chrome extension:

Custom Events

For events not in the standard list, use trackCustom():

<script setup lang="ts">
onMounted(() => {
    useMetaPixel().trackCustom('custom_event', { custom_param: 'whatever_you_want' });
});
</script>

How to Exclude Routes from Tracking

Prevent the pixel from loading on certain pages (like dashboards or admin areas):

metaPixel: {
  pixelIds: ['YOUR_PIXEL_ID_HERE'],
  excludeRoutes: ['/admin', '/dashboard/**']
}

The pixel won't initialize at all on excluded routes, keeping your analytics data clean.

Full Example

Here's a complete project example with Meta Pixel:

<template>
    <div>
        <h1>Welcome to Our App</h1>
        <button @click="handleSignup">Sign Up</button>
    </div>
</template>

<script setup lang="ts">
const meta = useMetaPixel();

onMounted(() => {
    meta.track('ViewContent', { content_id: 'homepage' });
});

function handleSignup() {
    meta.track('Lead');
}
</script>

Common Issues and Fixes

metaPixel: {
  pixelIds: ['YOUR_PIXEL_ID_HERE'],
  enableLocalhost: true  // Add this
}

// ✅ Correct - standard event
meta.track('ViewContent');

// ❌ Wrong - will show TS error
meta.track('ViewPage'); // Not a standard event

// ✅ Correct - use trackCustom for custom events
meta.trackCustom('ViewPage');

pixelIds: ['123456789012345', '987654321098765']; // ✅ Correct
pixelIds: '123456789012345'; // ❌ Wrong for multiple pixels

Best Practices

• Use standard events whenever possible for better ad optimization
• Add meaningful parameters to events (content_id, value, currency)
• Exclude internal routes (dashboard, admin) to keep data clean
• Disable debug in production to reduce console noise
• Track the full funnel: ViewContent → AddToCart → InitiateCheckout → Purchase

Next Steps

Now that your pixel is installed:

1. Set up conversion events in Events Manager
2. Create custom audiences based on pixel data
3. Use pixel events to optimize your ads

Resources

• @adkit.so/meta-pixel-nuxt on NPM
• Meta Pixel Documentation
• Standard Events Reference
• Back to all installation guides