Applying initial filters to Vue Instantsearch

Hey all,

I’m very new to Vue and am taking over some existing code that has implemented Vue instantsearch.

What I’m needing to do is set filters for Algolia to use with its initial fetch of results. The reason for this is that we need to tie friendly URLs to particular result sets (filtered results).

The site is served by PHP server-side. Handing of friendly URLs is done by Apache mod_rewrite. I’m needing Vue Instantsearch to pick up filters passed down with the page in a JS var.

Previously, I did this with Instantsearch.js just by something like this:

	const search = instantsearch({
	indexName: 'products',
	searchClient,
	initialUiState: {
		products: {
			refinementList: {"ProductType":["Dresses"]}
		}
	});

I have no idea how to get the equivalent happening with Vue. Is it way more complicated? Does anyone have an example they can share?

Cheers
Baz

Edit: PS. I’d be willing to pay for someone’s time for help with this as well as some other small Vue Instantsearch related features. DM me with some info if interested.

Hello baz,

If this js var is global you can simply reuse it in your VueJs instance.

# somewhere
const myVar = 'Dresses';

# in your vuejs code
const search = instantsearch({
	indexName: 'products',
	searchClient,
	initialUiState: {
		products: {
			refinementList: {"ProductType":[window.myVar}
		}
	}); 

You could also parse the url in vuejs:

const search = instantsearch({
	indexName: 'products',
	searchClient,
	initialUiState: {
		products: {
			refinementList: {"ProductType":[window.location.path.split('/')[0]}
		}
	}); 

Hope this helps