search

meilisearch / meilisearch-vue

https://www.meilisearch.com/
MIT License
154 stars 13 forks source link

Update vue 3 getting started sample code #120

Closed amit-ksh closed 1 year ago

amit-ksh commented 1 year ago

Pull Request

Related issue

Fixes #117

What does this PR do?

Update the vue 3 getting started sample code from vue 2 in README.md

PR checklist

Please check if your PR fulfills the following requirements:

Thank you so much for contributing to Meilisearch!

bidoubiwa commented 1 year ago

Hello @amit-ksh, Thank you very much for contributing to Meilisearch :heart:. However, I am not available on the weekend, but I will be back on Monday :blush:.

PS: This message was sent automatically!

bidoubiwa commented 1 year ago

Hey @amit-ksh ! Thanks for waiting, your PR flew under the radar! I'll be reviewing it ASAP!

bidoubiwa commented 1 year ago

I tried your sample out but unfortunately it does not work. Any idea why?

<!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://unpkg.com/vue@3/dist/vue.global.js"></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')
        }
      }
    })
    .use(VueInstantSearch)
    .mount("#app");
</script>

</html>
amit-ksh commented 1 year ago

I don't know why it's not working, app is importing all the packages correctly but not able to use it plugin as well as the styled components.

bidoubiwa commented 1 year ago

Is it working for you?

amit-ksh commented 1 year ago

No, it's not working for me also. In the console, warning is logging out for meilisearch-instantsearch package

bidoubiwa commented 1 year ago

😕 Tell me if you achieve to make it work. Meanwhile I put this in draft.

amit-ksh commented 1 year ago

OK!

amit-ksh commented 1 year ago

Hey @bidoubiwa! I fix the sample code, would you review it again?

bidoubiwa commented 1 year ago

This message is sent automatically

Thanks again for contributing to Meilisearch :heart: If you are participating in Hacktoberfest, and you would like to receive some gift from Meilisearch too, please complete this form.

amit-ksh commented 1 year ago

I will definitely give a try

amit-ksh commented 1 year ago

vue meilisearch app

amit-ksh commented 1 year ago

Made all the requested changes.

amit-ksh commented 1 year ago

@bidoubiwa could you review my changes please?

amit-ksh commented 1 year ago

Done!

bidoubiwa commented 1 year ago

This message is sent automatically

Thanks again for contributing to Meilisearch :heart: If you are participating in Hacktoberfest, and you would like to receive some gift from Meilisearch too, please complete this form.