<Personalization>

This component evaluates a CQL query with full server-side rendering support, serving as the declarative equivalent of the useEvaluation composable.

Example

Here is a basic example of how to use this component:

<template>  <Personalization query="user's persona is 'developer'" v-slot="{ result }">    <a v-if="result" href="/docs">View docs</a>    <a v-else href="/share">Share with your developer</a>  </Personalization></template>

Loading and error states

You can use named slots to handle loading and error states:

<template>  <Personalization query="user's persona is 'developer'">    <template #default="{ result }">      <a v-if="result" href="/docs">View docs</a>      <a v-else href="/share">Share with your developer</a>    </template>
    <template #loading>      <p>Loading...</p>    </template>
    <template #error="{ error }">      <p>Something went wrong: {{ error.message }}</p>    </template>  </Personalization></template>

Props

The following list describes the supported props:

query

string

The CQL query to evaluate.

fallback(optional)

JSON

A fallback value to render in case of an error.

If not specified, the #error slot renders on failure.

timeout(optional)

number

The maximum fetch time in milliseconds.

Once reached, the SDK will abort the request and reject the promise with a timeout error.

attributes(optional)

object

The map of attributes to inject in the evaluation context.

The attributes can be referenced in audience conditions using the context variable. For example, suppose you pass the following attributes:

{cities: ["New York", "San Francisco"]}

You can then reference them in queries like:

context's cities include location's cityName

For more information, see Context variables.

The following restrictions apply to the attributes:

• Up to 30 entries and 5 levels deep
• Keys can be either numbers or non-empty strings with a maximum length of 50 characters
• Values can be null, numbers, booleans, strings (up to 50 characters), or nested maps
• Nested maps follow the same constraints for keys and values

Slots

The following list describes the supported slots:

#default

object

Renders when the query has been evaluated successfully.

The scope exposes result with the query return value.

#loading

object

Renders while the query is being evaluated.

#error

object

Renders when evaluation fails. Not used when a fallback prop is provided.

The scope exposes error with the error details.