vue.jsnuxt.jsserver-side-renderingalgoliavue-storefront

Is there a way to successful integrate Vue Storefront Nuxt with Algolia Search Routing in SSR?


Integrating Algolia search with VSF/Next branch, got the basics down. Moving on to routing.

With Vanilla Nuxt the integration works as it should, although the workarounds are starting to stack.

To Repro:

  1. pull && yarn && yarn run dev
  2. http://192.168.1.4:3000/ && search for something
  3. URL gets rewritten

checkout VSF get a flicker re-render.

To Repro:

  1. same as above except go to /Search
  2. URL gets rewritten for a flash then render fires and goes back to original route

What I’ve tried:

  1. Built the two repos in isolation and it seems to not be an issue with nuxt itself, more an issue with Vue StoreFront

Reference: https://github.com/algolia/vue-instantsearch/issues/916 (tangential)


Solution

  • Okee this has something to do with the nuxt comp passing the route <nuxt :key="$route.fullPath"/>

    I was able to bypass it by doing this in the default template

        <div v-if="String($route.name) === 'Search___en'"><search/></div>
        <div v-else ><nuxt :key="$route.fullPath"/></div>
    

    Basically bypassing the comp with the key which was triggering a re-render because it uses the router under the hood... I'm guessing.

    This is what eventually allowed me to use the integration code effectively: https://github.com/ed42311/algolia-vsf-routes/blob/main/layouts/default.vue#L11

    While this solution works, Other suggestions are appreciated.