Skip to main content
Signature
<ais-query-rule-custom-data
  // Optional parameters
  :transform-items="function"
/>

​
Import

  • Component
  • Plugin
To ensure optimal bundle sizes, see Optimize build size.
Vue
import { AisQueryRuleCustomData } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisQueryRuleCustomData
  },
  // ...
};
View demo

​
About this widget

The ais-query-rule-custom-data widget displays custom data from Rules. You can use this widget to display banners or recommendations returned by rules when they match search parameters.

​
Examples

HTML
<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

​
transform-items
function
Vue
<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>

​
Customize the UI

​
default
The slot to override the complete DOM output of the widget.The following example assumes a rule returned this custom data.
JSON
{
  "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
<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>
​
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
{
  "title": "This is an image",
  "banner": "image.png",
  "link": "https://website.com/"
}
Scope
  • item: object. The item returned by the Rules.
Vue
<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>

​
HTML output

HTML
<div class="ais-QueryRuleCustomData"></div>
⌘I