'how to add class and icon in route link Vuejs

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

vue.jsvuejs-routing


Solution 1:[1]

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>

Solution 2:[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>

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fatm
Solution 2 Boussadjra Brahim
Solution 3 Davidsol

Related Questions