Make a Vue3 compatibility example

bidoubiwa commented 2 years ago

I'm trying to showcase an example on how to work with Vue 3. Unfortunately I'm not able to make it work. The following example is based on the quick start guide of Meilisearch.

The following code is where I stopped. The error throwns are as follow:

vue.global.js:1568 [Vue warn]: A plugin must either be a function or an object with an "install" function.
Ht @ vue.global.js:1568
use @ vue.global.js:5308
(anonymous) @ (index):35
vue.global.js:1568 [Vue warn]: Failed to resolve component: ais-search-box
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>
// etc etc

Vue 3

<!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>

Working Vue 2

<!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@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch/vue2/umd/index.js"></script>
<script
  src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script>
  Vue.use(VueInstantSearch)
  var app = new Vue({
    el: '#app',
    data: {
      searchClient: instantMeiliSearch('http://127.0.0.1:7700')
    }
  })
</script>

</html>

michaelhume commented 2 years ago

Hello!

I'm new to this and am also trying to get this working with Vue3 - I can see that the search is working, and I'm getting results back from my server, but I'm having issues rendering the results.

I've tried a few varients of the following without any luck:

<template>
    <ais-instant-search :search-client="searchClient" index-name="users">
        <ais-search-box />
        <ais-hits>
            <template v-slot="item">
                <ais-highlight :hit="item" attribute="name" />
            </template>
        </ais-hits>
    </ais-instant-search>
</template>
<script>
import {instantMeiliSearch} from '@meilisearch/instant-meilisearch';
import InstantSearch from "vue-instantsearch/vue3/es/src/components/InstantSearch";
import AisInstantSearch from "vue-instantsearch/vue3/es/src/components/InstantSearch";
import AisSearchBox from "vue-instantsearch/vue3/es/src/components/SearchBox.vue";
import AisHits from "vue-instantsearch/vue3/es/src/components/Hits.vue";
import AisHighlight from "vue-instantsearch/vue3/es/src/components/Highlight.vue";

export default {
    name: 'search',
    components: {
        AisInstantSearch,
        AisSearchBox,
        AisHighlight,
        AisHits,
    },
    data() {
        return {
            searchClient: instantMeiliSearch(
                "my.server.address"
            ),
        };
    }
}
</script>

Thanks!

michaelhume commented 2 years ago

for the record - needed to dig one level deeper


<ais-hits>
    <template v-slot="item">
        <ais-highlight :hit="item.item" attribute="name" />
    </template>
</ais-hits>

bidoubiwa commented 2 years ago

Oh! Does it work now ?

bidoubiwa commented 2 years ago

fixed by #195

JohnDotOwl commented 2 years ago

@bidoubiwa https://codesandbox.io/s/ms-vue3-is-0293zk?file=/src/App.vue

When you type in search fast, it won't work it will backspace, i'm facing that issue even in vue 2, any idea what's causing it?

bidoubiwa commented 2 years ago

Yes! Unfortunately it comes from instantsearch-vue itself :/ see this issue https://github.com/meilisearch/instant-meilisearch/issues/644

meilisearch / meilisearch-vue

Make a Vue3 compatibility example #102

Vue 3

Working Vue 2