Issues getting vue instantsearch with Laravel

I am following the Algolia documentation for integrating Laravel Scout, but am having some issues with getting Vue InstantSearch to work. The code in my blade is:

<div id="app">
  <!-- In a default Laravel app, Vue will render inside an #app div -->
  <ais-instant-search
    :search-client="searchClient"
    index-name="{{ (new App\Rule)->searchableAs() }}"
  >     

  </ais-instant-search>
  
</div>

<script src="js/app.js"></script>

<script>
new Vue({
  data: function() {
    return {
      searchClient: algoliasearch(
        '{{ config('scout.algolia.id') }}',
        '{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Rule::class) }}',
      ),
    };
  },
  el: '#app',
});
</script>

I get the following error messages in the console when I inspect the page:

app.js:71920 [Vue warn]: Property or method “searchClient” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in )
warn @ app.js:71920
warnNonPresent @ app.js:73333
has @ app.js:73378
(anonymous) @ VM5305:3
Vue._render @ app.js:74831
updateComponent @ app.js:75347
get @ app.js:75758
Watcher @ app.js:75747
mountComponent @ app.js:75354
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:80324
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:83209
Vue._init @ app.js:76292
Vue @ app.js:76358
./resources/js/app.js @ app.js:83354
webpack_require @ app.js:20
0 @ app.js:83423
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:71920 [Vue warn]: Invalid prop: type check failed for prop “searchClient”. Expected Object, got Undefined

found in

—>

warn @ app.js:71920
assertProp @ app.js:73000
validateProp @ app.js:72927
loop @ app.js:75944
initProps @ app.js:75975
initState @ app.js:75918
Vue._init @ app.js:76280
VueComponent @ app.js:76427
createComponentInstanceForVnode @ app.js:74576
init @ app.js:74407
createComponent @ app.js:77253
createElm @ app.js:77200
createChildren @ app.js:77328
createElm @ app.js:77229
patch @ app.js:77789
Vue._update @ app.js:75226
updateComponent @ app.js:75347
get @ app.js:75758
Watcher @ app.js:75747
mountComponent @ app.js:75354
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:80324
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:83209
Vue._init @ app.js:76292
Vue @ app.js:76358
./resources/js/app.js @ app.js:83354
webpack_require @ app.js:20
0 @ app.js:83423
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:71920 [Vue warn]: Error in data(): "Error: The searchClient option is required.

See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"

found in

—>

warn @ app.js:71920
logError @ app.js:73179
globalHandleError @ app.js:73174
handleError @ app.js:73134
getData @ app.js:76027
initData @ app.js:75982
initState @ app.js:75921
Vue._init @ app.js:76280
VueComponent @ app.js:76427
createComponentInstanceForVnode @ app.js:74576
init @ app.js:74407
createComponent @ app.js:77253
createElm @ app.js:77200
createChildren @ app.js:77328
createElm @ app.js:77229
patch @ app.js:77789
Vue._update @ app.js:75226
updateComponent @ app.js:75347
get @ app.js:75758
Watcher @ app.js:75747
mountComponent @ app.js:75354
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:80324
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:83209
Vue._init @ app.js:76292
Vue @ app.js:76358
./resources/js/app.js @ app.js:83354
webpack_require @ app.js:20
0 @ app.js:83423
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:73183 Error: The searchClient option is required.

See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/
at new InstantSearch (app.js:21946)
at instantsearch (app.js:21810)
at VueComponent.data (app.js:71277)
at getData (app.js:76025)
at initData (app.js:75982)
at initState (app.js:75921)
at VueComponent.Vue._init (app.js:76280)
at new VueComponent (app.js:76427)
at createComponentInstanceForVnode (app.js:74576)
at init (app.js:74407)
logError @ app.js:73183
globalHandleError @ app.js:73174
handleError @ app.js:73134
getData @ app.js:76027
initData @ app.js:75982
initState @ app.js:75921
Vue._init @ app.js:76280
VueComponent @ app.js:76427
createComponentInstanceForVnode @ app.js:74576
init @ app.js:74407
createComponent @ app.js:77253
createElm @ app.js:77200
createChildren @ app.js:77328
createElm @ app.js:77229
patch @ app.js:77789
Vue._update @ app.js:75226
updateComponent @ app.js:75347
get @ app.js:75758
Watcher @ app.js:75747
mountComponent @ app.js:75354
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:80324
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:83209
Vue._init @ app.js:76292
Vue @ app.js:76358
./resources/js/app.js @ app.js:83354
webpack_require @ app.js:20
0 @ app.js:83423
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:71920 [Vue warn]: Error in created hook: “TypeError: Cannot read property ‘client’ of undefined”

found in

—>

warn @ app.js:71920
logError @ app.js:73179
globalHandleError @ app.js:73174
handleError @ app.js:73134
invokeWithErrorHandling @ app.js:73157
callHook @ app.js:75500
Vue._init @ app.js:76282
VueComponent @ app.js:76427
createComponentInstanceForVnode @ app.js:74576
init @ app.js:74407
createComponent @ app.js:77253
createElm @ app.js:77200
createChildren @ app.js:77328
createElm @ app.js:77229
patch @ app.js:77789
Vue._update @ app.js:75226
updateComponent @ app.js:75347
get @ app.js:75758
Watcher @ app.js:75747
mountComponent @ app.js:75354
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:80324
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:83209
Vue._init @ app.js:76292
Vue @ app.js:76358
./resources/js/app.js @ app.js:83354
webpack_require @ app.js:20
0 @ app.js:83423
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:73183 TypeError: Cannot read property ‘client’ of undefined
at VueComponent.created (app.js:71277)
at invokeWithErrorHandling (app.js:73149)
at callHook (app.js:75500)
at VueComponent.Vue._init (app.js:76282)
at new VueComponent (app.js:76427)
at createComponentInstanceForVnode (app.js:74576)
at init (app.js:74407)
at createComponent (app.js:77253)
at createElm (app.js:77200)
at createChildren (app.js:77328)
logError @ app.js:73183
globalHandleError @ app.js:73174
handleError @ app.js:73134
invokeWithErrorHandling @ app.js:73157
callHook @ app.js:75500
Vue._init @ app.js:76282
VueComponent @ app.js:76427
createComponentInstanceForVnode @ app.js:74576
init @ app.js:74407
createComponent @ app.js:77253
createElm @ app.js:77200
createChildren @ app.js:77328
createElm @ app.js:77229
patch @ app.js:77789
Vue._update @ app.js:75226
updateComponent @ app.js:75347
get @ app.js:75758
Watcher @ app.js:75747
mountComponent @ app.js:75354
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:80324
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:83209
Vue._init @ app.js:76292
Vue @ app.js:76358
./resources/js/app.js @ app.js:83354
webpack_require @ app.js:20
0 @ app.js:83423
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:71920 [Vue warn]: Error in nextTick: “TypeError: Cannot read property ‘started’ of undefined”

found in

—>

warn @ app.js:71920
logError @ app.js:73179
globalHandleError @ app.js:73174
handleError @ app.js:73134
(anonymous) @ app.js:73277
flushCallbacks @ app.js:73201
Promise.then (async)
timerFunc @ app.js:73228
nextTick @ app.js:73285
Vue.$nextTick @ app.js:74804
mounted @ app.js:71277
invokeWithErrorHandling @ app.js:73149
callHook @ app.js:75500
insert @ app.js:74432
invokeInsertHook @ app.js:77621
patch @ app.js:77838
Vue._update @ app.js:75226
updateComponent @ app.js:75347
get @ app.js:75758
Watcher @ app.js:75747
mountComponent @ app.js:75354
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:80324
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:83209
Vue._init @ app.js:76292
Vue @ app.js:76358
./resources/js/app.js @ app.js:83354
webpack_require @ app.js:20
0 @ app.js:83423
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:73183 TypeError: Cannot read property ‘started’ of undefined
at VueComponent. (app.js:71277)
at Array. (app.js:73275)
at flushCallbacks (app.js:73201)

So there seems to be an issue with defining searchClient. Any advice?

Hi @nick.murphy, it’s hard to tell from the code your sent what’s wrong, it looks ok to me.
Could you provide a minimal example on Github which I can try and see what’s wrong?

Hi @Youcef - thanks for the reply. I’ve now got it working, but bizarrely only when I alter the code as follows, so that app.js is called before the content. Do you know why this may be?:

<script src="js/app.js"></script>


<div id="app">
  <!-- In a default Laravel app, Vue will render inside an #app div -->
  <ais-instant-search
    :search-client="searchClient"
    index-name="{{ (new App\Rule)->searchableAs() }}"
  >
    <ais-search-box placeholder="Search the rules..."></ais-search-box>
    
    <ais-hits>
      <template slot="item" slot-scope="{ item }">
        <div>
          <h1>Rule @{{ item.ruleid }} @{{ item.title }}</h1>
          <h4>@{{ item.content }}</h4>
        </div>
      </template>
    </ais-hits>
  </ais-instant-search>


</ais-state-results>
</div>


<script>
new Vue({
  data: function() {
    return {
      searchClient: algoliasearch(
        '{{ config('scout.algolia.id') }}',
        '{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Rule::class) }}',
      ),
    };
  },
  el: '#app',
});
</script>

I would say it depends on what’s inside your app.js :slight_smile:
If you have a github repo we can look at, it would definitely help.

Apart from that, I noticed you have an typo: the “” has no matching opening tag!