AB Testing Nuxt
npm install ab-testing-nuxt-a[![Nuxt][nuxt-src]][nuxt-href]
[![npm version][npm-version-src]][https://www.npmjs.com/package/nuxt-ab-testing]
A powerful and easy-to-use A/B testing module for Nuxt.js applications.
- Features
- Installation
- Usage
- Basic Setup
- Creating an Experiment
- Checking Variants
- Tracking Events
- API Reference
- Configuration
- Contributing
- License
- 🚀 Easy integration with Nuxt.js projects
- 🔧 Automatic variant assignment
- 📊 Built-in event tracking
Install the module using your preferred package manager:
``bashUsing npm
npm install nuxt-ab-testing
🚀 Usage
$3
1. Add the module to your
nuxt.config.ts:`typescript
export default defineNuxtConfig({
modules: ["nuxt-ab-testing"], public: {
abTesting: {
projectId: "your-project-id",
},
},
});
`$3
Use the
useExperiment composable in your Vue component:`vue
`$3
Check which variant the user is assigned to:
You can use
experiment.isVariant to check if the user is in a specific variant.It works in both template and script setup.
`vue
// script setup
``vue
// template
`$3
Track conversion events using the
trackExperimentEvent composable:`vue
`📘 API Reference
$3
Creates an experiment instance.
-
setVariants(variants: Variant[]): void - Sets the variants for the experiment
- isVariant(variantName: string): boolean - Checks if the current variant matches the given name
- currentVariant: Ref - The current variant for the user$3
Tracks a custom event for the experiment. Optionally pass data to track.
⚙️ Configuration
Configure the module in your
nuxt.config.ts:`typescript
export default defineNuxtConfig({
// ... other config
abTesting: {
projectId: "your-project-id",
cookieKey: "experiments",
},
});
`IMO it's better to manually track page views using the
trackExperimentEvent` composable. It's not an analytics app, so only track what you need.If you do have suggestions for improvements, let me know!