Failed to resolve component: ais-instant-search

[bennyzen]

I've followed the provided instructions to the point, but still can't get this module to work with Nuxt3.

My current very basic test-page looks like this:

<script setup>
const client = useMeilisearchClient()
</script>

<template>
  <ais-instant-search :search-client="client" index-name="publications">
    <ais-configure :hits-per-page.camel="10" />
    <ais-search-box
      placeholder="Search here…"
      class="searchbox"
    ></ais-search-box>
    <ais-hits>
      <template v-slot="{ items }">
        <ul>
          <li v-for="{ id, title, poster } in items" :key="id">
            <h1>{{ title }}</h1>
            <img :src="poster" :alt="`Poster from ${title}`" />
          </li>
        </ul>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

Is there something crucial missing? Any help would be appreciated.

[xlanex6]

Hi @bennyzen

First can you tell me a bit more about your config ?
Nuxt version
Meilisearch version ?
What error message you got ? in browser / console ?
Meilisearch is work via API ?

[bennyzen]

I just setup an all new Nuxt3 instance (@latest) and followed all the steps described here https://nuxt-meilisearch-docs.netlify.app/.

My nuxt.config.ts looks like this:

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  typescript: {
    shim: false,
  },
  modules: ["nuxt-meilisearch"],
  meilisearch: {
    hostUrl: "https://example.com",
    apiKey:
      "w5rj0olA39cfasdasdasdasdassdasdasdasdasd46e1b43d235c967ed38a926beecbc88284f4027a0caa",
    instantSearch: { theme: "algolia" }, // default true
    // optional
    clientOptions: {
      placeholderSearch: true, // default
      paginationTotalHits: 50, // default
      finitePagination: true, // default
      primaryKey: undefined, // default
      keepZeroFacets: false, // default
    },
  },
});

Meili is working in production for other projects and is not the problem here.

My guess is that something is missing in your instructions.

[xlanex6]

@bennyzen
it looks like a algolia lib problem.
try
instantSearch: true

What about meilisearch instance ? works well ? can you reach it via api ( postman or curl ? )

[bennyzen]

Tried with instantSearch: true. Still the same errors as stated above. Algolia components still can't be found.

Yes, Meili can be reached and works flawlessly using Postman/Insomnia.

[xlanex6]

Ok
after digging, I got same error
@bennyzen
I do my best to fix it

[xlanex6]

A quick fix could be

import {
  AisInstantSearch,
  AisConfigure,
  AisHits,
  AisSearchBox,
} from 'vue-instantsearch/vue3/es';

until I fix into the lib

[xlanex6]

@bennyzen

https://stackblitz.com/edit/nuxt-starter-yd4wte?file=app.vue

[bennyzen]

A quick fix could be

import {
  AisInstantSearch,
  AisConfigure,
  AisHits,
  AisSearchBox,
} from 'vue-instantsearch/vue3/es';

until I fix into the lib

Ok, this works as temporary fix. Thank you.

Unfortunately, the above Stackblitz link does not seem to work.

[xlanex6]

It was hard to fix

I choose to let final user import manually his components.
Global Vue Component importing will OVER load final bundle.

Now it not a bug , it a feature 😉