Skip to main content
Signature
<ais-sort-by
  :items="object[]" // Optional parameters
  :transform-items="function"
  :class-names="object"
/>

​
Import

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

export default {
  components: {
    AisSortBy
  },
  // ...
};
View demo

​
About this widget

The ais-sort-by widget displays a list of indices, allowing a user to change the way hits are sorting (with replica indices). Another common use case for this widget is to let users switch between different indices. For this widget to work, you must define all indices that you pass down as options as replicas of the main index.

​
Examples

Vue
<ais-sort-by
  :items="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]"
/>

​
Props

​
items
object[]
required
The list of indices to search in, with each item:
  • label: string. The label of the index to display.
  • value: string. The name of the index to target.
Vue
<ais-sort-by
  :items="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]"
/>
​
transform-items
function
default:"items => items"
To prevent creating infinite loops, avoid passing arrays, objects, or functions directly in the template. These values aren’t referentially equal on each render, which causes the widget to re-register every time. Instead, define them in your component’s data option and reference them in the template.
Vue
<template>
  <!-- ... -->
  <ais-sort-by
    [...]
    :transform-items="transformItems"
  />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.map(item => ({
          ...item,
          label: item.label.toUpperCase(),
        }));
      },

      // or, combined with results
      transformItems(items, { results }) {
        return results?.nbPages < 4
          ? items.filter(item => item.value === 'instant_search')
          : items;
      },
    },
  };
</script>
​
class-names
object
default:"{}"
The CSS classes you can override:
  • ais-SortBy. The root of the widget
  • ais-SortBy-select. The select element.
  • ais-SortBy-option. The option element of the select.
Vue
<ais-sort-by
  [...]
  :class-names="{
    'ais-SortBy': 'MyCustomSortBy',
    'ais-SortBy-select': 'MyCustomSortBySelect',
    // ...
  }"
/>

​
Customize the UI

​
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
  • items: object[]. The list of items the widget can display.
  • currentRefinement: string. The currently applied refinement.
  • canRefine: boolean. Whether a refinement can be applied.
  • refine: (value: string) => void. The function to call with the next value of the index name.
Where each item is an object containing:
  • label: string. The label of the index to display.
  • value: string. The name of the index to target.
Vue
<ais-sort-by
  :items="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]"
>
  <template v-slot="{ items, currentRefinement, refine }">
    <ul>
      <li v-for="item in items" :key="item.value" :value="item.value">
        <a
          href="#"
          :style="{ fontWeight: item.value === currentRefinement ? 'bold' : '' }"
          @click.prevent="refine(item.value)"
        >
          {{ item.label }}
        </a>
      </li>
    </ul>
  </template>
</ais-sort-by>

​
HTML output

HTML
<div class="ais-SortBy">
  <select class="ais-SortBy-select">
    <option class="ais-SortBy-option" value="instant_search">Featured</option>
    <option class="ais-SortBy-option" value="instant_search_price_asc">
      Price asc.
    </option>
    <option class="ais-SortBy-option" value="instant_search_price_desc">
      Price desc.
    </option>
  </select>
</div>
⌘I