yarn add @nuxtjs/algolia # npm install @nuxtjs/algolia
Next, add @nuxtjs/algolia to modules inside nuxt.config.ts:
export default defineNuxtConfig({
modules: ['@nuxtjs/algolia'],
})
Create .env file and add following variables to it (the module will detect them automatically and serve them to algoliasearch package):
ALGOLIA_API_KEY="0fd1c4eba2d831788333e77c9d855f1d"
ALGOLIA_APPLICATION_ID="AGN9HEEKF3"
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.
- We are calling a
useAlgoliaSearch composable and we pass a name of the index created in the Algolia dashboard as a parameter.
- We are destructuring the
result property and search method from this composable.
-
search method will be used to call algoliasearch to search for the certain query.
-
result is a reactive computed value containing the result of the search method.
- 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:
Algolia result in 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 ).
Oh wait, there's more?!
Yes of course! This module can do much more for you. Let's say, that instead of calling the search method on onMounted lifecycle hook (or basically anywhere in the broweser), you would like to search for results on the server (SSR)? With the latest version, you can do so very easily:
<script setup lang="ts">
const { data } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
</script>
<template>
<div>{{ data }}</div>
</template>
The structure of the data here is a bit different because useAsyncAlgoliaSearch is actually a wrapper around Nuxt useAsyncData composable so you have access to all properties returned by this composable with data fetching from Algolia (data, error, loading, etc).
Or maybe you would like to get the recommendations about the recent search? The module got you covered with a usage of algolia recommend feature:
<script setup>
const { result, get } = useAlgoliaRecommend()
onMounted(async () => {
await get({ queries: [{ indexName: 'test_index', model: 'related-products', objectID: 'dca44dd5-aea6-4553-a3af-fcbda981a2ef' }] });
})
</script>
Or maybe you would like to integrate Vue Instantsearch in your app? Here you go!
- Add necessary configuration to the module:
export default defineNuxtConfig({
modules: ['@nuxtjs/algolia'],
algolia: {
instantSearch: {
theme: 'algolia'
}
}
})
- Add start using the Vue Instantsearch components in your app
<script setup lang="ts">
const indexName = 'test_index'
const algolia = useAlgoliaRef()
import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es/index.js'
</script>
<template>
<div>
<ais-instant-search :index-name="indexName" :search-client="algolia">
<ais-search-box />
<ais-hits />
</ais-instant-search>
</div>
</template>
And there is more! Check out all available options here
Bonus
I have added a new section to the module docs about content related to this module that you can check out here