Nuxt A/B Testing: SSR, Cookies and Conversion Tracking
How do you run A/B testing in Nuxt?
Run A/B testing in Nuxt by assigning each visitor a consistent variant, rendering it consistently on the server and client, and recording exposure and conversion events. Decide how the experiment interacts with caching before sending traffic to it.
Start with one hypothesis, such as whether a clearer call to action increases completed signups. Define the conversion event before changing the page.
What should you measure?
Measure completed outcomes among visitors exposed to each variant. Pageviews and button clicks can help diagnose behavior, but they do not establish that a signup or purchase happened.
| Event | When it happens | Useful properties |
|---|---|---|
| Experiment exposure | The assigned variation is actually displayed | Experiment ID, variant, page |
| CTA click | The visitor clicks the tested button | Experiment ID, variant, destination |
| Signup completed | An account is successfully created | Experiment ID, variant |
| Purchase completed | Payment is confirmed | Experiment ID, variant, transaction ID |
Use the same counting rule for both variants. Deduplicate repeated events and exclude internal test traffic. Follow your site's consent rules when collecting analytics.
How do you keep a variant consistent in Nuxt?
Use a persistent assignment that both server rendering and client hydration can read. Nuxt's useCookie supports reading and writing a cookie within the Nuxt context.
For server-rendered pages, assign the visitor before rendering and send the same assignment through hydration. Avoid independent random choices during server and browser rendering: they can produce different content for the same visit.
For a prerendered page, the HTML is shared. Make a deliberate choice between client-side variation after hydration, with possible flicker, and a server or edge implementation that controls the initial response.
Can A/B tests break SSR caching?
Yes. A shared cached response can serve one visitor's variant to another visitor. Nuxt supports several rendering and caching modes; a visitor-specific experiment must account for the one your route uses.
| Delivery mode | What the experiment needs |
|---|---|
| Uncached SSR | Assignment available before rendering |
| Shared prerendered HTML | Stable common HTML, then a deliberate client-side experiment |
| Cached SSR or CDN response | Explicit cache separation by variant or an uncached experiment route |
Test two separate browser sessions, refresh each one, and confirm the variant stays consistent. Do this against the deployed cache behavior as well as local development.
How do you verify a Nuxt experiment before launch?
- Define one hypothesis and one primary conversion event.
- Choose an experiment ID and record the start date.
- Check assignment persistence across refreshes and navigation.
- Confirm server HTML and hydrated content agree where SSR variation is used.
- Check that exposure and conversion events contain the same experiment and variant IDs.
- Test both branches with your Nuxt test utils setup.
- Verify the deployed cache does not mix variants.
- Set the planned duration and sample requirement before judging results.
Keep your public URL, canonical tag, and Nuxt SEO setup consistent. Avoid treating a short experiment with a handful of conversions as a reliable winner.
Should a low-traffic SaaS run A/B tests?
Often, fixing obvious problems and interviewing customers is more useful first. If each variant receives very few eligible visitors or conversions, the test may take too long to answer the question.
Use that time to check whether the page explains the product, whether the signup flow works, and whether conversion tracking records completed outcomes. You can use the free landing page roaster to generate review ideas, then verify those suggestions with users.
When you have enough traffic to evaluate one change, use the checklist above. ShipAhead supplies a Nuxt SaaS foundation; experiment assignment and measurement still need to be implemented for your specific application.
Ready to ship your SaaS?
How Much Time Does a Nuxt Starter Kit Actually Save?
Is building a SaaS still worth it in 2026? We break down the time-saving data and why speed is the only advantage that matters for solo founders.
Nuxt 3 authentication with email, magic links, and Google
Set up Nuxt 3 auth with email/password, magic links, and Google. Secure sessions, protect routes, and ship faster with a production-ready starter.