Algolia InstantSearch Vue with Masonry.js


Is there another way of doing this without having to Customize widgets? I find the customization difficult to follow. Does anyone have a working example they could share?

I read up on StackOverflow:

Best Regards.

I was looking at wrong documentation. Ended up writing a Custom Vue Component and then integrated masonry into it.


Hey @trevorgreenleaf,

That’s awesome, I bet it would be useful for other people if you’d write how you made that custom component. It’s valuable as an example of how to integrate third-party libraries in Vue InstantSearch.

Enjoy your day!

1 Like

Hey @trevorgreenleaf,

We have other users that would be interested integrating Vue InstantSearch with Masonry.
Would you be willing to share your implementation?


I am using “shershen08/vue-masonry”

I needed to do a lot of customization so it made sense in my case to make a custom component.

I created a custom component called “results” by copying the default results component from here

Then modified it to include the
import {VueMasonryPlugin} from ‘vue-masonry’;

Then the HTML:

// Note you will need to change
the import for Algolia component to:
import { Component } from ‘vue-instantsearch’;

You can see more about the setup I use with Laravel and Vue here: