useVueDefineOptions (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useVueDefineOptions
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/prefer-define-options

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueDefineOptions": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce defineOptions() instead of a default export in components that use <script setup>.

A Vue single-file component can have two script blocks: a plain <script> block and a <script setup> block. Before Vue 3.3, options such as name or inheritAttrs could only be set with export default { ... } in the plain <script> block, so the component was split across both blocks.

Since Vue 3.3, the defineOptions() macro sets these options directly inside <script setup>. A macro is a function that the Vue compiler handles at build time, so it doesn’t need to be imported. Using it keeps the whole component in one block.

This rule reports the default export of a plain <script> block when the same file also has a <script setup> block.

Examples

Invalid

1
<script>
2
export default {
3
  name: "MyComponent",
4
  inheritAttrs: false,
5
};
6
</script>
7

8
<script setup>
9
const props = defineProps(["title"]);
10
</script>

Valid

1
<script setup>
2
defineOptions({
3
  name: "MyComponent",
4
  inheritAttrs: false,
5
});
6

7
const props = defineProps(["title"]);
8
</script>

A component without <script setup> still uses a default export:

1
<script>
2
export default {
3
  name: "MyComponent",
4
};
5
</script>

Resources

defineOptions()