vue-router : how to remove underline from router-link

Question

This results in an underlined link:

<li><router-link to="/hello">Hello</router-link></li>

My understanding is that the router-link element generates an a tag.

I've tried these things in the CSS:

router-link{
    text-decoration: none;
}

---

router-link a{
    text-decoration: none;
}

---

router-link a{
    text-decoration: none !important;
}

..but unfortunately none of these work.

Popularize

Answer 1

Vue component tags don't generate HTML tags.
Look in the DOM inspector to see what HTML tags actually exist.

You need to use regular classnames.

Helaine

Ah, I see what you're talking about. The router-link turns into an a. li a { } in CSS seems to work. Thanks. – Popularize

Answer 2

If anyone using Vuetify comes across this question, note that the styling below do not work due to Vuetify's in built styles. You must instead use inline CSS styling:

<router-link
 style="text-decoration: none; color: inherit;"
 to="/hello">

Vixen

Answer 3

It is Converted into <a ...
So to remove the underline try this

a { text-decoration: none; }

Londoner

This one worked for me. Thank you. I added a script to the vue. – Louannlouanna

Answer 4

You can try targeting the list item link like this:

li a {
    text-decoration: none;
}

Unbelievable

Answer 5

You can use the tag prop of router link to use the li css class like this:

<li><router-link tag="li" to="/hello">Hello</router-link></li>

The link will now use li css propertys but still work as like a normal router link.

Feminize

Answer 6

Add a class to router-link tag:

<router-link class="routerLink" to="/hello">Hello</router-link>

Then give css to the class:

.routerLink{
     text-decoration: none;
 }

This should work :)

Wedlock

Answer 7

SCSS

div /deep/ .v-list a {
    text-decoration: none;
}

CSS

div >>> .v-list a{
    text-decoration: none;
}

Chops

/deep/ is deprecated [Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile. – Exceptionable

Answer 8

Even in React-Router. The Link tag makes the text underlined. Because any text (h1, h3, p) inside tag are converted to anchor tags so:

a{text-decoration: none;}

Surgical

Answer 9

Although this answer seems quite obvious. I think my colleagues above forgot to mention that if you are using vuetify with the Laravel framework this problem can be solved as follows. Access:

resources\sass\app.scss file

And comment out the line:

@import '~bootstrap/scss/bootstrap';

This usually resolves this type of problem, which is actually a library conflict.

Pasco

Answer 10

If you are using Boostrap 5 you can use the class text-decoration-none

<router-link href="yourlink" class="text-decoration-none" >

</router-link>

see bootsrap documentation for reference. Just an additional information I am using Vue3 in my application

Denice