Instantsearch.js: Using Vue.js inside Hits Template

[ChristopherDosin]

Hi,

i am trying to use some vue / vue-router inside the Hits Template.

search.addWidget(
                    instantsearch.widgets.hits({
                        container: '#hits-container',
                        templates: {
                            item: '<div class="card">' +
                            .....
                            '<div class="card-title"><router-link to="/tutorials/{{slug}}" exact>{{title}}</router-link></div>' +
                           ......
                        }
                    })
                );

Unfortunately it doesnt work, the <router-link> inside the Hits Template isnt rendered. The console does not throw any error.

Any Suggestions on how to use Vue inside a Hits Template?
I also tried to manipulate the Dates from my Algolia Index with moment.js which also did not worked. It seems that you cant use any third party libraries inside the Hits Template.

[vvo]

Hi @kayyyy indeed the use of vue-js directive in instantsearch.js is unlikely to work given the way instantsearch.js is done.

There's no easy solution to this but to build specific vue-instantsearch package where we would replicate our widgets using vuejs idioms and libraries.

This would make instantsearch project compatible with vuejs, we are currently doing this for React.

As for momentjs, you should be able to format the dates using momentjs methods by using a hogan helper like we show in our documentation: https://community.algolia.com/instantsearch.js/documentation/#helpers

Let me know if that works for you

[kleicht]

I made a toy project with Vuejs and Algolia: kleicht/algolia-vuejs-example
I didn't use instantsearch but the lower-level client, namely algoliasearch-helper.

In the Result component you, you may add a vue-router link and retrieve data by ObjectID.

[vvo]

Great! I think that's the way to go with vue for now, here's an example on codepen that we did: http://codepen.io/Algolia/pen/bZvvvx

[ChristopherDosin]

Thank you guys for your suggestions.