useVueComputedPropertyReturn (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueComputedPropertyReturn
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/return-in-computed-property

How to configure

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

Description

Require computed properties in Vue components to return a value.

The value of a computed property is whatever its getter function returns. When the getter can finish without returning a value, the computed property is undefined, which is almost always a mistake, such as a forgotten return keyword or a missing else branch.

This rule checks the getters of properties in the computed option, and the getters passed to computed() at the top level of <script setup>. A return statement without a value is reported too, because it also makes the computed property undefined.

Examples

Invalid

1
<script>
2
export default {
3
  computed: {
4
    fullName() {
5
      this.firstName + " " + this.lastName;
6
    },
7
  },
8
};
9
</script>

code-block.vue:4:5 lint/nursery/useVueComputedPropertyReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The computed property fullName doesn't always return a value.
  
    2 │ export default {
    3 │   computed: {
  > 4 │     fullName() {
      │     ^^^^^^^^^^^^
  > 5 │       this.firstName + " " + this.lastName;
  > 6 │     },
      │     ^
    7 │   },
    8 │ };
  
  ℹ Vue uses the value the getter returns as the value of the computed property. When the getter ends without a return statement, the computed property is undefined.
  
  ℹ Make sure that every path through the getter ends with a return statement that returns a value.
  
  ℹ 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>
2
export default {
3
  computed: {
4
    label() {
5
      if (this.count > 0) {
6
        return `${this.count} items`;
7
      }
8
    },
9
  },
10
};
11
</script>

code-block.vue:4:5 lint/nursery/useVueComputedPropertyReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The computed property label doesn't always return a value.
  
     2 │ export default {
     3 │   computed: {
   > 4 │     label() {
       │     ^^^^^^^^^
   > 5 │       if (this.count > 0) {
   > 6 │         return `${this.count} items`;
   > 7 │       }
   > 8 │     },
       │     ^
     9 │   },
    10 │ };
  
  ℹ Vue uses the value the getter returns as the value of the computed property. When the getter ends without a return statement, the computed property is undefined.
  
  ℹ Make sure that every path through the getter ends with a return statement that returns a value.
  
  ℹ 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
import { computed, ref } from "vue";
3

4
const count = ref(0);
5
const double = computed(() => {
6
  count.value * 2;
7
});
8
</script>

code-block.vue:5:25 lint/nursery/useVueComputedPropertyReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The computed property double doesn't always return a value.
  
    4 │ const count = ref(0);
  > 5 │ const double = computed(() => {
      │                         ^^^^^^^
  > 6 │   count.value * 2;
  > 7 │ });
      │ ^
    8 │ </script>
    9 │ 
  
  ℹ Vue uses the value the getter returns as the value of the computed property. When the getter ends without a return statement, the computed property is undefined.
  
  ℹ Make sure that every path through the getter ends with a return statement that returns a value.
  
  ℹ 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
import { computed, ref } from "vue";
3

4
const count = ref(0);
5
const double = computed(() => {
6
  if (count.value > 0) {
7
    return;
8
  }
9
  return count.value * 2;
10
});
11
</script>

code-block.vue:7:5 lint/nursery/useVueComputedPropertyReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This return statement in the computed property double doesn't return a value.
  
    5 │ const double = computed(() => {
    6 │   if (count.value > 0) {
  > 7 │     return;
      │     ^^^^^^^
    8 │   }
    9 │   return count.value * 2;
  
  ℹ A return statement without a value makes the computed property undefined.
  
  ℹ Return the value of the computed property from this statement.
  
  ℹ 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.

Valid

1
<script>
2
export default {
3
  computed: {
4
    fullName() {
5
      return this.firstName + " " + this.lastName;
6
    },
7
    label: {
8
      get() {
9
        return this.count > 0 ? `${this.count} items` : "empty";
10
      },
11
      set(value) {
12
        this.count = Number.parseInt(value);
13
      },
14
    },
15
  },
16
};
17
</script>

1
<script setup>
2
import { computed, ref } from "vue";
3

4
const count = ref(0);
5
const double = computed(() => count.value * 2);
6
const label = computed(() => {
7
  if (count.value > 0) {
8
    return `${count.value} items`;
9
  }
10
  return "empty";
11
});
12
</script>