Algolia is not working on Nuxt

[typhoon11]

Version

@nuxtjs/algolia: 1.4.0 nuxt: 3.0.0

Reproduction Link

[Baroshem]

Hey,

have you followed this docs https://algolia.nuxtjs.org/advanced/vue-instantsearch?

[typhoon11]

Hey,

have you followed this docs https://algolia.nuxtjs.org/advanced/vue-instantsearch?

Yeah did that all even install that vueinstant search package as it was not download by algolia

[Baroshem]

Could you paste here your configuration of the module and how do you use it in the Vue component?

[typhoon11]

Could you paste here your configuration of the module and how do you use it in the Vue component?

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/algolia'
  ]
  algolia: {
          apiKey: 'M91b29bc3b270e50cd3d549xxxxxxx,
          applicationId: 'W0FRE10Z7J',
          lite: true,
          cache: true,
          instantSearch: {
              theme: 'algolia'
          }
      }
})

DashHeader.vue (Component)

 <ais-instant-search :index-name="indexName" :search-client="algolia">
        <ais-search-box />
        <ais-hits />
</ais-instant-search>
<script>
    import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es/index.js'
    export default ({
      async setup() {
            const indexName = 'module_search' 
            const algolia = useAlgoliaRef('')

            return {
                indexName,
                algolia
            }
        },
    })
</script>

[Baroshem]

This is really strange. I have just copied the code into example nuxt 3 project and it works:

Component:

<template>
  <div>
    <ais-instant-search :index-name="indexName" :search-client="algolia">
      <ais-search-box />
      <ais-hits />
    </ais-instant-search>
  </div>
</template>

<script setup lang="ts">
import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es/index.js'
const indexName = 'dxp'
const algolia = useAlgoliaRef()
</script>

Configuration:

export default defineNuxtConfig({
  modules: [
    [
      "@nuxtjs/algolia",
      {
        apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
        applicationId: process.env.ALGOLIA_APP_ID,
        instantSearch:{
          theme: 'algolia'
        }
      },
    ],
  ],
});

Result in the browser:

Could you try to just copy/paste my code and see if it works for you that way? Maybe some typo somewhere? If it wont work, could you provide a reproduction link? I would be happy to investigate it more once I will have a reproducible project :)

[typhoon11]

This is really strange. I have just copied the code into example nuxt 3 project and it works:

Component:

<template>
  <div>
    <ais-instant-search :index-name="indexName" :search-client="algolia">
      <ais-search-box />
      <ais-hits />
    </ais-instant-search>
  </div>
</template>

<script setup lang="ts">
import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es/index.js'
const indexName = 'dxp'
const algolia = useAlgoliaRef()
</script>

Configuration:

export default defineNuxtConfig({
  modules: [
    [
      "@nuxtjs/algolia",
      {
        apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
        applicationId: process.env.ALGOLIA_APP_ID,
        instantSearch:{
          theme: 'algolia'
        }
      },
    ],
  ],
});

Result in the browser:

Could you try to just copy/paste my code and see if it works for you that way? Maybe some typo somewhere? If it wont work, could you provide a reproduction link? I would be happy to investigate it more once I will have a reproducible project :)

Sure i will try your code tomorrow and see and will also try to reinstall the algolia package once again and also if that doesn't work will share a stackblitz link. Btw I am assuming the index name can be anything right?

[Baroshem]

It should be the name of the index in Algolia Dashboard.

Let me know about the results so that I can help you resolve these issues 🙂

[typhoon11]

This is really strange. I have just copied the code into example nuxt 3 project and it works:

Component:

<template>
  <div>
    <ais-instant-search :index-name="indexName" :search-client="algolia">
      <ais-search-box />
      <ais-hits />
    </ais-instant-search>
  </div>
</template>

<script setup lang="ts">
import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es/index.js'
const indexName = 'dxp'
const algolia = useAlgoliaRef()
</script>

Configuration:

export default defineNuxtConfig({
  modules: [
    [
      "@nuxtjs/algolia",
      {
        apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
        applicationId: process.env.ALGOLIA_APP_ID,
        instantSearch:{
          theme: 'algolia'
        }
      },
    ],
  ],
});

Result in the browser:

Could you try to just copy/paste my code and see if it works for you that way? Maybe some typo somewhere? If it wont work, could you provide a reproduction link? I would be happy to investigate it more once I will have a reproducible project :)

Here is the reproduction link: https://stackblitz.com/edit/nuxt-starter-azgjp4?file=nuxt.config.ts

[Baroshem]

I know where the problem is.

In your example, you are not using a script setup approach which will automatically register components. So, in your case you need to register them as following:

<template>
  <div>
    <ais-instant-search :index-name="indexName" :search-client="algolia">
      <ais-search-box />
      <ais-hits />
    </ais-instant-search>
  </div>
</template>
<script>
    import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es/index.js'
    export default {
        components: {
          AisInstantSearch,
          AisSearchBox,
          AisHits
        },
        async setup() {
            const indexName = 'test_index' 
            const algolia = useAlgoliaRef()

            return {
                indexName,
                algolia
            }
        }
    }
</script>

If you do so, you will have following result in stackblitz and your project:

Let me know if that worked for you.

[typhoon11]

I know where the problem is.

In your example, you are not using a script setup approach which will automatically register components. So, in your case you need to register them as following:

<template>
  <div>
    <ais-instant-search :index-name="indexName" :search-client="algolia">
      <ais-search-box />
      <ais-hits />
    </ais-instant-search>
  </div>
</template>
<script>
    import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es/index.js'
    export default {
        components: {
          AisInstantSearch,
          AisSearchBox,
          AisHits
        },
        async setup() {
            const indexName = 'test_index' 
            const algolia = useAlgoliaRef()

            return {
                indexName,
                algolia
            }
        }
    }
</script>

If you do so, you will have following result in stackblitz and your project:

Let me know if that worked for you.

Thanks a lot that worked perfectly

[Baroshem]

Ok cool, closing the issue then.