Skip to main content
Signature
<ais-relevant-sort
  // Optional parameters
  :class-names="object"
/>

Import

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

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

About this widget

Virtual indices let you use relevant sort, a sorting mechanism that favors relevancy over the attribute you’re sorting on. The ais-relevant-sort widget displays the current search mode when searching in a virtual replica index, and allows users to switch between relevant and regular sorting, which is more exhaustive but can return less relevant results.

Examples

Vue
<ais-relevant-sort>
  <template v-slot:text="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      We removed some search results to show you the most relevant ones
    </template>
    <template>Currently showing all results</template>
  </template>
  <template v-slot:button="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">See all results</template>
    <template>See relevant results</template>
  </template>
</ais-relevant-sort>

Props

class-names
object
default:"{}"
The CSS classes you can override:
  • ais-RelevantSort. The root element of the widget.
  • ais-RelevantSort-text. The text element.
  • ais-RelevantSort-button. The button element.
Vue
<ais-stats
  :class-names="{
    'ais-RelevantSort': 'MyCustomRelevantSort',
    'ais-RelevantSort-text': 'MyCustomRelevantSortText',
    'ais-RelevantSort-button': 'MyCustomRelevantSortButton',
  }"
/>
default
The slot to override the complete DOM output of the widget.When you implement this slot, none of the other slots will change the output, as the default slot surrounds them.Scope
  • isRelevantSorted: boolean. True if the current index is using Relevant sort.
  • refine: function. Function to toggle between showing relevant or all results.
Vue
<ais-relevant-sort>
  <template v-slot="{ isRelevantSorted, refine }">
    <button @click="refine">
      <template v-if="isRelevantSorted">
        show all results
      </template>
      <template v-else>
        show most relevant results
      </template
    </button>
  </template>
</ais-relevant-sort>
text
The slot to override the introductory text.Scope
  • isRelevantSorted: boolean. True if the current index is Relevant sorted.
Vue
<ais-relevant-sort>
  <template v-slot:text="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      We removed some search results to show you the most relevant ones
    </template>
    <template>Currently showing all results</template>
  </template>
</ais-relevant-sort>
button
The slot to override the toggle button.Scope
  • isRelevantSorted: boolean. True if the current index is using Relevant sort.
Vue
<ais-relevant-sort>
  <template v-slot:button="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">See all results</template>
    <template>See relevant results</template>
  </template>
</ais-relevant-sort>

HTML output

HTML
<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>We removed some search results to show you the most relevant ones</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See all results</span>
  </button>
</div>

<!-- or -->

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>Currently showing all results</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See relevant results</span>
  </button>
</div>
I