Usage


This module exposes composables that are auto-imported by Nuxt 3.

For more details check out the official documentation of initializing algolia client here

useAlgoliaSearch

Use this composable to search the index by certain query and optional request options

<script setup>const { result, search } = useAlgoliaSearch('test_index') // pass your index name as paramonMounted(async () => {  await search({ query: 'Samsung' });})</script>

This composable works also for SSR applications and requests like this:

<script setup lang="ts">const { result, search } = useAlgoliaSearch('test_index') // pass your index name as paramconst { data } = await useAsyncData('ssr-search-results', () => search({ query: 'Samsung' }))</script>
  • result will contain a value of a search method. It is reactive computed property that will be populated when a search method will fulfill. This result will have a form described here
  • search method is used to fetch the results by the index and populates result reactive property. This method requires a parameter query and accepts an optional parameter of requestOptions that you can check out here

For more details check out the official documentation of this method here

useAsyncAlgoliaSearch

Async wrapper around useAlgoliaSearch composable that decreases the number of steps needed to use Algolia with useAsyncData while maintaining the same functionality. The response will have a form described here and will be wrapped around useAsyncData so you will have access to data, error, and other properties.

<script setup lang="ts">const { data, error } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })</script><template>  <div>{{ data.value.hits }}</div></template>

This composable accepts an object as a param with following properties:

  • indexName - the name of you index in Algolia dashboard. For more details about initializing index check out the official documentation here. If you passed a global index in your module configuration, this property can be skipped.
  • query - a keyword, sentence, or text that you want to search the index with.
  • key - if you need multiple asyncAlgoliaSearch calls in a single page, add a unique key to get passed to the useAsyncData underneath, so new calls won't overwrite old data.
  • requestOptions optional object with options for the request like filters. You can check more about is here

If you want to fetch search results filtered by some facet values you can do so like following:

const { result, search } = useAlgoliaSearch("INDEX_NAME");await search({ query: input_string, requestOptions: {facetFilters: ["tags:happy"]} });

useAlgoliaFacetedSearch

Use this composable to search using facet values like category, phone.

In order for this to work, you have to add facet attributes in your dashboard or via code. Read more about it here
<script setup>const { result, search } = useAlgoliaFacetedSearch('test_index')onMounted(async () => {  const facet = {     name: 'category',    query: 'phone'   }  await search({ facet })})</script>
  • result will contain a value of a search method. It is reactive computed property that will be populated when a search method will fulfill. This result will have a form described here
  • search method is used to fetch the results by the certain facet value pairs like name and query, and populates result reactive property. This method requries a parameter for facet and accepts an optional parameter of requestOptions that you can check out here

For more details about using this search method check out the official documentation here

useAlgoliaRecommend

Use this composable to get the recommendations matching certain criteria optional request options.

In order to make this composable work, make sure to setup a recommend property to true in algolia configuration in nuxt.config.ts.
<script setup>const { result, get } = useAlgoliaRecommend()onMounted(async () => {  await get({ queries: [{ indexName: 'test_index', model: 'related-products', objectID: 'dca44dd5-aea6-4553-a3af-fcbda981a2ef' }] });})</script>

This 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

This composable 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.

For more details check out the official documentation of this method here

useAlgoliaRef

By calling this composable you have access to algoliasearch instance anywhere in your app

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

useAlgoliaInitIndex

Use this composable to initialize index you would like to search through. It accepts an index name as a parameter

<script setup>const algoliaIndex = useAlgoliaInitIndex('test')console.log(algoliaIndex.appId)</script>

For more details about initializing index check out the official documentation here