search

algolia / vue-instantsearch

👀 Algolia components for building search UIs with Vue.js
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue
MIT License
854 stars 157 forks source link

Algolia Instant Search / Vue Storefront integration #950

Closed ed42311 closed 1 year ago

ed42311 commented 3 years ago

Bug 🐞

What is the current behavior?

  1. Started from: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/#combining-with-nuxtjs
  2. Using: VueStorefront Next: https://github.com/vuestorefront/vue-storefront/tree/next
  3. URL gets rewritten for a flash then render fires and goes back to original route

Make a sandbox with the current behavior

Don't think I can make a sandbox with nuxt... but I did create a minimal repo: https://github.com/ed42311/algolia-vsf-routes

To Repro:

  1. pull && yarn && yarn run dev
  2. http://192.168.1.4:3000/ && go to /Search
  3. URL gets rewritten for a flash then render fires and goes back to original route

What I’ve tried:

  1. Built two repos in isolation and it seems to not be an issue with vanilla nuxt: https://github.com/ed42311/algolia-nuxt-routes
  2. Updated router handler based on @Haroenv 's suggestions: https://github.com/algolia/vue-instantsearch/issues/916#issuecomment-817602414

What is the expected behavior?

  1. URL gets rewritten and back button works as well as in => https://github.com/ed42311/algolia-nuxt-routes

Does this happen only in specific situations?

Yes, this issue only occurs so far in vue storefront next branch

What is the proposed solution?

I don't have one as of yet, but I'm actively debugging, will update as I go

this issue may be similar https://github.com/algolia/vue-instantsearch/issues/916

What is the version you are using?

"vue-instantsearch": "^3.6.0"

Always try the latest one before opening an issue.

ed42311 commented 3 years ago

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

I am however open to other suggestions

eunjae-lee commented 3 years ago

@ed42311 while your workaround seems good to me, I'm curious why you added :key to <nuxt>?

ed42311 commented 3 years ago

@eunjae-lee oh I didn't... that's part of the Vue storefront base code... in fact that was what was originally causing the re-render issue

Guess I'm curious as well... 😄

Is it some way to optimize routing? I started a conversation in vuestorefront as well: https://github.com/vuestorefront/vue-storefront/issues/5749

eunjae-lee commented 3 years ago

@ed42311 hmm I'm not sure. It's more like a way to invalidate and rerender component when $route.fullPath changes rather than an optimization, which I'm not so sure why they put it in the first place, though.

OndeVai commented 1 year ago

bump! we are battling the same thing and would like to know why this was added in the first place

Haroenv commented 1 year ago

This is an old issue, so I'll assume that it has been fixed in the mean time. If you have more issues, please open a new issue and give a reproduction. Thanks!