Nothing displays

I’m new to Algolia and I’m trying to integrate Algolia search into my Laravel application. I’m not sure what I’m doing wrong, but I can’t seem to get it to work despite following the documentation on the Algolia website.

I’ve been following the algolia documentation, and I can see my content in the index on Algolia so I know that it’s there, I just can’t get the search to render at all.

in app.js I have:

// other code here.

window.Vue = require('vue');
import algoliasearch from 'algoliasearch/lite';
import InstantSearch from 'vue-instantsearch/vue3/es';


and then in my blade file I have:

<div id="app">
        index-name="{{ (new \App\Models\Thread)->searchableAs() }}"
        <ais-search-box placeholder="Search threads..."></ais-search-box>

            <template v-slot:item="{ item }">
                    <h1>@{{ item.title }}</h1>

    new Vue({
        data: function() {
            return {
                searchClient: algoliasearch(
        el: '#app',

In my editor, however, I get a notice that unknown html tag <ais-instant-search>, so I’m pretty sure this is where the issue lies, but I’ve double checked that I’ve installed all of the requirements as per the Algolia guide?

When I visit the page with the search on, it is just a blank screen. Anyone know what I’m potentially doing wrong? (Script tags are done correctly, just couldn’t post this with script tags).