Trying to implement Algolia InstantSearch using Laravel Scout + Vue.js - Blank Screen

Trying to implement Algolia InstantSearch using Laravel Scout + Vue.js - Blank Screen

Hey there. I am trying to get Algolia working on my test app. Here’s what I’ve done so far:

  • installed the algolia/scout package
  • enabled scout in my providers array
  • configured scout by publishing the config file
  • configured my API keys
  • made a model or two searchable by adding the Laravel\Scout\Searchable trait

Everything synced up fine and dandy into Algolia.

Then, I started following the Laracast video for “Incredibly Fast Search with Algolia and Vue.” From that I ran:

npm install vue-instantsearch

Updated my app.js file:

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue';
import App from './App.vue'

import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);

new Vue({
	el: '#app',
	render: h => h(App)
});

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

Within my blade view, I have:

    <ais-index
    app-id="MYID"
    api-key="MYKEY"
    index-name="MYINDICE"
    >
    <ais-input placeholder="Search users..."><ais-input>
    <ais-results>
        <template scope="{ result }">
        <h2><ais-highlight :result="result" attribute-name="name"></ais-highlight></h2>
        </template>
    </ais-results>
    </ais-index>
    </div>
    </ais-input>

When I load up the page, I can see the search box (“Search users…”), but I cannot see anything else in terms of output when entering in a search term.

I haven’t worked with Vue before, so any assistance would be greatly appreciated!

Hey there,

It looks like you have an orphan </ais-input> at the end of your code.

Otherwise everything looks pretty good.

Let me know if it works when your removed it.

Please, also provide any eventual error message you might have in your console.

Cheers,

Thanks for the reply, @rayrutjes.

I’ve removed the orphan and everything seems to be working now.

One other issue I had that prevented the code from working was in trying to access my own data. Within the line:

<ais-highlight :result="result" attribute-name="name"></ais-highlight>

I had missed changing the attribute-name to something that my data actually held—in this case, username.

Thank you very much for your help. It was one of those days!