test/vue3.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
</head>

<body>
<div id="app" class="wrapper">
    <ais-instant-search :search-client="searchClient" index-name="movies">
        <ais-configure :hits-per-page.camel="10" />
        <ais-search-box placeholder="Search here…" class="searchbox"></ais-search-box>
        <ais-hits>
            <div slot="item" slot-scope="{ item }">
                <ais-highlight :hit="item" attribute="title" />
            </div>
        </ais-hits>
    </ais-instant-search>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch/vue3/umd/index.js"></script>
<script
        src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                searchClient: instantMeiliSearch('http://127.0.0.1:7700')
            }
        }
    })
    app.use(VueInstantSearch);
    app.mount("#app")
</script>

</html>