Skip to main content
Signature
<ais-clear-refinements
  // Optional parameters
  :excluded-attributes="string[]"
  :included-attributes="string[]"
  :transform-items="function"
  :class-names="object"
/>

​
Import

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

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

​
About this widget

The ais-clear-refinements widget displays a button that lets users clears every currently applied refinement.

​
Examples

Vue
<ais-clear-refinements />

​
Props

​
excluded-attributes
string[]
default:"['query']"
The attributes to exclude from the refinements to clear. In the example below, the attribute brand is excluded from the refinements to clear.This can’t be used with included-attributes.
Vue
<ais-clear-refinements
  :excluded-attributes="['brand']"
/>
​
included-attributes
string[]
default:"[]"
The attributes to include in the refinements to clear (all by default). In the example below, only the categories attribute is included in the refinements to clear.This can’t be used with excluded-attributes.
Vue
<ais-clear-refinements
  :included-attributes="['categories']"
/>
​
transform-items
function
default:"items => items"
A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.
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-current-refinements :transform-items="transformItems" />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.sort(item => item.attribute);
      },

      /* or, combined with results */
      transformItems(items, { results }) {
        return results.nbHits === 0
          ? items
          : items.filter(item => item !== 'brand');
      },
    },
  };
</script>
​
class-names
object
default:"{}"
The CSS classes you can override:
  • ais-ClearRefinements. The root container of the widget.
  • ais-ClearRefinements-button. The button of the widget.
  • ais-ClearRefinements-button--disabled. The disabled button of the widget.
Vue
<ais-clear-refinements
  :class-names="{
    'ais-ClearRefinements': 'MyCustomClearRefinements',
    'ais-ClearRefinements-button': 'MyCustomClearRefinementsButton',
    // ...
  }"
/>

​
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
  • canRefine: boolean. Are there any refinements?
  • refine: () => void. The function to clear all the refinements.
  • createURL: () => string. The function to return a link for the search without the refinements.
Vue
<ais-clear-refinements>
  <template v-slot="{ canRefine, refine, createURL }">
    <a
      :href="createURL()"
      @click.prevent="refine"
      v-if="canRefine"
    >
      Clear all refinements
    </a>
  </template>
</ais-clear-refinements>
​
resetLabel
The slot to override the DOM output for the label of the reset button.
Vue
<ais-clear-refinements>
  <template v-slot:resetLabel>Clear refinements</template>
</ais-clear-refinements>

​
HTML output

HTML
<div class="ais-ClearRefinements">
  <button class="ais-ClearRefinements-button">Clear refinements</button>
</div>
⌘I