NuxtLink inside computed text?
I have a text containing hashtags and use a RegEx-function to highlight these tags and make them clickable. I then render this text in my template using the v-html tag. However this does not work as NuxtLink is not rendered correctly. Is there a way to solve this?
3 Replies
There’s a few ways to navigate this issue but it’s not as simple as throwing in a component tag and expecting it to render and work. The most simplistic method would be to wrap the markup and bind click handlers by targeting the element(s) required. However, this is only a client-side solution. For SSR you’d want to generate a vnode tree where you build up the markup, inserting
NuxtLink component where relevant, and return using the render function to pass on into <component :is="…" /> rather than v-html.Thanks. That sounds a bit more complicated than I thought, but I will have a look into it.
Runtime compiler support is coming in v3.4.0 thanks to this amazing PR: https://github.com/nuxt/nuxt/commit/3fc9a75070367a4bdd90e3a7fc7f38185b71da19