← Back to rules

vue/require-slots-as-functions Correctness

What it does

Enforce properties of $slots to be used as a function.

Why is this bad?

In Vue.js 3, this.$slots.<name> is a function (slot render function), not an array of vnodes like in Vue.js 2. Treating slot properties as values (e.g. this.$slots.default.filter(...)) breaks at runtime.

Examples

Examples of incorrect code for this rule:

<script>
export default {
  render(h) {
    var children = this.$slots.default
    return h('div', children.filter(...))
  }
}
</script>

Examples of correct code for this rule:

<script>
export default {
  render(h) {
    var children = this.$slots.default();
    return h("div", children);
  },
};
</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-slots-as-functions": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

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

CLI

oxlint --deny vue/require-slots-as-functions --vue-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Open rule in Oxc Playground