How to add Algolia Search to Nuxt 3

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.

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

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

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:

npx nuxi init nuxt3-algolia

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

Now, let's install dependencies of the project:

yarn # npm install

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

yarn dev # npm run dev

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

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:

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

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

Next, add @nuxtjs/algolia to modules inside nuxt.config.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:

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

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

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

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

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

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

Comments

[Jakub Andrzejewski]

A new version of the module is out!
github.com/nuxt-commerce/algolia/r...

[Sharkfin]

Thanks Jakub!