# 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>
Now loading...
<!-- ✗ BAD (`count` property not used) --> <template> <div>{{ cnt }}</div> </template> <script> export default { props: ['count'] } </script>
Now loading...

# 🔧 Options

{
  "vue/no-unused-properties": ["error", {
    "groups": ["props"],
    "deepData": 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) 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.

# "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...

# 🚀 Version

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

# 🔍 Implementation

Last Updated: 12/27/2020, 10:52:08 PM