vuepress-plugin-meilisearch icon indicating copy to clipboard operation
vuepress-plugin-meilisearch copied to clipboard

Overwrite the default behavior of the links redirection

Open curquiza opened this issue 5 years ago • 0 comments

This plugin uses docs-searchbar.js. When calling the docsSearchBar method, we pass a custom handleSelected function:

https://github.com/meilisearch/vuepress-plugin-meilisearch/blob/23bd502752b235bcf09f160606530e2bead8beb4/MeiliSearchBox.vue#L56-L64

The handleSelected attribute will be the function called when the users click on a result in the dropdown. By default, docs-searchbar.js redirects the users to the URL with window.location.assign(url). But, here, in with this VuePress plugin, we use the this.$router.push method that is smoother and allows the user to enjoy a better experience when navigating in a Vue application. That's why we customed the handleSelected function.

The point is: the $router.push method works only for links in the same domain application. If you have results redirecting in another website in your search bar, it will not work.

Suggestion: provide handleSelected as a config parameter of this plugin that would be an anonymous function, e.g.:

module.exports = {
  plugins: [
    [
      "vuepress-plugin-meilisearch",
      {
        "hostUrl": "https://mymeilisearch.com",
        "apiKey": "XXX",
        "indexUid": "docs-test",
        "handleSelected": (input, event, suggestion) => {
          console.log(`redirecting to ${suggestion.url}`)
          window.location.assign(suggestion.url)
        }
    ],
  ],
}

But here is the main issue: we don't know how to pass an anonymous function as a parameter in a VuePress plugin config. We tried to use define as we do for all the other parameters, but of course, it does not work because all are JSON.stringify.

NB

The temporary solution to overwrite the default behavior of vuepress-plugin-meilisearch: overwrite the MeiliSearchBox.vue component as we do in our main documentation (if the link does not work it's because the file is not merged yet).

curquiza avatar Jun 19 '20 12:06 curquiza