how to add class and icon in route link Vuejs

Question

I have a route-link vuejs :

<router-link :to="{ name: 'user', params: { user: 123 }}">view</router-link>

I want to add class : class="btn btn-primary" and icon in that route-link. Please give me ideas. Thanks

Answer 1

In case it helps someone, in my case I am working on a dashboard with Tailwind and vue 3, I was able to add an icon from https://heroicons.com/

1 copy icon select in heroicons 2 Pastes en router componet

     <--here paste icon copy here-->

    <span class="text-white">Acerca de</span>


    </router-link>

Answer 2

You could add tag prop with button as value and your icon next to the router link text:

<router-link tag="button" class="btn btn-primary" :to="{ name: 'user', params: { user: 123 }}">
  <icon name="someName"/>   
   view
</router-link>

Answer 3

Vue-router's router link just add a-href link with matching link and add some router-exact classes so you can just add classes to router-link and it will work. Same as html inside.
<router-link class="btn btn-primary" :to="{ name: 'user', params: { user: 123 }}"><i class="mdi mdi-heart"></i>view</router-link>