Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Support router-link, nuxt-link and the like #51

Open
DragonWhisperer opened this issue Oct 8, 2020 · 4 comments
Open

Support router-link, nuxt-link and the like #51

DragonWhisperer opened this issue Oct 8, 2020 · 4 comments

Comments

@DragonWhisperer
Copy link

For example:

<template>
  <nuxt-link :to="`#`">button</nuxt-link>
</template>

<style scoped>
a {
  color: red;
}
</style>

nuxt-link is converted to a tag, but I get error: The selector `a` is unused.
Please support.

Maybe something like this in the settings:

'vue-scoped-css/no-unused-selector': ['warn', {
  'equalTags': {
    'nuxt-link': 'a',
    'n-link': 'a',
    'NuxtLink': 'a',
    'NLink': 'a',
    'router-link': 'a'
  },
}]
@ota-meshi
Copy link
Member

Whether <nuxt-link> has an a tag depends on the implementation, so I think you need to give it a new class.

<template>
  <nuxt-link class="foo" :to="`#`">button</nuxt-link>
</template>

<style scoped>
.foo {
  color: red;
}
</style>

So I don't want to add that option.

@DragonWhisperer
Copy link
Author

It’s maybe a better css design, but still, as you said it depends on the implementation so it makes sense to enable it as a custom option.

@wolfgangwalther
Copy link

What about <router-link tag="xy">? This should be clear which tag it's using.

@KnifeFed
Copy link

KnifeFed commented Dec 9, 2022

Any updates on this?

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants