I am having a problem with <router-link> not being rendered to an <a> tag when parsing through the html-serializer. Everything seems to be working fine except the <router-link> when run through the <prismic-rich-text> component.
To test this I have edited the link serializer to have an extra text block inserted as follows:
result = `<router-link to="${url}">${content} MY TEST TEXT</router-link>`;
The serializer correctly adds this inline into the rendered output and I can see it in the generated HTML, but the <router-link> is written out to the URL instead of the expected <a> tag and the link is not clickable. The 'MY TEST TEXT' shows as expected next to the content that was passed into the component.
If I use a hard-coded <router-link> anywhere in my component without it going through the Prismic component that renders correctly and is clickable.
EDIT: Apologies for the formatting in the original post. Fixed it, although haven’t figured out the code highlighting syntax yet.
Normally in a component I would agree, but the html-serializer is a function that appears to return the tag to the calling component before being pushed through the Vue interpretation engine, thus I don’t think using properties is the correct way to go.
If you look at the Prismic Vue html-serializer docs you will see the default html-serializer doesn’t use handlebars, it uses the string syntax. If I switch out for the normal property syntax you would expect in Vue when using dynamic data, then the {{content}} gets rendered as a string.
In my component that uses the html-serializer I am doing the following:
<prismic-rich-text :field="description_text" />
Where description_text is a rich text object that has been returned from Prismic in the document. Assume I have a Prismic link in the rich text data with the text click here and the path to a test page in Prismic. In the html-serializer, if I use handlebars, the page renders into the html:
<router-link :to="url">{{content}}</router-link>
And produces {{content}} as a string in the rendered view in the browser. If I go back to the way the html-serializer documentation states to use the serializer, then the page renders the following into the html:
And produces click here in the rendered view of the page in the browser, but is not linkable. So the html-serializer is correctly handling the Prismic link data from the rich text object, but isn’t dealing with the router-link correctly.