# vue/no-unused-properties
disallow unused properties
# 📖 Rule Details
This rule is aimed at eliminating unused properties.
Note
This rule cannot be checked for use in other components (e.g. mixins, Property access via $refs) and use in places where the scope cannot be determined.
<!-- ✓ GOOD -->
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
<!-- ✗ BAD (`count` property not used) -->
<template>
<div>{{ cnt }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
# 🔧 Options
{
"vue/no-unused-properties": ["error", {
"groups": ["props"],
"deepData": false,
"ignorePublicMembers": false
}]
}
groups(string[]) Array of groups to search for properties. Default is["props"]. The value of the array is some of the following strings:"props""data""computed""methods""setup"
deepData(boolean) Iftrue, the object of the property defined indatawill be searched deeply. Default isfalse. Include"data"ingroupsto use this option.ignorePublicMembers(boolean) Iftrue, members marked with a JSDoc/** @public */tag (opens new window) will be ignored. Default isfalse.
# "groups": ["props", "data"]
<!-- ✓ GOOD -->
<script>
export default {
data() {
return {
count: null
}
},
created() {
this.count = 2
}
}
</script>
<!-- ✗ BAD (`count` data not used) -->
<script>
export default {
data() {
return {
count: null
}
},
created() {
this.cnt = 2
}
}
</script>
# { "groups": ["props", "data"], "deepData": true }
<template>
<Foo :param="state.used">
</template>
<script>
export default {
data() {
return {
state: {
/* ✓ GOOD */
used: null,
/* ✗ BAD (`state.unused` data not used) */
unused: null
}
}
}
}
</script>
# "groups": ["props", "computed"]
<!-- ✓ GOOD -->
<template>
<p>{{ reversedMessage }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
<!-- ✗ BAD (`reversedMessage` computed property not used) -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
# { "groups": ["props", "methods"], "ignorePublicMembers": true }
<!-- ✓ GOOD -->
<template>
<button @click="usedInTemplate()" />
</template>
<script>
export default {
methods: {
/* ✓ GOOD */
usedInTemplate() {},
/* ✓ GOOD */
/** @public */
publicMethod() {},
/* ✗ BAD */
unusedMethod() {}
}
}
</script>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0