vue/require-direct-export Style
What it does
This rule requires that the component object be directly exported.
Why is this bad?
Indirect exports can make it harder to understand the component structure and may cause issues with Vue's component system.
Examples
Examples of incorrect code for this rule:
vue
<script>
const A = {};
export default A;
</script>vue
<script>
export default function () {}
</script>Examples of correct code for this rule:
vue
<script>
export default {};
</script>vue
<script>
export default function (props) {
return h("div", props.msg);
}
</script>Examples of incorrect code for this rule with the disallowFunctionalComponentFunction: true option:
vue
<script>
export default (props) => h("div", props.msg);
</script>Configuration
This rule accepts a configuration object with the following properties:
disallowFunctionalComponentFunction
type: boolean
default: false
When set true, disallow functional component functions.
How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["vue"],
"rules": {
"vue/require-direct-export": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/require-direct-export": "error",
},
});bash
oxlint --deny vue/require-direct-export --vue-pluginVersion
This rule was added in vnext.