Setup Algolia InstantSearch on Nuxt/Vue
August 19, 2020I shall setup Algolia InstantSearch on client side only.
Install
npm install vue-instantsearch algoliasearch instantsearch.css
Setup
Create plugins/init-client.js
import Vue from 'vue'
import InstantSearch from 'vue-instantsearch'
Vue.use(InstantSearch)
Edit nuxt.config.js
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/init-client', mode: 'client' },
// ...
],
// ...
}
Usage
Create pages/search.vue
. Replace
index-name
(UnderIndices
in Algolia Dashboard)Application ID
(UnderAPI Keys
in Algolia Dashboard)Search-Only API Key
A few changes are made
- Prevent search/listing if there if no query
- Show result in row instead of grid
- Hide pagination if only 1 page of result
<template>
<div>
<client-only>
<ais-instant-search
:search-client="searchClient"
index-name="live"
>
<ais-search-box />
<ais-hits>
<div slot="item" slot-scope="{ item }">
<!-- show name -->
<h2><ais-highlight attribute="name" :hit="item"/></h2>
<!-- show content -->
<div>{{ item.content }}</div>
<!-- show content with highlight -->
<div><ais-highlight attribute="content" :hit="item"/></div>
<!-- show content with snippet: need to setup Snipetting in Indices -->
<div><ais-snippet attribute="content" :hit="item"/></div>
</div>
</ais-hits>
<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>
</client-only>
</div>
</template>
<script>
import algoliasearch from 'algoliasearch/lite'
import 'instantsearch.css/themes/algolia-min.css'
// import 'instantsearch.css/themes/reset-min.css'
const algoliaClient = algoliasearch(
'3P********', // Application ID
'0a5f4c5c0b18********************' // Search-Only API Key
)
// this setup is required to prevent search on empty query
const searchClient = {
search(requests) {
if (requests.every(({ params }) => !params.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
}
},
};
</script>
<style>
/* add bottom margin to search box */
.ais-SearchBox {
margin-bottom: 1em;
}
/* change search result from grid/box to row */
.ais-Hits-item {
width: 100%;
border: none;
box-shadow: none;
}
/* prevent highlight overwrite font-size */
.ais-Highlight {
font-size: inherit;
}
.ais-Highlight-highlighted {
font-size: inherit;
}
</style>
More
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn