VueJS :href interprets external links as internal links

April 13, 2022

I am using VueJS and Vuetify. When passing a link to an anchor using :href it interprets it as an external link. For example:
www.example.com brings me to localhost/www.example.com but https://www.example.com would bring me to www.example.com.

Here is my code :

<a :href="link.link" target="_blank">
    {{ link.text }}
</a>

>Solution :

You need to make sure your URLs are full and not relative.

If they are missing the scheme (https:// for example), they will be interpreted as relative link.

You don’t show the code where you prepare the links array, so in general you can iterate them to fix this, or if you are building the array in the code already, you would probably want to add this there.

let linksArr = //...
for (const linkObj of linksArr) {
 linkObj.link = linkObj.link.startsWith('http://') || linkObj.link.startsWith('https://') ?
    linkObj.link : `https://${linkObj.link}`;
}

// or

linksArr = linksArr.map((linkObj) => {
  return {
    ...linkObj,
    link: linkObj.link.startsWith('http://') || linkObj.link.startsWith('https://') ?
      linkObj.link : `https://${linkObj.link}`
  };
});