CODEWITHSUNDEEP
algoliavue-instant-search
Ravi Jayaraman
Ravi Jayaraman

Reputation: 196

Integrating VueInstantSearch Algolia

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.

Upvotes: 0

Views: 227

Answers (2)

Shoaib Sharif
Shoaib Sharif

Reputation: 1

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.

Upvotes: 0

Rafal Adam Krohne
Rafal Adam Krohne

Reputation: 547

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.

Upvotes: 0

Related Questions