AisInstantSearchSsr does not work well with nuxt i18n translation functions

Bug 🐞

What is the current behavior?

I use nuxt.js with <ais-instant-search-ssr> and for the translation of the whole website i use the official nuxt i18n module (https://i18n.nuxtjs.org/). The common function to translate strings with nuxt i18n is is $t(). When i place this somewhere inside the <ais-instant-search-ssr> component i get the error "TypeError: Cannot read property '_t' of undefined". Also i use the <ais-refinement-list> component with transform-items where i translate the labels into the desired language but this leads to the same error.

Make a sandbox with the current behavior

Not possible as true SSR with Nuxt is needed…

What is the expected behavior?

The $t() function should be usable inside the <ais-instant-search-ssr> component without any ugly workaround. My workaround is currently to re-render all <ais-refinement-list> components as soo the mounted()hook is called.

Does this happen only in specific situations?

No… in al situations where i use a translation function inside a <ais-instant-search-ssr> component.

What is the proposed solution?

Make $t() available in <ais-instant-search-ssr> or find a way to inject $t() and $tc() functions into <ais-instant-search-ssr>. ($tc() is used for pluralization.)

What is the version you are using?

“nuxt”: “^2.14.3” “vue-instantsearch”: “^3.5.0”, “algoliasearch”: “^4.8.6”,

[podlebar]

well yes… if you want the url to change when you click on a facet you need this… because than you can reload the browser and the url will provide the state for the search… otherwise your facets will belost after a reload

[podlebar]

maybe post your code… makes it easier

singleIndexMapping needs to be imported: import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings'