Nuxt.js: Support for nuxt-link on SVG DOM nodes

[sdras]

Hi there!
Thanks for creating such a great tool, I'm really digging working with Nuxt. I've noticed that nuxt-links don't have proper markup for SVG DOM nodes, causing them to fail. I'd love to have SVG capabilities, there are a lot of great things we could make for navigation with this.

What I'd need is the ability for the a tag to output this instead of href:
<a xlink:href="https://google.com" target="_blank">

Here's an example of what I mean:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a

Thanks!

_{This question is available on Nuxt.js community (#c745)}

[pi0]

Hi @sdras!

Actually nuxt-links are a simple wrapper around router-link. We might customize it's behavior according to it's parent xmlns. (or either providing another helper component for SVG animations)
BTW it would be so nice if you could provide an example of usage inside .vue files so can investigate more possible solutions.

Also thanks for interest in Nuxt.js :)

[Atinux]

Hi @sdras

As @pi0 said, nuxt-link is only a wrapper of router-link for the moment.

I took a look at your link and I see that xlink:href is deprecated: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
Apparently it should work with href directly from the documentation.

If you could provide us an example of usage inside .vue file we will be able to help you faster :)

[sdras]

So, looking into this more, yes, the a attribute works properly but the documentation here is misleading- SVG2 has not been implemented, here's an extensive list of features: https://docs.google.com/spreadsheets/d/1kkqzcxY53h7liRYppLSSFG2sjaJ8V8TCP5rWLZK0AxA/edit#gid=0, which is why I thought that might be the culprit.

I made a reduced test case that works, so I need to go retrace my steps in the original to see what broke down. I'll close out this issue for now until I can find what broke- because I've seen SVG DOM elements wrapped in the nuxt-link disappear from the DOM, which typically happens when something isn't jiving with the spec.

[pi0]

@sdras That hiding problem may be with the fact that <a> inside <a> is not valid html. So Vue will try to fix that by entirely removing link. One possible solution is using div for parent router-link/nuxt-link like this: docs

<router-link tag="div" to="/somewhere">
   <!-- SVG with a tags -->
</router-link>

[sdras]

Hmm, that wasn't my issue, there aren't two wrapped a tags here, but thanks! I'll keep investigating. Also, thanks for the info on the tag attribute, that's useful.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.