# \<Personalization>

Learn how to evaluate queries using components.

This component evaluates a [CQL query](/reference/cql/introduction) with full server-side rendering support, serving as the declarative equivalent of the [`useEvaluation`](/reference/sdk/nuxt/api/composables/use-evaluation) composable.

## Example

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

**JavaScript**

```vue
<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>
```

**TypeScript**

```vue
<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:

**JavaScript**

```vue
<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>
```

**TypeScript**

```vue
<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](/reference/cql/introduction) to evaluate.

- `fallback`: `JSON` (optional)

  A fallback value to render in case of an error.

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

- `timeout`: `number` (optional)

  The maximum fetch time in milliseconds.

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

- `attributes`: `object` (optional)

  The map of attributes to inject in the evaluation context.

  The attributes can be referenced in audience conditions using the [`context`](/reference/cql/context#evaluation) variable. For example, suppose you pass the following attributes:

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

  You can then reference them in queries like:

  ```cql
  context's cities include location's cityName
  ```

  For more information, see [Context variables](../../content-rendering#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.