useProductSuggestions(id?: string)

The useProductSuggestions() composable allows for storing and searching for product suggestions.

Be careful about shared state

You should pass a unique ID as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same ID (or those that lack it) will share the same state, even on different pages.


Main data object populated by the load() method.


const suggestions: ComputedRef<Suggestion[]>;

References: Suggestion


Indicates whether any of the composable methods is in progress.


const loading: ComputedRef<boolean>;


Contains errors thrown by any of the composable methods.


const error: ComputedRef<UseProductSuggestionsError>;

References: UseProductSuggestionsError


Fetches suggestions for a given searchTerm and writes them to the suggestions property. Under the hood, it sends a request to the getSuggestions API endpoint.


interface LoadProductSuggestionsProps {
  searchTerm: string;
  max?: number;
async function load(props: LoadProductSuggestionsProps): Promise<void>;

References: LoadProductSuggestionsProps


In this example, we are creating a simple wrapper for the load() method. It accepts a single term param and calls the load() method with the right arguments. We are also exposing the loaded suggestions to the templates by returning them from the setup() method.

import { useProductSuggestions } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { load, suggestions } = useProductSuggestions('unique-id');
    const loadSuggestionsForTerm = async (term) => {
      await load({ searchTerm: term, max: 5 });
    return { loadSuggestionsForTerm, suggestions };


Resets the composable's state. It Performs no async operations under the hood.


function reset(): void;