Vue Instantsearch multi-indices search

Hi folks,
I’m using Vue Instantsearch to search across 2 indices videos and authors. This is working fine for me for the most part. However, the structure for the HTML, means that both indices are within their own <ol> rather than being grouped together.

What’s the best way to combine the indices into a single CSS grid so that results are grouped nicely?

It’s possible, but it’s not super easy.

The first page in the docs to check is “multi index search”.

You will realise that you might have to build your own custom connector. That’s what I did.

I borrowed a lot from this example.
I used a mixin like so:

 mixins: [createWidgetMixin({ connector: connectStateResults })],

Where connectStateResults is my custom implementation (very similar to what you see in the code sample I linked above, the entire connectSearchBox function) that takes charge of extracting the results from the 2 indices and merging them into 1 single array.
Once you do that it’s easy to render the results “one after the other” without the pesky ol getting in the way of your layouts.