noVueReservedKeys

JavaScript (and super languages)

Summary

Rule available since: v2.1.3
Diagnostic Category: lint/nursery/noVueReservedKeys
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-reserved-keys

Description

Disallow reserved keys in Vue component data and computed properties.

Vue reserves certain keys for its internal use. Using these reserved keys in data properties, computed properties, methods, or other component options can cause conflicts and unpredictable behavior in your Vue components.

This rule prevents the use of Vue reserved keys such as:

Keys starting with $ (e.g., $el, $data, $props, $refs, etc.)
Keys starting with _ in data properties (reserved for Vue internals)

Examples

Invalid

1
<script>
2
export default {
3
    data: {
4
        $el: '',
5
    },
6
};
7
</script>

code-block.vue:3:9 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Key $el is reserved in Vue.
  
    1 │ export default {
    2 │     data: {
  > 3 │         $el: ”,
      │         ^^^
    4 │     },
    5 │ };
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

1
<script>
2
export default {
3
    data() {
4
        return {
5
            _foo: 'bar',
6
        };
7
    },
8
};
9
</script>

code-block.vue:4:13 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Keys starting with an underscore are reserved in Vue.
  
    2 │     data() {
    3 │         return {
  > 4 │             _foo: ‘bar’,
      │             ^^^^
    5 │         };
    6 │     },
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

1
<script>
2
export default {
3
    computed: {
4
        $data() {
5
            return this.someData;
6
        },
7
    },
8
};
9
</script>

code-block.vue:3:9 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Key $data is reserved in Vue.
  
    1 │ export default {
    2 │     computed: {
  > 3 │         $data() {
      │         ^^^^^
    4 │             return this.someData;
    5 │         },
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

1
<script>
2
export default {
3
    methods: {
4
        $emit() {
5
            // This conflicts with Vue's built-in $emit
6
        },
7
    },
8
};
9
</script>

code-block.vue:3:9 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Key $emit is reserved in Vue.
  
    1 │ export default {
    2 │     methods: {
  > 3 │         $emit() {
      │         ^^^^^
    4 │             // This conflicts with Vue’s built-in $emit
    5 │         },
  
  ℹ Rename the key to avoid conflicts with Vue reserved keys.

Valid

1
<script>
2
export default {
3
    data() {
4
        return {
5
            message: 'Hello Vue!',
6
            count: 0,
7
        };
8
    },
9
};
10
</script>

1
<script>
2
export default {
3
    computed: {
4
        displayMessage() {
5
            return this.message;
6
        },
7
    },
8
};
9
</script>

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueReservedKeys": "error"
6
      }
7
    }
8
  }
9
}