Skip to content

vue/no-unused-properties

disallow unused properties

📖 Rule Details

This rule is aimed at eliminating unused properties.

Note

This rule cannot check for use of properties by other components (e.g. mixins, property access via $refs) and use in places where the scope cannot be determined. Some access to properties might be implied, for example accessing data or computed via a variable such as this[varName]. In this case, the default is to assume all properties, methods, etc. are 'used'. See the unreferencedOptions for a more strict interpretation of 'use' in these cases.

<!-- ✓ GOOD --> <template> <div>{{ count }}</div> </template> <script> export default { props: ['count'] } </script>
Now loading...
<!-- ✗ BAD (`count` property not used) --> <template> <div>{{ cnt }}</div> </template> <script> export default { props: ['count'] } </script>
Now loading...

🔧 Options

json
{
  "vue/no-unused-properties": ["error", {
    "groups": ["props"],
    "deepData": false,
    "ignorePublicMembers": false,
    "unreferencedOptions": []
  }]
}
  • 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) If true, the object of the property defined in data will be searched deeply. Default is false. Include "data" in groups to use this option.
  • ignorePublicMembers (boolean) If true, members marked with a JSDoc /** @public */ tag will be ignored. Default is false.
  • unreferencedOptions (string[]) Array of access methods that should be interpreted as leaving properties unreferenced. Currently, two such methods are available: unknownMemberAsUnreferenced, and returnAsUnreferenced. See examples below.

"groups": ["props", "data"]

<!-- ✓ GOOD --> <script> export default { data() { return { count: null } }, created() { this.count = 2 } } </script>
Now loading...
<!-- ✗ BAD (`count` data not used) --> <script> export default { data() { return { count: null } }, created() { this.cnt = 2 } } </script>
Now loading...

{ "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>
Now loading...

"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>
Now loading...
<!-- ✗ 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>
Now loading...

{ "groups": ["props", "methods"], "ignorePublicMembers": true }

<!-- ✓ GOOD --> <template> <button @click="usedInTemplate()" /> </template> <script> export default { methods: { /* ✓ GOOD */ usedInTemplate() {}, /* ✓ GOOD */ /** @public */ publicMethod() {}, /* ✗ BAD */ unusedMethod() {} } } </script>
Now loading...

{ "groups": ["computed"], "unreferencedOptions": ["unknownMemberAsUnreferenced"] }

<template></template> <script> export default { computed: { one() { return 1 }, two() { return 2 } }, methods: { handler() { /* ✓ GOOD - explicit access to computed */ const a = this.one const i = 'two' /* ✗ BAD - unknown access via a variable, two will be reported as unreferenced */ return this[i] }, } } </script>
Now loading...

{ "groups": ["computed"], "unreferencedOptions": ["returnAsUnreferenced"] }

<template></template> <script> export default { computed: { one() { return 1 }, two() { return 2 } }, methods: { handler() { /* ✓ GOOD - explicit access to computed */ const a = this.one /* ✗ BAD - any property could be accessed by returning `this`, but two will still be reported as unreferenced */ return this }, } } </script>
Now loading...

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation