Algolia_vue_instant_search

App.vue

<template>
  <div class="wrapper">
    <h1 class="heading">{{ msg }}</h1>
    <ais-index
    app-id=“アプリケーションID"
    api-key=“APIキー"
    index-name=“インデックス名"
    >

      <!-- 検索フォーム -->
      <ais-search-box placeholder="スイーツを検索してください"></ais-search-box>
      <!--//End 検索フォーム -->

      <!-- 絞り込みメニュー -->
      <ais-refinement-list attribute-name="category"></ais-refinement-list>
      <!--//End 絞り込みメニュー -->

      <!-- 検索結果ヒット -->
      <ais-results>
        <template slot-scope="{ result }">
           <div class="card_box">
             <p class="card_img"><img :src="result.image" :alt="result.image_alt"></p>
             <p class="card_ttl"><ais-highlight :result="result" attribute-name="title"></ais-highlight></p>
             <p class="card_price">¥{{ result.price | priceDelimiter }}</p>
             <p class="card_des"><ais-highlight :result="result" attribute-name="description"></ais-highlight></p>
           </div>
        </template>
      </ais-results>
      <!--//End 検索結果ヒット -->

      <!-- 検索結果0件の場合 -->
      <ais-no-results>
        <template slot-scope="props">
          <i>{{ props.query }}</i>は見つかりませんでした。
        </template>
      </ais-no-results>
      <!--//End 検索結果0件の場合 —>

    </ais-index>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'スイーツ検索'
    }
  },
  filters: {
    priceDelimiter: function (value) {
      if (!value) {
        return '販売されていません'
      }
      return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
    }
  }
}
</script>