Manual Widgets Mode

<template>
  <AisInstantSearch :configuration="configuration" :widgets="widgets" instance-key="search">
    <AisSearchBox />
    <AisToggleRefinement attribute="free_shipping" />
    <AisRefinementList attribute="brand" searchable />
    <AisSortBy />
    <AisStats />
    <AisInfiniteHits />

    <AisIndex index="airbnb">
      <AisInfiniteHits />
    </AisIndex>
  </AisInstantSearch>
</template>

<script setup lang="ts">
import { algoliasearch } from "algoliasearch";
import { singleIndex as singleIndexMapping } from "instantsearch.js/es/lib/stateMappings";

const client = algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76");
const algoliaRouter = useAisRouter();

const airbnbIndex = useAisIndex({ indexName: "airbnb" });
airbnbIndex.addWidgets([useAisInfiniteHits({})]);

const widgets = computed(() => [
  useAisSortBy({
    items: [
      { value: "instant_search", label: "Default" },
      { value: "instant_search_price_asc", label: "Price asc." },
      { value: "instant_search_price_desc", label: "Price desc." },
    ],
  }),
  useAisStats({}),
  useAisInfiniteHits({ showPrevious: true }),
  useAisRefinementList({ attribute: "brand", showMore: true }, "brand-search"),
  useAisToggleRefinement({ attribute: "free_shipping" }),
  useAisSearchBox({}),
  airbnbIndex,
]);

const configuration = {
  indexName: "instant_search",
  searchClient: client,
  routing: {
    router: algoliaRouter.value.router,
    stateMapping: singleIndexMapping("instant_search"),
  },
};
</script>