require-direct-export.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/require-direct-export	require the component to be directly exported	v5.2.0

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" ... If true, disallow functional component functions, available in Vue 3.x. default false

"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

🔍 Implementation

• Rule source
• Test source