prismicio / prismic-vue

Vue plugin, components, and composables to fetch and present Prismic content

Home Page:https://prismic.io/docs/technologies/vuejs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

nuxt-link, router-link, nor prismic-link seemt to work in the html-serializer

adrianocr opened this issue · comments

I'm using the nuxt html serializer example:

/**
 * To learn more about HTML Serializer check out the Prismic documentation
 * https://prismic.io/docs/vuejs/beyond-the-api/html-serializer
 */
import prismicDOM from "prismic-dom";
import linkResolver from "./link-resolver";

const Elements = prismicDOM.RichText.Elements;

export default function(type, element, content, children) {
  // Generate links to Prismic Documents as <p-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 = `<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;
  }

  // If the image is also a link to a Prismic Document, it will return a <nuxt-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.linkTo.link_type === "Document") {
        result = `<nuxt-link to="${url}">${result}</nuxt-link>`;
      } else {
        const target = element.linkTo.target
          ? `target="${element.linkTo.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;
  }

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

Everything seems to work but the nuxt-link component outputs to the page as <nuxt-link to="[URL HERE]"></nuxt-link> instead of getting transformed/rendered into an actual link.

If it matters I'm using the @nuxtjs/prismic community integration.

Answered here: nuxt-modules/prismic#60

Thank you for taking the time to report the issue!