> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ais-relevant-sort

> Lets users switch between search modes, exhaustive or relevant sorting.

```vue Signature theme={"system"}
<ais-relevant-sort
  // Optional parameters
  :class-names="object"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisRelevantSort } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisRelevantSort
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-relevant-sort" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

Virtual indices let you use [relevant sort](/doc/guides/managing-results/refine-results/sorting/in-depth/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 Vue icon=code theme={"system"}
<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

<ParamField body="class-names" type="object" default="{}">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):

  * `ais-RelevantSort`. The root element of the widget.
  * `ais-RelevantSort-text`. The text element.
  * `ais-RelevantSort-button`. The button element.

  ```vue Vue icon=code theme={"system"}
  <ais-stats
    :class-names="{
      'ais-RelevantSort': 'MyCustomRelevantSort',
      'ais-RelevantSort-text': 'MyCustomRelevantSortText',
      'ais-RelevantSort-button': 'MyCustomRelevantSortButton',
    }"
  />
  ```
</ParamField>

<ParamField body="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 Vue icon=code theme={"system"}
  <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>
  ```
</ParamField>

<ParamField body="text">
  The slot to override the introductory text.

  **Scope**

  * `isRelevantSorted: boolean`. True if the current index is Relevant sorted.

  ```vue Vue icon=code theme={"system"}
  <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>
  ```
</ParamField>

<ParamField body="button">
  The slot to override the toggle button.

  **Scope**

  * `isRelevantSorted: boolean`. True if the current index is using Relevant sort.

  ```vue Vue icon=code theme={"system"}
  <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>
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<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>
```