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

Aug 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 queryconst 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 via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.