Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
adrianocr opened this issue Feb 21, 2020 · 1 comment

Comments

@adrianocr
Copy link

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.

@hypervillain
Copy link
Contributor

Answered here: nuxt-modules/prismic#60

Thank you for taking the time to report the issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants