Algolia & Vue InstantSearch: Customising widgets with slot

Question

I am trying to modify the output of an InstantSearch widget for Vue.

In the documentation (https://www.algolia.com/doc/api-reference/widgets/hits/vue/#customize-the-ui) it says that using the scope-slot it will override the complete DOM output of the widget:

But it does not seem to be the case here. This is my code below using slot with a simple <tr> and <td> elements:

Instead of rendering a <tr> with <td> inside of it, I see here:

A div with a class of ais-Hits
A nested ol with a class of ais-Hits-list
A nested li with a class of ais-Hits-item

The output is this:

If I go to inspect element and I delete the elements I mentioned above (see how div, ol and li are deleted):

Then the result is correct:

Am I doing something wrong? Shouldn't slot override the DOM output and leave the rest to the developer to style?

Any help would be much appreciated!

Samuel Vaillant · Accepted Answer · 2019-10-18T12:54:52.293

You have to use the default slots rather than item. You'll have full control over the render.

<ais-hits>
  <ol slot-scope="{ items }">
    <li v-for="item in items" :key="item.objectID">
      <ais-highlight :hit="item" attribute="name" />
      <p>
        <ais-highlight :hit="item" attribute="description" />
      </p>
    </li>
  </ol>
</ais-hits>

Here is an example on CodeSandbox.

The ais-Hits will always wrap the default slot with a div (see GitHub for the explaination). The only alternative to avoid this issue is to create your own widget with the mixin createWidgetMixin:

<template>
  <ol v-if="state">
    <li v-for="item in state.hits" :key="item.objectID">
      <ais-highlight :hit="item" attribute="name" />
      <p>
        <ais-highlight :hit="item" attribute="description" />
      </p>
    </li>
  </ol>
</template>

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

export default {
  mixins: [createWidgetMixin({ connector: connectHits })]
};
</script>

Here is an example on CodeSandbox.

Thanks for the reply! I managed to remove the ol and li but create a div with class="ais-Hits" that breaks the table. Is there a way to avoid this div? — christostsang, Oct 18 '19 at 12:08
With the slots you can't get rid of the top level `div`. It's a limitation of Vue, the root element can't be a slot or a template. The only alternative is to create a custom widget with the mixin. I've updated the answer. — Samuel Vaillant, Oct 18 '19 at 12:56

christostsang · Answer 2 · 2019-10-20T08:49:08.190

Although @Samuel Vaillant pointed me at the correct path, I believe the code below can help others with the same issue as me (populating HTML tables with Algolia results) without needing to create custom widgets:

<template>
  <ais-hits>
    <table slot-scope="{ items }">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.objectID">
          <td>
            <ais-highlight :hit="item" attribute="name" />
          </td>
          <td>
            <ais-highlight :hit="item" attribute="description" />
          </td>
        </tr>
      </tbody>
    </table>
  </ais-hits>
</template>

this should be best answer – Jackson Tong Jun 12 '21 at 05:53 — Jackson Tong, Jun 12 '21 at 05:53

Algolia & Vue InstantSearch: Customising widgets with slot

2 Answers2