Nuxt-link on prismic website now working

Developing with Prismic
1

Hi I have something I dont understand, Im using the rich html field in my nuxt app witrh prismic and all goes well, except for using the link function in the editor. It creates a nuxt-link which doesnt show up as a link on my website. Not sure what I am doing wrong. The source html shows up on the website as:

Online Registration Form

Help!

3

Hi Hurricane,

This is an open issue with the nuxt/prismic module because it doesn’t use the Vue runtime compiler

The workaround until this is resolved is to update your serializer like so:

import linkResolver from "./link-resolver"
import prismicDOM from 'prismic-dom'

const Elements = prismicDOM.RichText.Elements

export default function (type, element, content, children) {
  // Generate links to Prismic Documents as <router-link> components
  // Present by default, it is recommended to keep this
  if (type === Elements.hyperlink) {
    let result = ''
    const url = prismicDOM.Link.url(element.data, linkResolver)

    if (element.data.link_type === 'Document') {
      result = `<a href="${url}" data-nuxt-link>${content}</a>`
    } else {
      const target = element.data.target ? `target="'${element.data.target}'" rel="noopener"` : ''
      result = `<a href="${url}" ${target}>${content}</a>`
    }
    return result
  }

  // If the image is also a link to a Prismic Document, it will return a <router-link> component
  // Present by default, it is recommended to keep this
  if (type === Elements.image) {
    let result = `<img src="${element.url}" alt="${element.alt || ''}" copyright="${element.copyright || ''}">`

    if (element.linkTo) {
      const url = prismicDOM.Link.url(element.linkTo, linkResolver)

      if (element.data.link_type === 'Document') {
        result = `<a href="${url}" data-nuxt-link>${result}</a>`
      } else {
        const target = element.data.target ? `target="'${element.data.target}'" rel="noopener"` : ''
        result = `<a href="${url}" ${target}>${result}</a>`
      }
    }
    const wrapperClassList = [element.label || '', 'block-img']
    result = `<p class="${wrapperClassList.join(' ')}">${result}</p>`
    return result
  }

  if (type === Elements.heading2) {
    var id = element.text.replace(/\W+/g, '-').toLowerCase();
    return '<h2 id="' + id + '">' + children.join('') + '</h2>';
  }

  if (type === Elements.heading3) {
    var id = element.text.replace(/\W+/g, '-').toLowerCase();
    return '<h3 id="' + id + '">' + children.join('') + '</h3>';
  }

  // Return null to stick with the default behavior for everything else
  return null
}

This will at least create link, though they won’t be nuxt links.

To convert them to Nuxt links add listeners based on the a[data-nuxt-link] in a mixin and share this as plugin in your nuxt config file. Hopefully I should have an example for this second part soon.

Thanks.

4

Again thanks Phil.

I must say your support has been outstanding in my journey from a server side developer to a javascript developer, I would have given up otherwise.

1 Like