@koryla/vue

Vue 3 / Nuxt 4 SDK for Koryla A/B testing. Server-side variant assignment — zero client-side JavaScript, zero flicker.

Installation

npm install @koryla/vue

Setup

1. Add environment variables

# .env
NUXT_KORYLA_API_KEY=sk_live_...
NUXT_KORYLA_API_URL=https://koryla.com

2. Expose via runtime config

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    korylaApiKey: '',  // set via NUXT_KORYLA_API_KEY
    korylaApiUrl: '',  // set via NUXT_KORYLA_API_URL
  },
})

3. Use in your page or component

<!-- pages/index.vue -->
<script setup lang="ts">
import { getKorylaVariant, KExperiment, KVariant } from '@koryla/vue'

const headers = useRequestHeaders(['cookie'])
const config = useRuntimeConfig()

const result = await getKorylaVariant('your-experiment-id', headers.cookie ?? '', {
  apiKey: config.korylaApiKey,
  apiUrl: config.korylaApiUrl,
})
</script>

<template>
  <KExperiment :variant-id="result?.variantId ?? ''">
    <KVariant id="control">
      <h1>Original headline</h1>
    </KVariant>
    <KVariant id="variant-b">
      <h1>New headline that converts better</h1>
    </KVariant>
  </KExperiment>
</template>

4. Create an experiment in Koryla

Go to your Koryla dashboard → New experiment, set variants and conversion URL, set to Active.

How it works

User visits /
     │
     ▼
Nuxt SSR renders pages/index.vue
     │
     ├── getKorylaVariant() reads config (cached 60s)
     ├── reads koryla_sid cookie via useRequestHeaders
     │     ├── cookie present → use existing variant (sticky)
     │     └── no cookie → assign variant by traffic weight
     │
     └── <KExperiment> renders only the matching <KVariant>
     │
     ▼
Browser receives HTML with the correct variant already rendered
No JS, no swap, no flicker

API

getKorylaVariant(experimentId, cookieHeader, options)

| Parameter | Type | Description | |-----------|------|-------------| | experimentId | string | Experiment ID from Koryla dashboard | | cookieHeader | string | Raw cookie string (useRequestHeaders(['cookie']).cookie) | | options.apiKey | string | Your sk_live_... API key | | options.apiUrl | string | https://koryla.com |

Returns Promise<VariantResult | null>. null means the experiment wasn't found or is inactive.

interface VariantResult {
  experiment: Experiment
  variant: Variant         // the assigned variant object
  variantId: string        // e.g. "abc-123"
  isNewAssignment: boolean
  cookieName: string       // e.g. "ky_exp-id"
}

<KExperiment :variant-id="...">

Renders only the <KVariant> child whose id matches variant-id. Falls back to the first child if no match.

<KVariant id="...">

Marker component. Wrap content inside <KExperiment>.

Why this is better than VWO / Optimizely

| | VWO / Optimizely | @koryla/vue | |--|--|--| | When variant is decided | In the browser, after JS loads | On the server (SSR), before any HTML | | Flicker | Yes (page hides while swapping) | No | | Extra JS on page | ~80–150 KB | 0 KB | | Blockable by ad blockers | Yes | No | | Works without JS | No | Yes |