Components does not work in a fresh Nuxt 3 project

Bug 🐞

What is the current behavior?

Make a sandbox with the current behavior

1. Create new nuxt 3 project.
2. Follow the tutorial here https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/vue/#with-nuxt (but use vue-instantsearch/vue3/es instead)
3. See the error

Template: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch

What is the expected behavior?

It should render the components correctly

Does this happen only in specific situations?

Always

What is the proposed solution?

Review this hogan library.

What is the version you are using?

“algoliasearch”: “^4.11.0”, “vue-instantsearch”: “^4.3.1”

Always try the latest one before opening an issue.

[CapitaineToinon]

I managed to get vue-instantsearch + MeiliSearch to work on a Nuxt 3 project by installing

"@meilisearch/instant-meilisearch": "^0.6.0",
"instantsearch.css": "^7.4.5",
"vue-instantsearch": "^4.3.2"

Installing InstantSearch as a client side only plugin using plugins/instantSearch.client.ts (notice the .client in the filename. I followed the Vue Plugin section of nuxt’s documentation) :

import { defineNuxtPlugin } from "#app";
import InstantSearch from "vue-instantsearch/vue3/es";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(InstantSearch);
});

When trying with a regular plugin, I was having the m.default is not a function error but that’s not the case with client side only. And finally created a simple modal search exemple like this

<script setup lang="ts">
import "instantsearch.css/themes/satellite-min.css";
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";

const searchClient = instantMeiliSearch("http://localhost:7700", "");
</script>

<template>
  <div class="modal modal-open">
    <div ref="modal" class="modal-box">
      <ais-instant-search :search-client="searchClient" index-name="game">
        <ais-search-box />
        <ais-hits>
          <template v-slot:item="{ item }">
            <h2>{{ item.name }}</h2>
          </template>
        </ais-hits>
      </ais-instant-search>
    </div>
  </div>
</template>

And this gives me a simple search modal. I did not have to add vue-instantsearch to the transpile option in my nuxt config.

I haved not tried with algolia as the searchClient though.

[Haroenv]

The release including those fixes will be done in a couple minutes @Baroshem 😃