`<NuxtLink>` usage with `htmlSerializer` in v3

[eveningforgery]

Hello there!

It used to be possible in nuxt 2 to make the htmlSerializer to use nuxt-link instead of a simple a tag for internal links.

Nuxt 2 example:

`app/prismic/htmlSerializer.js` ```javascript export default function(type, element, content, children) { if (type === Elements.hyperlink) { let result = '' const url = prismicDOM.Link.url(element.data, linkResolver) if (element.data.link_type === 'Document') { result = `${content}` } else { const target = element.data.target ? `target="'${element.data.target}'" rel="noopener"` : '' result = `${content}` } return result } } ```

I quickly tried to do the same thing following the documentation for v3 but the NuxtLink element doesn't get mounted:

app/prismic/htmlSerializer.js

export default {
  ...
  hyperlink: ({ children, node }) => {
    return `<NuxtLink to="/">${children}</NuxtLink>`
  }
}

DOM result:

<p>
  <nuxtlink to="/">Test link</nuxtlink>
</p>

Is there currently a way to achieve that in v3?

[lihbr]

Hey there, thanks for opening an issue!

This actually used to be a bug in Nuxt 2 also, see: https://github.com/nuxt-community/prismic-module/issues/60

With Vue 3/Nuxt 3 this has been fixed so that you only need to input an <a> tag, links will then use client-side routing when appropriate automatically (inspired from @Atinux's solution here: https://github.com/nuxt-community/prismic-module/issues/60#issuecomment-597156422, implemented in the Vue 3 kit used by Nuxt 3 there: https://github.com/prismicio/prismic-vue/blob/v3/src/components/PrismicRichText.ts#L171-L228)

Not sure if all of that makes sense, let me know 🤔 But basically leaving <a> tags should be fine and the app should use Vue Router when appropriate ☺️

[eveningforgery]

Awesome, thank you for the explanation!

[luca-smartpricing]

@lihbr It doesn't work. If I leave the default <a> tag in ~/app/prismic/richTextSerializer, the link is a simple a tag and not a nuxt-link. It always refresh the page

[lihbr]

Can you provide a minimal reproduction? Yes, it won't render a Nuxt link but it should listen to click on links to perform navigations with Vue Router: https://github.com/prismicio/prismic-vue/blob/master/src/components/PrismicRichText.ts#L199-L256

I'll try to reproduce it on my end also.

[lihbr]

Well, I'm not able to reproduce, here: https://stackblitz.com/edit/github-kwt1lq?file=pages%2Findex.vue,pages%2Fabout.vue you can see that the Vue links (from <PrismicRichText />) don't make the devtools blink, while the regular HTML ones make it blink.

Happy to investigate further if you can provide a reproduction of what you're experiencing :)