CODEWITHSUNDEEP
vue.jsvuejs-routing
json
json

Reputation: 77

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

Upvotes: 0

Views: 3876

Answers (3)

Davidsol
Davidsol

Reputation: 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>

Upvotes: 0

fatm
fatm

Reputation: 455

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>

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 0

Related Questions