Vue-instantsearch: Url Sync option/widget

[maxiloc]

Could be nice to have an option or widget to handle url sync automatically

[bearduk]

Would be great to see this as a built in feature. I've been using the Algolia $router example here:
https://github.com/algolia/vue-instantsearch-examples/tree/master/examples/vue-router/src (thanks btw)..It syncs user input with the url but not the other way around. Would be great to be able to bookmark/ share search result urls.

[bearduk]

Sorry, figured out the url?query-> -- I've used 'query': this.$route.query.q within :query-parameters, works great 👍

[rayrutjes]

We definitely should create a dedicated section under "advanced" in the docs!

[rayrutjes]

Hey @bearduk , I worked on a guide for synchronizing the Vue router with Vue InstantSearch, here is the preview: https://deploy-preview-246--vue-instantsearch.netlify.com/advanced/vue-router-url-sync.html
Do you think this would have been useful for your usecase?
Do you think it is missing things?

The PR is here: #246

[bearduk]

Awesome @rayrutjes, really clear docs. Would have helped me yes. In regards to anything missing, perhaps adding in how to sync multiple params so e.g. refinement list selections reflect as query.whatever too? Thanks.

[rayrutjes]

Yes, I'm working on making this more exhaustive indeed.
Until then I'll leave this open.

Thanks for the feedback @bearduk

[matthewmnewman]

@rayrutjes @bearduk I agree, Syncing all of the component parameters would be a fantastic addition to the documentation as i have been struggling to get this working myself.

[rayrutjes]

@matthewmnewman can you confirm that you are using the Vue Router as well?

[matthewmnewman]

@rayrutjes Yes i can of course sync the search query using Vue Router but trying to sync this with multiple refinement lists for example is a little bit more complicated unless i am missing something obvious within the searchStore.

[rayrutjes]

@matthewmnewman I planned to find a solution / example with the Vue Router, so I just wanted to make sure that would help you.

I'll keep you posted.

[matsava]

Any chance we could create a solution without Vue Router?

[rayrutjes]

Hey @Chrysanthos ,

Just asked you a few questions on the forum.
Anyway, here they are:

So the question is simple, why do you want to have URL sync?
What shape do you want the URL to have? Does it matter?

And here is an additional question: Why not using the Vue router if willing to do URL manipulations?

Looking forward to address your request.

[NicTorgersen]

Hi, @rayrutjes

Hijacking this because I'm apparently a web conquistadore.

Anyway, I'm working on a product listing page on top of Wordpress using Algolia, and I'm super happy with it, awesome work, however I find the URLSync option lacking? Is this still the case?

I don't see the reason for using Vue Router for this, considering it will create a bigger footprint. URL shape does not matter to me.

[Haroenv]

@NicTorgersen, this isn't yet possible, but we do take it in account, feel free to upvote the original post here so we can easily sort by # interested people

[jryd]

I have a similar need to @chrysanthos. I'm not using vue-router in my application, as it is quite complex (so not that well suited to be an SPA that vue router usually works well with.
It's also based on Laravel and so already has routing provided by that.

@rayrutjes to answer the questions you originally asked @chrysanthos:

So the question is simple, why do you want to have URL sync?

So that users can bookmark and share links to search results. Currently, I see no easy way to persist this and load it back in on page load. Having a query string of parameters that can be parsed solves this issue as this can be both bookmarked and shared.

What shape do you want the URL to have? Does it matter?

This probably doesn't matter to be honest, something similar to the vanilla JS implementation of IS would be good; which is just a query string.

[Haroenv]

Thanks for leaving your opinion @jryd, this was already planned for the next version of Vue InstantSearch which is currently in development

[shanebeeston]

@haroenv what is the eta on the next version of Vue InstantSearch?

[Haroenv]

Still working on it, there's some harder questions to resolve (SSR for example) and the widgets need to be moved. You can see the progress in #416. Feel free also to leave an email to [email protected] if you're interested in beta testing when it's available

[Haroenv]

https://v2--vue-instantsearch.netlify.com/advanced/vue-router-url-sync.html