noVueExportInScriptSetup (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.8
Diagnostic Category: lint/nursery/noVueExportInScriptSetup
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-export-in-script-setup

How to configure

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

Description

Disallow export in <script setup>.

Everything declared at the top level of <script setup> is already available to the component’s template, so there is nothing to export. Vue fails to compile a component whose <script setup> block exports a value.

To share values with other modules, export them from a separate, regular <script> block in the same file. To expose values to a parent component, use defineExpose().

TypeScript type exports, such as export type and export interface, are allowed, because they are removed when the code is compiled. TypeScript’s export = and export as namespace forms are also allowed.

Examples

Invalid

1
<script setup>
2
export const message = "Hello";
3
</script>

code-block.vue:2:1 lint/nursery/noVueExportInScriptSetup ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ <script setup> can't contain exports.
  
    1 │ <script setup>
  > 2 │ export const message = "Hello";
      │ ^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Vue fails to compile a component when its <script setup> block exports a value. Top-level declarations are already available to the template.
  
  ℹ Remove the export. To share the value with other modules, move the export to a regular <script> block. To expose it to a parent component, use defineExpose().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script setup>
2
export default {};
3
</script>

code-block.vue:2:1 lint/nursery/noVueExportInScriptSetup ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ <script setup> can't contain exports.
  
    1 │ <script setup>
  > 2 │ export default {};
      │ ^^^^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Vue fails to compile a component when its <script setup> block exports a value. Top-level declarations are already available to the template.
  
  ℹ Remove the export. To share the value with other modules, move the export to a regular <script> block. To expose it to a parent component, use defineExpose().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script setup>
2
const count = 1;
3
export { count };
4
</script>

code-block.vue:3:1 lint/nursery/noVueExportInScriptSetup ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ <script setup> can't contain exports.
  
    1 │ <script setup>
    2 │ const count = 1;
  > 3 │ export { count };
      │ ^^^^^^^^^^^^^^^^^
    4 │ </script>
    5 │ 
  
  ℹ Vue fails to compile a component when its <script setup> block exports a value. Top-level declarations are already available to the template.
  
  ℹ Remove the export. To share the value with other modules, move the export to a regular <script> block. To expose it to a parent component, use defineExpose().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script lang="ts">
2
export const message = "Hello";
3
</script>
4
<script setup lang="ts">
5
export type Size = "small" | "large";
6
export interface Props {
7
  size: Size;
8
}
9

10
const count = 1;
11
defineExpose({ count });
12
</script>