Anchor tag in hierarchical-menu

hi,
by default HierarchicalMenuList create links using anchor tag.
What the simples way to replace by nuxt-link tag ? it is recommend to use nuxt-link ?

Thanks,
Araldo Fidalgo

You can use the default slot to change the output of HierarchicalMenuList. See https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/vue/?language=HierarchicalMenuList#customize-the-ui

There is nothing against using InstantSearch with nuxt-link but you will also need to configure routing in InstantSearch to make it works with Vue Router: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/#combining-with-nuxtjs

Hi,
I did try to use the default slot to change the output of HierarchicalMenuList.
I did lose all de css functionality and the multi level menu structure.
I took a look at the components HierarchicalMenu.vue, HierarchicalMenuList.vue. the best way is tpo “replicate” all that ?
or build a menu from scratch ?

Araldo Fidalgo

Hello,
If you change the DOM output, it definitely makes you lose all the styles and some functionalities around. So you’d have to use the exactly same DOM output with only “a” replaced by “nuxt-link” or whatever you want.

However, I’m curious to hear more about what you’re exactly trying to implement here. If you replace “a” with “nuxt-link”, what is supposed to happen when user clicks it? Instead of refining the search result, the page is changed to something else, perhaps with the scope already applied?

If you’re struggling with routing between nuxt and vue-InstantSearch, this might be helpful for you:

Let me know how it goes.

Hi,
If you are curious, i already suspect what i want to reach…
I am building an e-commerce site with the Multikart template.
i read that: “The nuxt-link component is an essential of Nuxt. It should be used to navigate through your application”
Does it apply to the algolia filters? does it make sense to change the “a” tag of algolia’s filters / refinement?

yes I already applied the “Routing URLs”.

but I have a problem with the hierarchical menu.

when I refresh the page it gives me the error: “Cannot read property ‘data’ of undefined”.

in my project I already have the routing at work and other components. But as in the sandbox, adding the component “breadcrumb” or others like it gives error.

can you help me?

“algoliasearch”: “^4.5.1”,
“nuxt”: “^2.14.5”,
“vue”: “^2.6.12”,
“vue-instantsearch”: “^3.2.0”,

thank you.
Araldo Fidalgo

hi,
i have open a issue.

Thanks for opening an issue, we have found what the issue is, and it has been released today!

1 Like