Algolia InstantSearch Vue with Masonry.js

Hello,

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:



https://masonry.desandro.com/

Best Regards.

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

2 Likes

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?

Chees,

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
https://github.com/algolia/vue-instantsearch/blob/master/src/components/Results.vue

Then modified it to include the
import {VueMasonryPlugin} from ‘vue-masonry’;
Vue.use(VueMasonryPlugin)

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:

2 Likes