vue3 (v4.0.0-beta.2) Customization-ready widgets issue

Bug 🐞

What is the current behavior?

I want to customize the CSS classes of different widgets. For instance, the button ais-clear-refinements: https://www.algolia.com/doc/api-reference/widgets/clear-refinements/vue/#customize-the-ui

I replaced:

<ais-clear-refinements />

by:

<ais-clear-refinements>
  <div slot-scope="{ canRefine, refine, createURL }">
    <a
      :href="createURL()"
      @click.prevent="refine"
      v-if="canRefine"
    >
      Clear all refinements
    </a>
  </div>
</ais-clear-refinements>

But the button does not show…

I tried the same with ais-search-box https://www.algolia.com/doc/api-reference/widgets/search-box/vue/#customize-the-ui

This time the search bar was visible but not functional.

What is the expected behavior?

A visible and functional component broken down in html elements ready to be customized with custom CSS classes

What is the version you are using?

vue3 (v4.0.0-beta.2)

Always try the latest one before opening an issue.

I tried to reproduce with vue3 (v4.0.0-beta.3), but I could’nt since I the following error when starting dev server:

error when starting dev server:
Error: The following dependencies are imported but could not be resolved:

  vue-instantsearch/dist/vue3/es

[Haroenv]

in the latest beta the path is vue-instantsearch/vue3/es, not vue-instantsearch/dist/vue3/es, sorry that we don’t have docs available for betas

[Haroenv]

This is the right code: https://codesandbox.io/s/winter-pine-leezc

Note that this is unrelated to Vue InstantSearch, but rather to the examples using the older slot-scope, which is changed to v-slot https://vuejs.org/v2/guide/components-slots.html