ais-feeds - Algolia

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
Plugin

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,
  },
  // ...
};

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);

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>

​Import

​About this widget

​Examples

​Props

​Slots

Import

About this widget

Examples

Props

Slots