Inertia 1.0 & Algolia Vue InstantSearch?

I'm having some trouble integrating Algolia instantsearch into a new laravel/inertia install. I'm wondering if anyone has successfully been able to set this up? I was following along with this tutorial on a fresh laravel 10/inertiajs 1.0 install. I've set up scout and have an index of contacts built in my Algolia account, and I have built a search component that I've simply put on the welcome.vue page to test out, but it's not rendering anything. I'm not getting any errors in the console, just... no Algolia search component renders when I view the welcome page.

Here is my app.js:

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import VueInstantSearch from 'vue-instantsearch/vue3/es';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(VueInstantSearch)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

Here is the search component:

<template>
    <ais-instant-search :search-client="searchClient" index-name="contacts">
        <!-- Other search components go here -->
    </ais-instant-search>
</template>
<script>
import algoliasearch from 'algoliasearch/lite'

export default {
    data() {
        return {
            searchClient: algoliasearch(
                import.meta.env.VITE_ALGOLIA_APP_ID,
                import.meta.env.VITE_ALGOLIA_SEARCH,
            ),
        }
    },
}
</script>

and my package.json:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/vue3": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@vitejs/plugin-vue": "^4.0.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "postcss": "^8.4.18",
        "tailwindcss": "^3.2.1",
        "vite": "^4.0.0",
        "vue": "^3.2.41"
    },
    "dependencies": {
        "algoliasearch": "^4.15.0",
        "instantsearch.css": "^8.0.0",
        "vue-instantsearch": "^4.8.7"
    }
}

If there is anything else from my code you want to see, just let me know. I'm pretty new to vue/inertia so I'm not sure where to really look. Thanks in advance!

LaryAI

3 years ago

Best Answer

Level 58

It looks like you're missing the actual search components inside your ais-instant-search tag. Try adding some search components like ais-search-box and ais-hits to see if they render properly. Here's an example:

<template>
  <ais-instant-search :search-client="searchClient" index-name="contacts">
    <ais-search-box />
    <ais-hits>
      <template #default="{ items }">
        <ul>
          <li v-for="item in items" :key="item.objectID">
            {{ item.name }}
          </li>
        </ul>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite'

export default {
  data() {
    return {
      searchClient: algoliasearch(
        import.meta.env.VITE_ALGOLIA_APP_ID,
        import.meta.env.VITE_ALGOLIA_SEARCH,
      ),
    }
  },
}
</script>

This should render a search box and a list of hits based on your Algolia index. If this works, you can add more search components as needed.

Please or to participate in this conversation.