← Back to rules

vue/require-render-return Correctness

What it does

Enforce that a render function always returns a value.

Why is this bad?

A Vue component's render function must produce a VNode tree. If a code path falls through without returning, Vue receives undefined and silently renders nothing.

Examples

Examples of incorrect code for this rule:

<script>
export default {
  render() {
    if (foo) {
      return h("div");
    }
    // falls through without returning
  },
};
</script>

Examples of correct code for this rule:

<script>
export default {
  render() {
    return h("div");
  },
};
</script>

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/require-render-return": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/require-render-return": "error",
  },
});

CLI

oxlint --deny vue/require-render-return --vue-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground