Why does IntelliJ IDEA mark `.router-link-active` as unused in Nuxt project but not in pure Vue project?

6 hours ago 1
ARTICLE AD BOX

I'm encountering a difference in IntelliJ IDEA's behavior between pure Vue and Nuxt projects regarding the CSS class .router-link-active.

In a pure Vue project using <RouterLink>, IDEA correctly recognizes .router-link-active as a class that will be automatically applied to active links. There is no "Unused selector" warning.

However, in my Nuxt project, when I use <NuxtLink>, IDEA marks the .router-link-active selector in my <style scoped> block as grey/unused (inspection: "Unused selector" / CssUnusedSymbol), even though the style works perfectly at runtime.

Why does IDEA recognize the class from <RouterLink> but not from <NuxtLink>? Is there a way to make IDEA understand that <NuxtLink> outputs the same standard Vue Router classes without resorting to suppression comments?

Code Example (Nuxt):

<template> <NuxtLink to="/about" class="nav-link">About</NuxtLink> </template> <style scoped> /* IDEA marks .router-link-active as unused in Nuxt project */ .nav-link.router-link-active { color: blue; } </style>
Read Entire Article