Feature request: Vue.JS Related Products

[Luke-Shepp]

There is a React component for related / recommended products:
https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch/src/widgets/RelatedProducts.tsx

With documentation available at:
https://www.algolia.com/doc/api-reference/widgets/related-products/react/

However there is no similar component available for vue-instantsearch.

It would be good to get this in so myself and others can begin utilising the functionality!

[Haroenv]

We indeed don't have this out of the box yet, but you can already use it in a custom widget now, example here: https://codesandbox.io/p/devbox/mwz7t5?file=%2Fsrc%2Fcomponents%2FRelatedProducts.vue%3A24%2C9

<template>
  <div class="ais-RelatedProducts" v-if="state">
    <ul class="ais-RelatedProducts-list">
      <li
        class="ais-RelatedProducts-item"
        v-for="item in state.items"
        :key="item.objectID"
      >
        <article>
          <div>
            <img :src="item.image" />
            <h2>{{ item.name }}</h2>
          </div>
        </article>
      </li>
    </ul>
  </div>
</template>

<style>
img {
  max-width: 100%;
}
</style>

<script>
import { connectRelatedProducts } from 'instantsearch.js/es/connectors';
import { createWidgetMixin } from 'vue-instantsearch';

export default {
  name: 'AppRelatedProducts',
  mixins: [createWidgetMixin({ connector: connectRelatedProducts })],
  props: {
    objectIDs: {
      type: Array,
      required: true,
    },
  },
  computed: {
    widgetParams() {
      return {
        objectIDs: this.objectIDs,
      };
    },
  },
};
</script>

[Luke-Shepp]

That works great - thank you