1. Tutorials

Algolia InstantSearch Don't Show Listing if No Query (Vue.js)

August 19, 2020

Algolia InstantSearch will show a default listing even though no query is entered.

To prevent listing if there is no query

import algoliasearch from 'algoliasearch/lite'

// this setup is required to prevent search on empty query
const searchClient = {
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
     // return empty result if no query
     return Promise.resolve({
        results: requests.map(() => ({
          hits: [],
          nbHits: 0,
          nbPages: 0,
          processingTimeMS: 0,
        })),
      });
    }

    return algoliaClient.search(requests);
  },
};

export default {
  data() {
    return {
      /*
      searchClient: algoliasearch(
        '3P********', // Application ID
        '0a5f4c5c0b18********************'  // Search-Only API Key
      ),
       */
      searchClient
    }
  },
};

NOTE: Refer to Setup Algolia InstantSearch on Nuxt/Vue for complete code.

❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.