Dynamic widgets

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,
  },
  // ...
};

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

Requirements

Declare each facet attribute in attributesForFaceting. Configure the facet order in the Algolia dashboard or with renderingContent.facetOrdering. By default, <ais-dynamic-widgets> requests all facets and up to 20 values per facet. These defaults help avoid another request after matching widgets mount. Override the defaults with facets and max-values-per-facet.

<ais-dynamic-widgets> requires Vue InstantSearch 3.8.0 or later.

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>

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

Options

Widget[]

required

The refinement widgets to render in the order specified by renderingContent.facetOrdering.Each top-level child must resolve to one unique facet attribute. Define an attribute prop for single-attribute widgets or an attributes prop for hierarchical widgets.

<ais-dynamic-widgets>
  <ais-refinement-list attribute="brand" />
</ais-dynamic-widgets>

<ais-dynamic-widgets>
  <ais-hierarchical-menu :attributes="['categories']" />
</ais-dynamic-widgets>

<ais-dynamic-widgets>
  <ais-panel>
    <ais-menu attribute="categories" />
  </ais-panel>
</ais-dynamic-widgets>

<ais-dynamic-widgets>
  <my-custom-widget attribute="brand" />
</ais-dynamic-widgets>

function

Transforms the facet attributes before rendering.The second argument contains the search results, which you can use to derive a different attribute list.The function receives the ordered facet attributes from renderingContent.facetOrdering.facets.order and returns an array.

Vue

<template>
  <ais-dynamic-widgets
    :transform-items="transformItems"
  >
    <!-- ... -->
  </ais-dynamic-widgets>
</template>

<script>
export default {
  methods: {
    transformItems(items, { results }) {
      return items;
    }
  }
}
</script>

['*']|[]

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="['*']"
/>

<ais-dynamic-widgets
  :facets="[]"
/>

number

default:20

The maximum number of values to request for each facet.Set this value to at least the highest limit or show-more-limit used by a dynamic widget. This helps avoid an additional request after the widget mounts.Set max-values-per-facet to at least the largest number of pinned values configured for any facet. Otherwise, some pinned facet values might not appear.

Vue

<ais-dynamic-widgets
  // ...
  :max-values-per-facet="500"
/>

​Import

See this widget in action

​About this widget

​Requirements

​Examples

​Options

Import

About this widget

Requirements

Examples

Options