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

[Thibaut Maurice]

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

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 = `<nuxt-link to="${url}">${content}</nuxt-link>`
    } else {
      const target = element.data.target ? `target="'${element.data.target}'" rel="noopener"` : ''
      result = `<a href="${url}" ${target}>${content}</a>`
    }
    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?

[Lucie]

Hey there, thanks for opening an issue!

This actually used to be a bug in Nuxt 2 also, see: #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: #60 (comment), 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 ☺️

[Thibaut Maurice]

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

[Lucie]

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.

[Lucie]

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 :)