Skip to main content
Signature
<ais-dynamic-widgets
  // Optional parameters
  transform-items="function"
  facets="['*']|[]"
  max-values-per-facet="number"
>
  children
</ais-dynamic-widgets>

​
Import

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

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

​
About this widget

ais-dynamic-widgets is a widget that displays matching widgets, based on the corresponding index settings and applied index rules. You can configure the facet merchandising through the corresponding index setting. To learn more, see Facet display.

​
Requirements

You must set the attributes for faceting and configure the facet order, either using the dashboard or with the API parameters attributesForFaceting and renderingContent. All matching widgets mount after the first network request completes. To avoid a second network request, facets are set to ['*'] and maxValuesPerFacet is set to 20 by default. If this behavior isn’t what you want, it can be overridden using the facets and max-values-per-facet parameters.
You must use Vue InstantSearch v3.8.0 or later to use ais-dynamic-widgets.

​
Examples

<ais-dynamic-widgets>
  <ais-refinement-list attribute="brand" />
  <ais-panel>
    <ais-menu attribute="categories" />
  </ais-panel>
  <ais-hierarchical-menu :attributes="['categories']" />
</ais-dynamic-widgets>

​
Options

​
children
Widget[]
required
The children of this component will be displayed dynamically based on the result of facetOrdering. This means that any child needs to have either the “attribute” or “attributes” prop.
<ais-dynamic-widgets>
  <ais-refinement-list attribute="brand" />
</ais-dynamic-widgets>
​
transform-items
function
A function to transform the attributes to render, or using a different source to determine the attributes to render.
Vue
<template>
  <ais-dynamic-widgets
    :transform-items="transformItems"
  >
    <!-- ... -->
  <ais-dynamic-widgets>
</template>

<script>
export default {
  methods: {
    transformItems(items, { results }) {
      return items;
    }
  }
}
</script>
​
facets
['*']|[]
default:"['*']"
The facets to apply before dynamic widgets get mounted. Setting the value to ['*'] will request all facets and avoid an additional network request once the widgets are added.
<ais-dynamic-widgets
  // ...
  :facets="['*']"
/>
​
max-values-per-facet
number
default:20
The default number of facet values to request. It’s recommended to have this value at least as high as the highest limit and showMoreLimit of dynamic widgets, as this will prevent a second network request once that widget mounts.To avoid pinned items not showing in the result, make sure you choose a max-values-per-facet at least as high as all the most pinned items you have.
Vue
<ais-dynamic-widgets
  // ...
  :max-values-per-facet="500"
/>
⌘I