<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typesense-instantsearch-adapter.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-instantsearch.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">

<div id="app">
  <template>
   <ais-instant-search :search-client="searchClient" index-name="multiple_choice_questions">
      <ais-search-box />

      <ais-hits>

        <template slot="item" slot-scope="{ item }">
          <h2>{{ item.question }}</h2>
        </template>

      </ais-hits>
    </ais-instant-search>
  </template>
</div>

<script>
  const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
    server: {
      apiKey: "xxx", // Be sure to use the search-only-api-key
      nodes: [
        {
          host: "ivtxh84dyluoznpfp-1.a1.typesense.net",
          port: "443",
          protocol: "https"
        }
      ]
    },
    // The following parameters are directly passed to Typesense's search API endpoint.
    //  So you can pass any parameters supported by the search endpoint below.
    //  queryBy is required.
    additionalSearchParameters: {
      queryBy: "question"
    }
  });
  const searchClient = typesenseInstantsearchAdapter.searchClient;

new Vue({
    el: '#app',
    data: {
      searchClient: typesenseInstantsearchAdapter.searchClient,
      item: {}
    }
  })


</script>