Integrating VueInstantSearch Algolia

Question

I'm new to Algolia instant-search and other components. I've created a separate component for Algolia.

I've run the npm command to install dependencies

npm install vue-instantsearch algoliasearch instantsearch.css

Below is the code for template in the component SearchBox.

<template>
    <ais-instant-search
        id="my-search-box"
        :search-client="searchClient"
        index-name="index-name"
    >
        <!-- Other search components go here -->
        <ais-search-box placeholder="string" submit-title="string" />
    </ais-instant-search>
</template>

<script>
import algoliasearch from "algoliasearch/lite";

export default {
    name: "my-component",
    data() {
        return {
            searchClient: algoliasearch(
                "key",
                "id"
            )
        };
    }
};
</script>

The app.js looks like this

import VueInstantSearch from 'vue-instantsearch';

Vue.use(VueInstantSearch);

I followed the documentation provided by still could not get the search box to appear. Could anyone help me know the problem here.

FYI: I'm exporting this component into another parent component.

Answer 1

This is not going to sound too helpful but I've had the same issue with implementing Algolia with Nuxt.js. I've been following the documentation too and it wasn't helpful at all. Google hasn't been helping much either.

I've tried to give up Nuxt.js and try to implement in Vue but the Vue documentation is even worse! :/

After a whole day, I've finally made it work with Nuxt.js I think there could be a bug somewhere in the code or documentation is very old comparing to all updated code and plugins.

I'm happy to give you a hand with Nuxt.js if you're considering it.

Answer 2

One thing I have noticed you have misplaced the value id and key.

Do this:

import algoliasearch from "algoliasearch/lite";
data() {
  return {
    searchClient: algoliasearch("id","key")
  };
}

Instead of:

import algoliasearch from "algoliasearch/lite";
data() {
  return {
    searchClient: algoliasearch("key","id")
  };
}

That should work with Vue cli for vue-instantsearch@^3.0.0. As for Nuxtjs this way doesn't work. I have found official documentation work for me.