JS.VUE.NO.UNUSED.PROPERTIES

Rule Details

This rule is aimed at eliminating unused properties.

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.

{'vue/no-unused-properties': ['error']}

<!-- GOOD -->
<template>
  <div>{{ count }}</div>
</template>
<script>
  export default {
    props: ['count']
  }
</script>

{'vue/no-unused-properties': ['error']}

<!-- 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) 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 (https://jsdoc.app/tags-public.html) will be ignored. Default is false.

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

{'vue/no-unused-properties': ['error', {groups: ['props', 'data']}]}

<!-- GOOD -->
<script>
  export default {
    data() {
      return {
        count: null
      }
    },
    created() {
      this.count = 2
    }
  }
</script>

{'vue/no-unused-properties': ['error', {groups: ['props', 'data']}]}

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

{ "groups": ["props", "data"], "deepData": true }

{'vue/no-unused-properties': ['error', {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"]

{'vue/no-unused-properties': ['error', {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>

{'vue/no-unused-properties': ['error', {groups: ['props', 'computed']}]}

<!-- 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 }

{'vue/no-unused-properties': ['error', {groups: ['props', 'methods'], ignorePublicMembers: true}]}

<!-- GOOD -->
<template>
  <button @click="usedInTemplate()" />
</template>
<script>
  export default {
    methods: {
      /* GOOD */
      usedInTemplate() {},

      /* GOOD */
      /** @public */
      publicMethod() {},

      /* BAD */
      unusedMethod() {}
    }
  }
</script>