nuxt-link, router-link, nor prismic-link seemt to work in the html-serializer
adrianocr opened this issue · comments
adrianocr commented
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.
Hugo Villain commented
Answered here: nuxt-modules/prismic#60
Thank you for taking the time to report the issue!