Vue-instantsearch: Create an instant-search component in Nuxt

[alekcarvalho]

Hi guys!

Is there a way to create an instant-search single file component instead of an instant-search page in Nuxt?

I need to create an instant-search component because I have to replicate this on multiple pages

In the algolia tutorial there are only examples of how to create an instant-search page.

Thanks

[francoischalifour]

Could you please explain what you mean by "instant-search single file component"? What do you want to share between these components?

[alekcarvalho]

I want to create a component that contains the search field with autocomplete in Nuxt and this component will be shared on multiple pages.

One of the problems of creating a component is about AsyncData that does not work with components

[tkrugg]

Hi @alekcarvalho.
Not being able to use asyncData from a component is rather a nuxt limitation, not specific to vue-instantsearch (see nuxt docs).

First, let me highlight that asyncData is necessary only if you want the server-side render search results (It's what's firing the search query to Algolia on the server). It sounds like you're building an autocomplete, so you might not need to server-side render search results.

However if you do need server-side rendered search results, I see 2 possible solutions:

1. You can encapsulate your search in a component. You'll still need asyncData on every page the component is being used but you can factor out asyncData implementation in a separate function to keep it short and DRY.

2. If you're using vuex, you can move asyncData business logic in a store action and trigger call the latter from nuxtServerInit. Then you can move your instantsearch components either in a layout.
   Here is 2 threads covering this method:

   • https://cmty.app/nuxt/nuxt.js/issues/c398
   • https://github.com/nuxt/nuxt.js/issues/1740

I hope this helps!
I'll close this for now but feel free to reopen if you have any other question.