meilisearch / meilisearch-vue

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

Add code sample for landing page #107

Closed bidoubiwa closed 2 years ago

bidoubiwa commented 2 years ago

fixes: #106

The code-sample requires to copy paste two parts of the code in two different files. A solution to only have to copy once is this:

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

<head>
  <meta charset="utf-8" />
</head>
<body>
    <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>
</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>