vue innersearch

InnerSearch : composants Vue.js pour ElasticSearch

Qu’est-ce qu’InnerSearch ?

Un projet Open Source créé pour aider les développeurs travaillant avec vue.js et Elastic, leur donner la possibilité de créer des interfaces utilisateur de recherche en une heure.

InnerSearch est une suite de composants d'interface utilisateur tels que SearchBox, RefinementListFilter, Paginator et bien d'autres, construits avec Vue.js.

L'objectif est de créer rapidement de belles interfaces de recherche spécifiées à l'aide de composants déclaratifs sans être un expert d'ElasticSearch et de Vue.js.

Grâce aux accessoires de composants et aux fonctionnalités de slot de Vue.js, les composants sont facilement personnalisables

Un exemple d'interface utilisateur construit avec InnerSearch :

Code correspondant :

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

Démarrage rapide

Commander l'application de démarrage Innersearch

Voir la documentation complète

Installation via NPM

$ npm install --save vue-innersearch

Utilisation comme balise <script>

vue-innersearch a besoin de Vue et Vuex pour fonctionner

  < 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écouvrez comment utiliser la version UMD autonome dans notre exemple Jsbin

Introduction rapide

Démo en direct

Licence