noVueDeprecatedDestroyedLifecycle (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedDestroyedLifecycle
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-destroyed-lifecycle

How to configure

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

Description

Disallow the deprecated destroyed and beforeDestroy lifecycle hooks in Vue components.

Vue 3 renamed the beforeDestroy hook to beforeUnmount, and the destroyed hook to unmounted. Vue 3 doesn’t call hooks that use the old names, so the code inside them never runs.

See the Vue 3 migration guide for more information.

Examples

Invalid

1
<script>
2
export default {
3
  beforeDestroy() {},
4
};
5
</script>

code-block.vue:3:3 lint/nursery/noVueDeprecatedDestroyedLifecycle  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The beforeDestroy hook was renamed to beforeUnmount in Vue 3.
  
    1 │ <script>
    2 │ export default {
  > 3 │   beforeDestroy() {},
      │   ^^^^^^^^^^^^^
    4 │ };
    5 │ </script>
  
  ℹ Vue 3 doesn't call the beforeDestroy hook, so the code inside it never runs.
  
  ℹ Rename the hook to beforeUnmount.
  
  ℹ 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.
  
  ℹ Unsafe fix: Rename the hook to beforeUnmount.
  
    1 1 │   <script>
    2 2 │   export default {
    3   │ - ··beforeDestroy()·{},
      3 │ + ··beforeUnmount()·{},
    4 4 │   };
    5 5 │   </script>

1
<script>
2
export default {
3
  destroyed() {},
4
};
5
</script>

code-block.vue:3:3 lint/nursery/noVueDeprecatedDestroyedLifecycle  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The destroyed hook was renamed to unmounted in Vue 3.
  
    1 │ <script>
    2 │ export default {
  > 3 │   destroyed() {},
      │   ^^^^^^^^^
    4 │ };
    5 │ </script>
  
  ℹ Vue 3 doesn't call the destroyed hook, so the code inside it never runs.
  
  ℹ Rename the hook to unmounted.
  
  ℹ 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.
  
  ℹ Unsafe fix: Rename the hook to unmounted.
  
    1 1 │   <script>
    2 2 │   export default {
    3   │ - ··destroyed()·{},
      3 │ + ··unmounted()·{},
    4 4 │   };
    5 5 │   </script>

Valid

1
<script>
2
export default {
3
  beforeMount() {},
4
  mounted() {},
5
  beforeUnmount() {},
6
  unmounted() {},
7
};
8
</script>