@testit-sdk/nuxt
v1.0.2
Published
AB Testing Nuxt
Downloads
15
Readme
🧬 Test It for Nuxt
A powerful and easy-to-use A/B testing module for Nuxt.js applications, powered by Test It.
📚 Table of Contents
✨ Features
- 🚀 Easy integration with Nuxt.js projects
- 🔧 Automatic variant assignment
- 📊 Built-in event tracking
💻 Installation
Install the module using your preferred package manager:
# Using npm
npm install test-it-nuxt
# Using yarn
yarn add test-it-nuxt
# Using pnpm
pnpm add test-it-nuxt
🚀 Usage
Basic Setup
- Add the module to your
nuxt.config.ts
:
export default defineNuxtConfig({
modules: ["test-it-nuxt"],
public: {
abTesting: {
projectId: "your-project-id",
},
},
});
Creating an Experiment
Use the useExperiment
composable in your Vue component:
<script setup>
import { useExperiment } from "#app";
const experiment = useExperiment("66b035275d5278173af744xx");
experiment.setVariants([
{ id: "66b035275d5278173af744xx", name: "blue", weight: 0.5 },
{ id: "66b035275d5278173af744xx", name: "red", weight: 0.5 },
]);
</script>
Checking Variants
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.
// script setup
<script setup>
const buttonColor = experiment.isVariant("blue") ? "blue" : "red";
</script>
// template
<template>
<button v-if="experiment.isVariant('blue')" class="bg-blue-500">
Click me
</button>
<button v-else class="bg-red-500">Click me</button>
</template>
Tracking Events
Track conversion events using the trackExperimentEvent
composable:
<script setup>
function handleClick() {
trackExperimentEvent("66b035275d5278173af744xx");
}
</script>
<template>
<button @click="handleClick">Click me</button>
</template>
📘 API Reference
useExperiment(experimentId: string)
Creates an experiment instance.
setVariants(variants: Variant[]): void
- Sets the variants for the experimentisVariant(variantName: string): boolean
- Checks if the current variant matches the given namecurrentVariant: Ref<Variant | null>
- The current variant for the user
trackExperimentEvent(eventId: string, data?: object)
Tracks a custom event for the experiment. Optionally pass data to track.
⚙️ Configuration
Configure the module in your nuxt.config.ts
:
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.
🤝 Contributing
If you do have suggestions for improvements, let me know!