---
url: /docs/guide/usage/linter/rules/vue/require-direct-export.md
---

### 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

## Version

This rule was added in v1.69.0.

## References