Multi Index Search in SSR version of InstantSearch within Nuxt.

Feature ⚡️

What is your use case for such a feature?

Be able to use Multi Index Search in SSR version of InstantSearch 2 within Nuxt. It’s a missing feature since 2.0 according to this https://github.com/algolia/vue-instantsearch/issues/348#issuecomment-338928514

What is your proposal

Hi, My proposal is use multi index with InstantSearchSsr, changing the injection $_ais to $_ais-indexname. The problem is that InstantSearchSrr component doesn’t allow to set the injection name dynamically since props are not accessible inside inject, so it always inject the same index using $_ais.

The only solution I found was create the InstantSearchSrr component manually.

To avoid problems, I recommend add a new param (multiIndex) to instantSearchOptions in the file createInstantSearch:

const { searchClient, indexName, multiIndex } = instantSearchOptions;

Then edit the rootMixin to change $_ais name based in the index name, if multiIndex is set to true. That way it’s only needed to create the custom component if enabled:

const rootMixin = {
    provide() {
      const name = multiIndex ? `$_ais-${indexName}` : '$_ais';
      return {
        // should be possible to configure this with {camelcase: ['error', {allow: ['^\\$_']}]}
        // but that didn't work
        // eslint-disable-next-line camelcase
        [name]: search,
      };
    },
  };

And export the function createInstantSearchComponent. So users area able to create their own InstantSearchSsr components:

export {
  createInstantSearchComponent,
} from './util/createInstantSearchComponent';

I know it’s not so practical as before, but works.

I made an example in CodeSandbox based on yours: https://codesandbox.io/s/zwvxqokz3l You can also check my fork: https://github.com/JoaoPedroAS51/vue-instantsearch/

Thanks!

What is the version you are using?

2.0.1

[JoaoPedroAS51]

I think when we merge this it should also be mentioned in the guide on ssr

Yes, this would be really useful.

I’m happy to help. I really love Algolia!

[nothaldir]

@Haroenv I’m arriving a bit late, but is it possible to perform multi index search with SSR in nuxt with Vue InstantSearch 3 ?