ais-feeds

Use the ais-feeds widget to display multiple independent result sets from a multifeed composition.

This widget is and is subject to change in minor versions.

Signature

<ais-feeds
  :isolated="false"
  // Optional parameters
  :transform-feeds="function"
>
  <template v-slot="{ feedID }">
    <!-- widgets for this feed -->
  </template>
</ais-feeds>

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisFeeds } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisFeeds,
  },
  // ...
};

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

About this widget

Use the ais-feeds widget to display multiple independent result sets from a multifeed composition.

For each feed in the composition, the widget provides a scoped index context and exposes a feedID slot prop, letting you place any InstantSearch widgets inside.

Requires a composition-based InstantSearch instance (the composition-id option must be set on ais-instant-search).

Examples

Vue

<template>
  <ais-instant-search
    index-name="instant_search"
    :search-client="searchClient"
    composition-id="YourCompositionID"
  >
    <ais-feeds :isolated="false">
      <template v-slot="{ feedID }">
        <h2>{{ feedID }}</h2>
        <ais-hits>
          <template v-slot:item="{ item }">
            <p>{{ item.name }}</p>
          </template>
        </ais-hits>
      </template>
    </ais-feeds>
  </ais-instant-search>
</template>

Props

isolated · boolean · required

Whether each feed runs an isolated search with its own search parameters. Currently only false is supported, meaning all feeds share the same global search state. The prop is required to make the choice explicit; future releases may add support for true.

Vue

<ais-feeds :isolated="false">
  <!-- ... -->
</ais-feeds>

transform-feeds · function

A function to transform, reorder, or filter the feed IDs before rendering. Receives the array of feed IDs from the composition response and must return an array of feed IDs (strings).

Vue

<ais-feeds
  :isolated="false"
  :transform-feeds="(feedIDs) => feedIDs.slice(0, 2)"
>
  <!-- ... -->
</ais-feeds>

Slots

default · slot

The default slot is rendered once per feed, inside a scoped index context for that feed. It exposes:

• feedID. The unique identifier of the feed, as defined in the composition configuration.

Vue

<ais-feeds :isolated="false">
  <template v-slot="{ feedID }">
    <h2>{{ feedID }}</h2>
    <ais-hits />
  </template>
</ais-feeds>