1. Tutorials

Algolia InstantSearch Hide Pagination if Only 1 Page (Vue.js)

August 19, 2020 
<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="live"
  >

    <ais-state-results>
      <template slot-scope="{ state: { query }, results: { hits, nbPages } }">
        <!-- show no result if query with no hits -->
        <div v-if="query && hits.length == 0">No results</div>
        <div v-else></div>

        <!-- hide pagination if 1 or less pages -->
        <ais-pagination v-if="nbPages > 1"/>
      </template>
    </ais-state-results>

  </ais-instant-search>
</template>

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.