How to add Algolia Search to Nuxt 3
Tags: algolia, nuxt, vue, search
Published: 2022-01-06 11:46:30

Nuxt 3 beta has proven to be a great tool for building websites by having a great Developer Experience thanks to many features like out of the box support for Vite, composables, SSR utilities and many more. It is still in beta, but this beta version is becoming more and more stable so more external modules are being created like Storyblok, Strapi, Pinia, etc. 

One of these modules has been released recently as well (surprise surprise, I have created this module :D) and it is a module that allows you to easily integrate Algolia search with Nuxt 3.

In this article I will guide you through the installation process so that you could jump right in and built your next (Nuxt ;)) project with it.

## What is Algolia?

Algolia is a Flexible Search & Discovery Hosted APIs that enables developers to build next generation apps with composable APIs, delivering relevant content in milliseconds.

![Algolia landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl3gqymcyhf3d5kqwsde.png)

In other words, Algolia is a very powerful search engine that works quite similar to Elasticsearch allowing for fast content delivery that matches current query.

You can read more about Algolia [here](https://www.algolia.com/)

## Nuxt 3 with Algolia

In this section I will guide you step by step through the process of integrating your Nuxt 3 project with Algolia.

*If you get lost at some point I have also prepared a github repository with the final project that you can take a look at [here](https://github.com/Baroshem/nuxt3-algolia)*

### Setting up a boilerplate Nuxt 3 project.

Let's start with generating an empty Nuxt 3 project. We can do so by typing following command in your terminal:

```bash
npx nuxi init nuxt3-algolia
```

When you open your new created project in your code editor you should see following result:

![Nuxt 3 project in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3qjn07woullb9ucvp4j.png)

Now, let's install dependencies of the project:

```bash
yarn # npm install
```

And start the project to see if it is working as expected:

```bash
yarn dev # npm run dev
```

If everything went good, we should see following result in our browser:

![Nuxt 3 in the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lpu627d4va91utt3ak6.png)

### Setup Algolia account and add data

In this step I will just mention that at this point you should have an Algolia account and an index filled with some test data or your own data. When it will be done, make sure to save `search api key` and `application ID` from your Algolia settings as they will be used in the next section.

For the sake of this tutorial I have generated some dummy data in Algolia for Ecommerce so my Search dashboard looks like follows:

![Algolia Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrwhfy11z8jhovv12tr8.png)

When generating a new index make sure to remember this name as it will be used in the next section.


### Adding Algolia to Nuxt 3

Algolia provides a very good [package](https://github.com/algolia/algoliasearch-client-javascript/tree/master/packages/algoliasearch) that allow to integrate JavaScript project with Algolia API. However, in this project we will be using a Nuxt module instead that provides similar functionality by using handy composables like useSearch, useAlgolia, etc.

https://github.com/nuxt-community/algolia-module

First, let's install Algolia module in our Nuxt 3 project like so:

```bash
yarn add @nuxtjs/algolia # npm install @nuxtjs/algolia
```

Next, add `@nuxtjs/algolia` to `modules` inside `nuxt.config.ts`:

```ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    ['@nuxtjs/algolia', {
      apiKey: '<YOUR_SEARCH_API_KEY>',
      applicationId: '<YOUR_APPLICATION_ID>'
    }]
  ],
})
```

By adding the module to modules, we can automatically import composables so that you can use them in your application without the need to import them.

After that, add following script setup section in your `app.vue`:

```js
<script setup>
const { result, search } = useAlgoliaSearch('test_index') // pass your index as param

onMounted(async () => {
  await search({ query: 'Samsung' });
})
</script>
```

Let's stop here for a second to discuss in more details what is going on here.

1. We are calling a `useAlgoliaSearch` composable and we pass a name of the index created in the Algolia dashboard as a parameter. 
2. We are destructuring the `result` property and `search` method from this composable.
3. `search` method will be used to call algoliasearch to search for the certain query.
4. `result` is a reactive computed value containing the result of the search method.
5. We are calling a `search` method inside `onMounted` lifecycle hook asynchronously and passing a query as a object property with a value of 'Samsung'

To display the result in the browser you can add result in your template to see the actual result of the search:

```vue
<template>
  <div>
    {{ result }}
    <NuxtWelcome />
  </div>
</template>
```

As a result of this operation, you should see following result in your browser:

![Algolia result in Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfeehzcf12re6idg77n6.png)

Wow, that's a lot of data and it was delivered in miliseconds. And that's it. You have now access to data delivered by Algolia that can be used to display some results to the users in a visually acceptable form (not in a raw data :D ). 

## Summary

You have managed to integrate Algolia with Nuxt 3 application. Well done! In this introduction article I wanted to focus on how easy it is to integrate these tools together thanks to the module but bare in mind that for the real application you would need a Vue component that would handle the search (for example https://github.com/algolia/vue-instantsearch that I will be integrating in the upcoming weeks) or your custom component but this should be a solid start for working with Algolia :)

If you liked this article and a module make sure to drop a reaction, github star or/and Twitter follow ❤️

## Bonus

* [Nuxt3-Algolia repository](https://github.com/Baroshem/nuxt3-algolia)

* There is also another composable available in this module that would allow you to write your own composables or logic related to Algola search:

```js
<script setup>
const algolia = useAlgoliaRef() 
</script>
```

`algolia` is an instance of `algoliasearch` client so by calling `useAlgolia` you have access to all methods available to `algoliasearch` as well.

*BTW, if you find yourself developing a new composable or function based on this, make sure to ping me so that we can put into the module and provide this functionality to other users as well :)*