noVueUndeclaredProperties (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueUndeclaredProperties
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/no-undef-properties

How to configure

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

Description

Disallow using properties that a Vue component doesn’t declare.

A component’s template and its this can only use what the component declares: its props, data, computed properties, methods, injected values, the values its setup() function returns, and the variables of <script setup>. Using any other name gives undefined. This usually means the name has a typo, or the declaration was removed or never written.

This rule reports such names in the template, in this.name inside the component’s options, and in props.name when props is the object returned by defineProps() or passed to setup(). It also reports names written as strings in the watch and expose options, and members that a data property doesn’t have when its value is an object written in place, such as user.nmae when data() returns { user: { name: "" } }.

Names that start with $, such as $route or $t, are never reported, because plugins commonly add properties with these names to every component.

The rule reports nothing for a component when it can’t know everything the component declares. That is the case when:

the component uses mixins or extends;
an object is copied into the options with ..., as in computed: { ...mapState(["user"]) };
an option such as data or setup returns something other than an object written in place, as in return toRefs(state);
the props are declared with a TypeScript type that is imported from another file;
the component has a <script src> block.

Examples

Invalid

1
import { defineComponent } from "vue";
2

3
export default defineComponent({
4
  data() {
5
    return { count: 0 };
6
  },
7
  methods: {
8
    increment() {
9
      this.cnt++;
10
    },
11
  },
12
});

code-block.js:9:12 lint/nursery/noVueUndeclaredProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ cnt isn't declared by this component.
  
     7 │   methods: {
     8 │     increment() {
   > 9 │       this.cnt++;
       │            ^^^
    10 │     },
    11 │   },
  
  ℹ Vue doesn't track changes to it, so the page doesn't update when it changes.
  
  ℹ This often means the name has a typo, or its declaration is missing.
  
  ℹ Fix the name, or declare it in the component.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script setup>
2
const props = defineProps(["name"]);
3
console.log(props.title);
4
</script>

code-block.vue:3:19 lint/nursery/noVueUndeclaredProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ title isn't declared as a prop of this component.
  
    1 │ <script setup>
    2 │ const props = defineProps(["name"]);
  > 3 │ console.log(props.title);
      │                   ^^^^^
    4 │ </script>
    5 │ 
  
  ℹ Its value is always undefined.
  
  ℹ This often means the name has a typo, or its declaration is missing.
  
  ℹ Fix the name, or declare it in the component.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script setup>
2
const count = 0;
3
</script>
4

5
<template>
6
  <p>{{ cnt }}</p>
7
</template>

Valid

1
<script>
2
export default {
3
  props: ["name"],
4
  data() {
5
    return { count: 0 };
6
  },
7
  methods: {
8
    increment() {
9
      this.count++;
10
    },
11
  },
12
};
13
</script>
14

15
<template>
16
  <button @click="increment">{{ name }}: {{ count }} {{ $t("clicks") }}</button>
17
</template>

Options

`ignore`

A list of property names that are never reported. Use it for properties that a plugin adds to every component, when their names don’t start with $.

Default: []

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueUndeclaredProperties": {
6
          "level": "on",
7
          "options": {
8
            "ignore": [
9
              "i18n"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

1
import { defineComponent } from "vue";
2

3
export default defineComponent({
4
  methods: {
5
    greet() {
6
      return this.i18n.translate("hello");
7
    },
8
  },
9
});