Search Recommendations in Nuxt with Algolia 🚀

Handling search results in web apps was always difficult for me. There are many cases that you should be aware of when implementing a search functionality like debouncing, performance, relations, indexes and many more. I was so glad when I found out about Algolia that there is a service that you can easily use to search through huge amounts of data very efficiently.

But Algolia is not only about searching through data as it also comes with useful Recommend API that allows you to recommend certain results based on the previous results.
Thanks to that, you can display search recommendations like related products for your users by requesting data from Algolia API and just returning the result. It's that simple.

In this tutorial, I want to show you how easy you can implement such search recommendations in Nuxt with Algolia 🚀

🤔 What is Recommend API?

Recommend is a JavaScript UI library, available on GitHub, for Algolia Recommend with components for displaying recommendations on your site. Recommendations encourage users to discover more of your catalog based on what they’re already interested in.

Recommend exposes an API client to fetch recommendations and a set of UI components for each Algolia Recommend model:

• Frequently Bought Together
• Related Products and Related Content
• Trending Products
• Trending Facets
• Looking Similar

Recommendations are an ideal complement to search experiences. If users land on an item which isn’t exactly what they were searching for, they can effortlessly jump to similar items. Conversely, when they find what they want, they can discover items that would complement their current selection.

🟢 Search recommendations in Nuxt with Algolia

If you have @nuxtjs/algolia module installed, using Recommend API is really straightforward.

First, you need to enable it in the module configuration:

export default defineNuxtConfig({
  modules: [
    ['@nuxtjs/algolia', {
      recommend: true,
    }]
  ]
})

And next, you need to call the useAlgoliaRecommend composable like following:

<script setup>
const { result, get } = useAlgoliaRecommend()
onMounted(async () => {
  await get({ queries: [{ indexName: 'test_index', model: 'related-products', objectID: 'dca44dd5-aea6-4553-a3af-fcbda981a2ef' }] });
})
</script>

Let's stop for a second to explain methods, properties, and so on.

The useAlgoliaRecommend composable returns the following:

• result will contain a value of a get method. It is reactive computed property that will be populated when a get method will fulfill. This result will have a form described here
• get method is used to get the recommendations based on the criteria described here and an optional parameter of requestOptions that you can check out here

It also accepts an optional key parameter:
key - if you need multiple useAlgoliaRecommend calls, add a unique key to get passed to the userState('recommend-result') underneath, so new calls won't overwrite old data.

And that's it! You will now get search result recommendations based on the previous search results and a selected model. It is so simple! ⚡️

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use Algolia Recommend API in Nuxt application to serve recommended search results to your users.

Take care and see you next time!

And happy coding as always 🖥️