# vue/require-direct-export
require the component to be directly exported
# 📖 Rule Details
This rule aims to require that the component object be directly exported.
<script>
/* ✓ GOOD */
export default {
name: 'ComponentA',
data() {
return {
state: 1
}
}
}
</script>
<script>
const ComponentA = {
name: 'ComponentA',
data() {
return {
state: 1
}
}
}
/* ✗ BAD */
export default ComponentA
</script>
# 🔧 Options
{
"vue/require-direct-export": ["error", {
"disallowFunctionalComponentFunction": false
}]
}
"disallowFunctionalComponentFunction"... Iftrue, disallow functional component functions, available in Vue 3.x. defaultfalse
# "disallowFunctionalComponentFunction": false
<script>
/* ✓ GOOD */
export default props => h('div', props.msg)
</script>
# "disallowFunctionalComponentFunction": true
<script>
/* ✗ BAD */
export default props => h('div', props.msg)
</script>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v5.2.0