> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ais-query-rule-custom-data

> Shows custom data from applied index rules.

```vue Signature theme={"system"}
<ais-query-rule-custom-data
  // Optional parameters
  :transform-items="function"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisQueryRuleCustomData } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisQueryRuleCustomData
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-query-rule-custom-data" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

The `ais-query-rule-custom-data` widget displays custom data from [Rules](/doc/guides/managing-results/rules/detecting-intent).

You can use this widget to display banners or recommendations returned by rules when they  match search parameters.

## Examples

```html HTML icon=code-xml theme={"system"}
<ais-query-rule-custom-data>
  <template v-slot:item="{ item }">
    <h2>{{ item.title }}</h2>
    <a :href="item.link">
      <img :src="item.banner" :alt="item.title" />
    </a>
  </template>
</ais-query-rule-custom-data>
```

## Props

<ParamField body="transform-items" type="function">
  <TranformItems />

  ```vue Vue icon=code theme={"system"}
  <template>
    <ais-query-rule-custom-data :transform-items="transformItems" />
  </template>

  <script>
  export default {
    methods: {
      transformItems(items) {
        return items.filter((item) => Boolean(item.banner));
      },

      /* or, combined with results */
      transformItems(items, { results }) {
        return items.map((item) => ({
          ...item,
          visible: results.page === 0,
        }));
      },
    },
  };
  </script>
  ```
</ParamField>

## Customize the UI

<ParamField body="default">
  The slot to override the complete DOM output of the widget.

  The following example assumes a rule returned this custom data.

  ```json JSON icon=braces theme={"system"}
  {
    "title": "This is an image",
    "banner": "image.png",
    "link": "https://website.com/"
  }
  ```

  When you implement this slot,
  none of the other slots will change the output,
  as the default slot surrounds them.

  **Scope**

  * `items: object[]`. The items returned by the rules.

  ```vue Vue icon=code theme={"system"}
  <ais-query-rule-custom-data>
    <template v-slot="{ items }">
      <ol>
        <li v-for="item in items" :key="item.title">
          <h2>{{ item.title }}</h2>
          <a :href="item.link">
            <img
              :src="item.banner"
              :alt="item.title"
            />
          </a>
        </li>
      </ol>
    </template>
  </ais-query-rule-custom-data>
  ```
</ParamField>

<ParamField body="item">
  The slot to override the DOM output of the item returned by the rules.

  The following example assumes a Query Rule returned this custom data.

  ```json JSON icon=braces theme={"system"}
  {
    "title": "This is an image",
    "banner": "image.png",
    "link": "https://website.com/"
  }
  ```

  **Scope**

  * `item: object`. The item returned by the Rules.

  ```vue Vue icon=code theme={"system"}
  <ais-query-rule-custom-data>
    <template v-slot:item="{ item }">
      <h2>{{ item.title }}</h2>
      <a :href="item.link">
        <img
          :src="item.banner"
          :alt="item.title"
        />
      </a>
    </template>
  </ais-query-rule-custom-data>
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<div class="ais-QueryRuleCustomData"></div>
```