InnerSearch- A Suit of Vue.js Components for ElasticSearch

InnerSearch is an Open Source project created to help developers working with vue.js and Elastic, giving them the possibility to create search UIs within the hour. InnerSearch is a suite of UI components like SearchBox, RefinementListFilter, Paginator, and many others to come built with Vue.js.

The aim is to rapidly create beautiful specified search interfaces using declarative components without being an ElasticSearch and Vue.js expert.

Installation

Via Npm
You can install this via npm by running this command.

$ npm install --save vue-innersearch

Using as script tag

vue-innersearch needs Vue and Vuex to work

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

Getting Started

Use the vue-innersearch plugin

You need to tell Vue to use the Vue InnerSearch plugin so that all components are available

import InnerSearch from 'vue-innersearch';

Vue.use(InnerSearch);

If you only want specific components like SearchBox and Hits components, you can do the following.

Note: Don’t forget to import the Generics mixin component.

import {Searchbox, Hits, Generics} from 'vue-innersearch';

Vue.component('searchbox', Searchbox);
Vue.component('hits', Hits);
Vue.mixin(Generics);

Usage Example

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

Components list

• SearchBox
• RefinementListFilter
• SearchButton
• Hits
• Paginate
• SearchDataList
• NumericListFilter

You can visit the details & source code of this package on its Github.