Vue Storefront Algolia

# Usage

The examples below shows how to fetch the first page of records from Algolia's index you provided in the middleware.config.js file.

# Example

Import the useSearch composable from our package inside Vue's component:

import { useSearch } from '@vsf-enterprise/algolia';

In the Vue component, call composable inside the setup function to get properties and methods:

const { search, result, loading } = useSearch('your-unique-search-id');

Use the asynchronous search method to fetch records. By default, it will search the index provided inside the algolia.configuration.entities.product object in the middleware.config.js file.

onSSR(async () => {
  await search({
    query: ''
  });
});

The search response (opens new window) will be saved to the result object:

console.log(result.value); // Raw Response from Algolia

If you want to use an index different than product, pass its name to the entity field:

await search({
  query: '',
  entity: 'category'
});

# Searching records

Below are examples of different use cases of the search method.

# By query

await search({
  query: 't-shirt'
});

# By query and facet filter

await search({
  query: 't-shirt',
  parameters: {
    facets: ['color'],
    facetFilters: [
      'color:blue'
    ]
  }
});

# By query and populate available color facets

await search({
  query: 't-shirt',
  parameters: {
    facets: ['color']
  }
});

# By query and color and populate available color facets in a disjunctive way (multiselect)

await search({
  query: 't-shirt',
  parameters: {
    facetFilters: ['color:blue'],
    disjunctiveFacets: ['color']
  }
});

# By query and adding some API Parameter (opens new window)

await search({
  query: 't-shirt',
  parameters: {
    facetingAfterDistinct: false
  }
});

# Searching for facet values examples

# By query

await search({
  facetName: 'category',
  facetQuery: 'phone'
});

# By query with parameters

await search({
  facetName: 'category',
  facetQuery: 'phone',
  parameters: {
    // ...
  }
});

# Searching across multiple indices

# By query

await search({
  queries: [{
    entity: 'product',
    query: 'some string query'
  }]
});

# By query with adding requestOptions

In this case, parameters is not what it was in previous requests. It is Algolia's requestOptions (opens new window).

await search({
  queries: [{
     entity: 'product',
     query: 'some string query'
  }],
  parameters: {
    // requestOptions
  }
});

← Sorting →