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';

Vue.use(InstantSearch);

and then in my blade file I have:

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

        <ais-hits>
            <template v-slot:item="{ item }">
                <div>
                    <h1>@{{ item.title }}</h1>
                </div>
            </template>
        </ais-hits>
    </ais-instant-search>
</div>

script
    new Vue({
        data: function() {
            return {
                searchClient: algoliasearch(
                    'APPKEY',
                    'SEARCHKEY',
                ),
            };
        },
        el: '#app',
    });
/script

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).