vue innersearch

InnerSearch : ElasticSearch 用の Vue.js コンポーネント

インナーサーチとは何ですか?

vue.js と Elastic を使用する開発者を支援するために作成されたオープン ソース プロジェクトで、1 時間以内に検索 UI を作成できるようになります。

InnerSearch は、SearchBox、RefinementListFilter、Paginator など、Vue.js で構築される他の多くの UI コンポーネントのスイートです。

目的は、ElasticSearch や Vue.js の専門家でなくても、宣言型コンポーネントを使用して、指定された美しい検索インターフェイスを迅速に作成することです。

Vue.js のコンポーネント プロパティとスロット機能のおかげで、コンポーネントは簡単にカスタマイズ可能です

InnerSearch を使用して構築された UI の例:

対応するコード:

 < div class =" columns " >
    < div class =" column is-one-fifth " >
        < div >
            < refinement-list-filter :field =" 'state' " > </ refinement-list-filter >
            < refinement-list-filter :field =" 'gender' " > </ refinement-list-filter >
        </ div >
    </ div >
    < div class =" column " >
        < div >
            < searchbox :field =" 'firstname' " > </ searchbox >
            < div style =" margin: 20px auto;width: 90% " >
                < search-button > </ search-button >
                < reset-button > </ reset-button >
            </ div >
            < hits > </ hits >

            < paginate :previousText =" 'Previous page' " :nextText =" 'Next page' " :size =" 10 " > </ paginate >
        </ div >
     </ div >
</ div > 

クイックスタート

innersearch スターター アプリをチェックアウトする スターター アプリ

完全なドキュメントを参照

NPM 経由でインストールする

$ npm install --save vue-innersearch

<script>タグとして使用する

vue-innersearch が動作するには Vue と Vuex が必要です

  < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js " > </ script >
  < script src =" https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js " > </ script >
  < script src =" https://unpkg.com/[email protected]/vue-innersearch.min.js " > </ script >

Jsbin の例でスタンドアロン UMD ビルドの使用方法を確認してください。

簡単な紹介

ライブデモ

ライセンス