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:
Vue School Link
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 π₯οΈ