vue innersearch

InnerSearch: componentes Vue.js para ElasticSearch

O que é InnerSearch?

Um projeto de código aberto criado para ajudar os desenvolvedores que trabalham com vue.js e Elastic, dando-lhes a possibilidade de criar UIs de pesquisa em uma hora.

InnerSearch é um conjunto de componentes de UI como SearchBox, RefinementListFilter, Paginator e muitos outros que vêm construídos com Vue.js.

O objetivo é criar rapidamente belas interfaces de pesquisa especificadas usando componentes declarativos sem ser um especialista em ElasticSearch e Vue.js.

Graças também aos recursos de componentes e slots do Vue.js, os componentes são facilmente personalizáveis

Um exemplo de UI construído com InnerSearch:

Código correspondente:

 < 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 > 

Início rápido

Confira o aplicativo inicial do aplicativo innersearch

Veja a documentação completa

Instalando via NPM

$ npm install --save vue-innersearch

Usando como tag <script>

vue-innersearch precisa de Vue e Vuex para funcionar

  < 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 >

Dê uma olhada em como usar a construção UMD independente em nosso exemplo Jsbin

Introdução rápida

Demonstração ao vivo

Licença