Skip to main content
You can build your own components when the provided ones aren’t sufficient.
You are trying to create your own widget with Vue InstantSearch and that’s awesome but that also means that you couldn’t find the widgets or built-in options you were looking for. Algolia would love to hear about your use case as the aim of the InstantSearch libraries is to provide the best out-of-the-box experience. Don’t hesitate to send a quick message explaining what you were trying to achieve either using the form at the end of that page or directly by submitting a feature request.

​
Existing connectors

Sometimes you might want to create a component which uses a piece of data not provided by any of the widgets. You also might want to make a custom component for having access to the data in different places than the template. You can do this with the createWidgetMixin function exposed by Vue InstantSearch. It works together with the connectors from InstantSearch.js. To get started, choose the connectMenu connector for this example. 
<script>
import { createWidgetMixin } from 'vue-instantsearch/vue3/es';
import { connectMenu } from 'instantsearch.js/es/connectors';

export default {
  mixins: [createWidgetMixin({ connector: connectMenu })],
};
</script>
Then, all information from that connector will be available to your template as well as your other Vue lifecycle methods (after created). All information will be available on this.state on your instance, and will be null initially (so make sure your code is safe by wrapping usage in the template for example in an v-if="state"). All connectors expect to be passed widget parameters. Since these change over the lifecycle of a component, and are usually passed through props, the widget mixin expects a property widgetParams on the component’s instance. Create it with a computed property, based on props:
Vue
export default {
  // ...
  props: {
    attribute: {
      type: String,
      required: true,
    },
  },
  computed: {
    widgetParams() {
      return {
        attribute: this.attribute,
      };
    },
  },
};
Then you can make use of state here to for example filter over the items (note that this is also possible with transform-items prop on ais-menu):
Vue
export default {
  // ...
  computed: {
    // ...
    items() {
      // Not needed here if you v-if in the template
      // Only labels of three character long allowed
      return this.state.items.filter(item => item.label.length === 3)
    },
  },
};
Then in the template, you can use this as expected:
Vue
<ul>
  <li v-for="item in items" :key="item.value">
    <button @click="state.refine(item.value)">
      {{ item.label }}
    </button>
  </li>
</ul>
To learn more, see the UI state reference.

​
Custom connectors

Finally, if you want to make your own connector, you can do that using a function with this signature:
JavaScript
const connector = (renderFn, unmountFn) => (widgetParams = {}) => ({
  init({ instantSearchInstance }) {
    renderFn(
      {
        /* Anything you put here comes in this.state */
      },
      true
    );
  },

  render({ results, instantSearchInstance }) {
    renderFn(
      {
        /* Anything you put here comes in this.state */
      },
      false
    );
  },

  dispose() {
    unmountFn();
  },
});
That lets you access the lowest level of abstraction, including the Algolia search helper.
⌘I