Nuxt•2y ago

A/B Testing Middleware

Hello everyone,

I'm wanting to do some A/B Testing on Vercel. The guide is for NextJS (https://vercel.com/blog/ab-testing-with-nextjs-and-vercel#experimenting-at-the-edge).

So I'm looking to convert this into Nuxt, the only thing I can't seem to find any information on is how to set a cookie in a Nuxt Middleware. I've attempted to use

useCookie()

useCookie()

Solution

Okay so I've found a solution:

/middleware/ab-test.global.ts

/middleware/ab-test.global.ts

const COOKIE_NAME = "ab_variant";
const THRESHOLD = 0.5;

export default defineNuxtRouteMiddleware((to, from) => {
  const variant = useCookie(COOKIE_NAME);

  if (!variant.value) {
    variant.value = Math.random() <= THRESHOLD ? "a" : "b";
  }

  if (!useVariant().value) {
    useVariant().value = variant.value;
  }
});

const COOKIE_NAME = "ab_variant";
const THRESHOLD = 0.5;

export default defineNuxtRouteMiddleware((to, from) => {
  const variant = useCookie(COOKIE_NAME);

  if (!variant.value) {
    variant.value = Math.random() <= THRESHOLD ? "a" : "b";
  }

  if (!useVariant().value) {
    useVariant().value = variant.value;
  }
});

Then

composables/useVariant.ts

composables/useVariant.ts

export const useVariant = () => useState("variant");

export const useVariant = () => useState("variant");

I'm unsure whether this is the best solution, but it seems to be working and SSR friendly in my tests.

Jump to solution

TomOP•6/7/24, 11:53 AM

It seems there is and I'm not entirely sure of the difference but I've come up:

Then:

Which works, okay, but on the initial load when it sets the cookie I'm getting a refreshing after that works as expected.

Solution

Tom•6/7/24, 1:03 PM

Okay so I've found a solution:

/middleware/ab-test.global.ts

/middleware/ab-test.global.ts

const COOKIE_NAME = "ab_variant";
const THRESHOLD = 0.5;

export default defineNuxtRouteMiddleware((to, from) => {
  const variant = useCookie(COOKIE_NAME);

  if (!variant.value) {
    variant.value = Math.random() <= THRESHOLD ? "a" : "b";
  }

  if (!useVariant().value) {
    useVariant().value = variant.value;
  }
});

const COOKIE_NAME = "ab_variant";
const THRESHOLD = 0.5;

export default defineNuxtRouteMiddleware((to, from) => {
  const variant = useCookie(COOKIE_NAME);

  if (!variant.value) {
    variant.value = Math.random() <= THRESHOLD ? "a" : "b";
  }

  if (!useVariant().value) {
    useVariant().value = variant.value;
  }
});

Then

composables/useVariant.ts

composables/useVariant.ts

export const useVariant = () => useState("variant");

export const useVariant = () => useState("variant");

I'm unsure whether this is the best solution, but it seems to be working and SSR friendly in my tests.

harlan•6/7/24, 1:07 PM

lgtm

TomOP•6/7/24, 1:11 PM

Pretty simple in the end and is much less code that Next. It actually makes plenty of sense but I had it in my head that useCookie was not accessible inside , I limited myself from the very beginning

turns out I was just missing the