pageClass | sidebarDepth | title | description | since |
---|---|---|---|---|
rule-details |
0 |
vue/script-setup-uses-vars |
prevent `<script setup>` variables used in `<template>` to be marked as unused |
v7.13.0 |
prevent
<script setup>
variables used in<template>
to be marked as unused
- ⚙️ This rule is included in all of
"plugin:vue/base"
,"plugin:vue/essential"
,"plugin:vue/vue3-essential"
,"plugin:vue/strongly-recommended"
,"plugin:vue/vue3-strongly-recommended"
,"plugin:vue/recommended"
and"plugin:vue/vue3-recommended"
.
ESLint no-unused-vars
rule does not detect variables in <script setup>
used in <template>
.
This rule will find variables in <script setup>
used in <template>
and mark them as used.
This rule only has an effect when the no-unused-vars
rule is enabled.
Without this rule this code triggers warning:
<script setup>
// imported components are also directly usable in template
import Foo from './Foo.vue'
import { ref } from 'vue'
// write Composition API code just like in a normal setup()
// but no need to manually return everything
const count = ref(0)
const inc = () => {
count.value++
}
</script>
<template>
<Foo :count="count" @click="inc" />
</template>
After turning on, Foo
is being marked as used and no-unused-vars
rule doesn't report an issue.
If you are not using <script setup>
or if you do not use the no-unused-vars
rule then you can disable this rule.
This rule was introduced in eslint-plugin-vue v7.13.0