<router-link> not rendering to <a> tag

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.

Any ideas?

Thanks

The <router-link> syntax looks like this, for dynamic links

<router-link :to="url">{{ content }}</router-link>

Obviously url and content need to be properties in the Vue instance. It uses handlebars, not string template syntax.

@marcellothearcane - thanks for the reply.

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:

<router-link to="/test_page">click here</router-link>

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.

Thoughts?

1 Like

Hey Andy,

Is there anyway you can share with us your project in a github link so we can checkout your configuration?

Sure will. I will put something up to share - just have to make a simple example. Thanks.

2 Likes