Nuxt3 how to style the active NuxtLink?

Question

I am making my first steps with Nuxt3 and node application more generally. I have trouble finding an example of how to distinguish the active element by its style in a simple navbar such as follows:

<template>
  <div class="flex">
    <div class="nav-item">
      <NuxtLink to="/">Accueil</NuxtLink>
    </div>
    <div class="nav-item">
      <NuxtLink to="/autre">Autre</NuxtLink>
    </div>
    <div class="nav-item">
      <NuxtLink to="/subscribe">Souscrire</NuxtLink>
    </div>

  </div>
</template>

I read I should use nuxt-link-active and nuxt-link-exact-active but I cannot find how to make these classes conditional. With what variable should I link these classes ?

Answer 1

In fact there is nothing to do. The classes

router-link-active and router-link-exact-active

are automatically applied when the link is activated.

You just need to provide the css for them.