How to use ElasticSearch with Vue.js?

We will be using the ReactiveSearch-vue open-source library to build the Booksearch application in this post. This library offers a range of highly customizable rich UI components that can connect with an ElasticSearch index hosted anywhere. It provides scaffolding to build UIs such as Airbnb, Yelp, you name it. We will show how simple it is to build one by creating our Booksearch app.

ReactiveSearch for Vue is a port of ReactiveSearch (written for React) that has been downloaded over 125,000 times in the past year and currently powering hundreds of production search UIs. You can read more about the Vue.js announcement here:

Setting Up Frontend

Step 1: Base setup of Vue.js with ReactiveSearch

We will use Codesandbox.io to help us build our application in a step by step fashion. Open the above link and click on the Open Vue button.

CodeSandbox for Vue

If you instead want to develop this locally, you can also use vue-cli . You can read more about it here.

Install ReactiveSearch for Vue

Now we can add our dependency by clicking the Add Dependency button on CodeSandbox and searching for reactivesearch-vue , or if you are working locally you can install the package:

yarn add @appbaseio/reactivesearch-vue

Step 2: Adding components from ReactiveSearch library

Now that we have the dataset to play around with and we are also done with our setup, it’s time for adding components to our app.

We need to first register the library so that we can use the components in the main.js . We can do this via the use method of Vue :

import ReactiveSearch from "@appbaseio/reactivesearch-vue"; Vue.use(ReactiveSearch);

Connecting our Search Backend via ReactiveBase Component

All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which connects the components to an Elasticsearch index. We’ll apply this in the /src/App.vue file. You can read more about Reactivebase here.

The app and credentials are taken from my appbase.io app. In case you are using your own app, you can swap the values in L2 and L3.

Screen after adding ReactiveBase 👋

Use DataSearch Component for the main search

DataSearch creates a search box UI component that is connected to one or more database fields.

dataField prop values are the name of the field on which we want to apply our search.

iconPosition is used to align the search icon to right or left.

You can learn more about this component props over here.

Screen showing DataSearch Component 🎇

Use MultiList Component for Authors filter

We always want to read the book from our favorite authors so why not we built an option to select our favorite authors and search through the list of authors.

In this component, dataField attribute defines the data field to be connected to the component’s UI view. title attribute gives the heading to the component, while class attribute is used to provide the class name to the MultiList container. We can use react prop which allows components to watch each other and update their data reactively. For example, an Authors Filter component can update its data based on the selected fields in the Rating Filter component and DataSearch component.

You can learn more about the attributes of this component here.

Screen After adding MultiList ✨

Use RatingsFilter Component for Rating filter

We want only the best books for us, so why not create an option to filter the best-rated books on our dataset.

SingleRange component displays a curated list of items where only one item can be selected at a time. Each item represents a range of values, specified in the data prop of the component.

In this component, dataField attribute defines the data field to be connected to the component’s UI view. title attribute gives the heading to the component, while :data attribute is a collection of UI labels with associated start and end range values. You can read more about the attributes of component here.

:data is the shorthand for v-bind:data which is used to pass data to the components.

Screen after adding SingleRange 🚀

Step 3: Use ReactiveList Component for displaying Book Results

ReactiveList creates a data-driven result list UI component. This list can reactively update itself based on changes in other components or changes in the database itself.

ReactiveList Component

In this component, pagination is used to show the pagination at the bottom of the list. react is used to watch changes through different components like SingleRange and MultiList in our case. You can read more about this component properties here.

Notice slot and slot-scope it is used to get data from the child component to parent component. If you have used React it is like a render-prop . You can read more about it here.

Screen after adding the ReactiveList component ✨

Step 4: Styling the Application

We will now make use of some styles to make the application look elegant and professional. We can add styles to an element using class and adding their respective CSS in styles.css .

You can get all the styles here & add them to App.vue .

We will also make this app mobile responsive. To do this, we will use a variable to hide/show filters using a button when we are on a mobile viewport.

Adding styles and Methods & structuring to handle small screen 📱

Button to switch views