feat(lint): add noVueOptionsApi rule (#8648)

Co-authored-by: Carson McManus <dyc3@users.noreply.github.com>

Author: baeseokjae

.changeset/add-no-v-options-api.md

@@ -0,0 +1,21 @@
+---
+"@biomejs/biome": patch
+---
+
+Added a new nursery rule [`noVueOptionsApi`](https://biomejs.dev/linter/rules/no-vue-options-api/).
+
+Biome now reports Vue Options API usage, which is incompatible with Vue 3.6's Vapor Mode.
+This rule detects Options API patterns in `<script>` blocks, `defineComponent()`, and `createApp()` calls,
+helping prepare codebases for Vapor Mode adoption.
+
+For example, the following now triggers this rule:
+
+```vue
+<script>
+export default {
+  data() {
+    return { count: 0 };
+  }
+}
+</script>
+```

crates/biome_configuration/src/analyzer/linter/rules.rs

@@ -35,6 +35,10 @@ declare_lint_rule! {
     /// </script>
     /// ```
     ///
+    /// ## Related Rules
+    ///
+    /// - [noVueOptionsApi](https://biomejs.dev/linter/rules/no-vue-options-api): Disallows the Options API format, which is incompatible with Vapor Mode
+    ///
     pub UseVueVapor {
         version: "2.3.11",
         name: "useVueVapor",

crates/biome_configuration/src/generated/domain_selector.rs

@@ -40,6 +40,7 @@ pub mod no_useless_catch_binding;
 pub mod no_useless_undefined;
 pub mod no_vue_data_object_declaration;
 pub mod no_vue_duplicate_keys;
+pub mod no_vue_options_api;
 pub mod no_vue_reserved_keys;
 pub mod no_vue_reserved_props;
 pub mod no_vue_setup_props_reactivity_loss;
@@ -60,4 +61,4 @@ pub mod use_spread;
 pub mod use_vue_consistent_define_props_declaration;
 pub mod use_vue_define_macros_order;
 pub mod use_vue_multi_word_component_names;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_ambiguous_anchor_text :: NoAmbiguousAnchorText , self :: no_before_interactive_script_outside_document :: NoBeforeInteractiveScriptOutsideDocument , self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_duplicate_enum_values :: NoDuplicateEnumValues , self :: no_duplicated_spread_props :: NoDuplicatedSpreadProps , self :: no_empty_source :: NoEmptySource , self :: no_equals_to_null :: NoEqualsToNull , self :: no_excessive_lines_per_file :: NoExcessiveLinesPerFile , self :: no_floating_promises :: NoFloatingPromises , self :: no_for_in :: NoForIn , self :: no_import_cycles :: NoImportCycles , self :: no_increment_decrement :: NoIncrementDecrement , self :: no_jsx_literals :: NoJsxLiterals , self :: no_jsx_props_bind :: NoJsxPropsBind , self :: no_leaked_render :: NoLeakedRender , self :: no_misused_promises :: NoMisusedPromises , self :: no_multi_assign :: NoMultiAssign , self :: no_multi_str :: NoMultiStr , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_proto :: NoProto , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_return_assign :: NoReturnAssign , self :: no_script_url :: NoScriptUrl , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_ternary :: NoTernary , self :: no_undeclared_env_vars :: NoUndeclaredEnvVars , self :: no_unknown_attribute :: NoUnknownAttribute , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_unused_expressions :: NoUnusedExpressions , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: no_vue_setup_props_reactivity_loss :: NoVueSetupPropsReactivityLoss , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_await_thenable :: UseAwaitThenable , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_destructuring :: UseDestructuring , self :: use_error_cause :: UseErrorCause , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_regexp_exec :: UseRegexpExec , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_consistent_define_props_declaration :: UseVueConsistentDefinePropsDeclaration , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_ambiguous_anchor_text :: NoAmbiguousAnchorText , self :: no_before_interactive_script_outside_document :: NoBeforeInteractiveScriptOutsideDocument , self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_duplicate_enum_values :: NoDuplicateEnumValues , self :: no_duplicated_spread_props :: NoDuplicatedSpreadProps , self :: no_empty_source :: NoEmptySource , self :: no_equals_to_null :: NoEqualsToNull , self :: no_excessive_lines_per_file :: NoExcessiveLinesPerFile , self :: no_floating_promises :: NoFloatingPromises , self :: no_for_in :: NoForIn , self :: no_import_cycles :: NoImportCycles , self :: no_increment_decrement :: NoIncrementDecrement , self :: no_jsx_literals :: NoJsxLiterals , self :: no_jsx_props_bind :: NoJsxPropsBind , self :: no_leaked_render :: NoLeakedRender , self :: no_misused_promises :: NoMisusedPromises , self :: no_multi_assign :: NoMultiAssign , self :: no_multi_str :: NoMultiStr , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_proto :: NoProto , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_return_assign :: NoReturnAssign , self :: no_script_url :: NoScriptUrl , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_ternary :: NoTernary , self :: no_undeclared_env_vars :: NoUndeclaredEnvVars , self :: no_unknown_attribute :: NoUnknownAttribute , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_unused_expressions :: NoUnusedExpressions , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_options_api :: NoVueOptionsApi , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: no_vue_setup_props_reactivity_loss :: NoVueSetupPropsReactivityLoss , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_await_thenable :: UseAwaitThenable , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_destructuring :: UseDestructuring , self :: use_error_cause :: UseErrorCause , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_regexp_exec :: UseRegexpExec , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_consistent_define_props_declaration :: UseVueConsistentDefinePropsDeclaration , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }

crates/biome_diagnostics_categories/src/categories.rs

@@ -0,0 +1,216 @@
+use biome_analyze::{Rule, RuleDiagnostic, RuleDomain, context::RuleContext, declare_lint_rule};
+use biome_console::markup;
+use biome_diagnostics::Severity;
+use biome_js_syntax::{AnyJsExpression, JsFileSource};
+use biome_rowan::{AstNode, TextRange};
+use biome_rule_options::no_vue_options_api::NoVueOptionsApiOptions;
+
+use crate::frameworks::vue::vue_call::is_vue_api_reference;
+use crate::frameworks::vue::vue_component::{
+    AnyVueComponent, VueComponent, VueComponentQuery, VueOptionsApiBasedComponent,
+};
+
+declare_lint_rule! {
+    /// Disallow the use of Vue Options API.
+    ///
+    /// Vue 3.6's Vapor Mode does not support the Options API.
+    /// Components must use the Composition API (`<script setup>` or `defineComponent` with function signature) instead.
+    ///
+    /// This rule helps prepare codebases for Vapor Mode by detecting Options API
+    /// patterns that are incompatible with the new rendering mode.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```vue,expect_diagnostic
+    /// <script>
+    /// export default {
+    ///   data() {
+    ///     return { count: 0 }
+    ///   }
+    /// }
+    /// </script>
+    /// ```
+    ///
+    /// ```vue,expect_diagnostic
+    /// <script>
+    /// export default {
+    ///   methods: {
+    ///     increment() {
+    ///       this.count++
+    ///     }
+    ///   }
+    /// }
+    /// </script>
+    /// ```
+    ///
+    /// ```vue,expect_diagnostic
+    /// <script>
+    /// export default {
+    ///   computed: {
+    ///     doubled() {
+    ///       return this.count * 2
+    ///     }
+    ///   }
+    /// }
+    /// </script>
+    /// ```
+    ///
+    /// ```vue,expect_diagnostic
+    /// <script>
+    /// export default {
+    ///   mounted() {
+    ///     console.log('Component mounted')
+    ///   }
+    /// }
+    /// </script>
+    /// ```
+    ///
+    /// ```js,expect_diagnostic
+    /// import { defineComponent } from 'vue'
+    ///
+    /// defineComponent({
+    ///   name: 'MyComponent',
+    ///   data() {
+    ///     return { count: 0 }
+    ///   }
+    /// })
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```vue
+    /// <script setup>
+    /// import { ref } from 'vue'
+    /// const count = ref(0)
+    /// </script>
+    /// ```
+    ///
+    /// ```vue
+    /// <script setup>
+    /// import { ref, computed } from 'vue'
+    ///
+    /// const count = ref(0)
+    /// const doubled = computed(() => count.value * 2)
+    /// </script>
+    /// ```
+    ///
+    /// ```vue
+    /// <script setup>
+    /// import { onMounted } from 'vue'
+    ///
+    /// onMounted(() => {
+    ///   console.log('Component mounted')
+    /// })
+    /// </script>
+    /// ```
+    ///
+    /// ## Related Rules
+    ///
+    /// - [useVueVapor](https://biomejs.dev/linter/rules/use-vue-vapor): Enforces the use of Vapor mode in Vue components
+    ///
+    /// ## Resources
+    ///
+    /// - [Vue 3 Composition API](https://vuejs.org/api/composition-api-setup.html)
+    /// - [Options API vs Composition API](https://vuejs.org/guide/introduction.html#api-styles)
+    ///
+    pub NoVueOptionsApi {
+        version: "next",
+        name: "noVueOptionsApi",
+        language: "js",
+        recommended: false,
+        severity: Severity::Error,
+        domains: &[RuleDomain::Vue],
+    }
+}
+
+/// State for detected Options API component.
+pub struct RuleState {
+    range: TextRange,
+}
+
+impl Rule for NoVueOptionsApi {
+    type Query = VueComponentQuery;
+    type State = RuleState;
+    type Signals = Option<Self::State>;
+    type Options = NoVueOptionsApiOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let component = VueComponent::from_potential_component(
+            ctx.query(),
+            ctx.model(),
+            ctx.source_type::<JsFileSource>(),
+            ctx.file_path(),
+        )?;
+
+        // <script setup> or defineComponent with function signature are valid for Vapor Mode
+        match component.kind() {
+            AnyVueComponent::Setup(_) => None,
+            AnyVueComponent::OptionsApi(opts) => {
+                let expr = opts.definition_expression()?;
+                if is_define_component_or_create_app(&expr, ctx.model()) {
+                    return None;
+                }
+                Some(RuleState {
+                    range: expr.range(),
+                })
+            }
+            AnyVueComponent::DefineComponent(component) => {
+                if component.setup_func().is_some() {
+                    return None;
+                }
+                let definition = component.definition_expression()?;
+                if definition.as_js_object_expression().is_some() {
+                    Some(RuleState {
+                        range: definition.range(),
+                    })
+                } else {
+                    None
+                }
+            }
+            AnyVueComponent::CreateApp(component) => {
+                let definition = component.definition_expression()?;
+                if definition.as_js_object_expression().is_some() {
+                    Some(RuleState {
+                        range: definition.range(),
+                    })
+                } else {
+                    None
+                }
+            }
+        }
+    }
+
+    fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                state.range,
+                markup! {
+                    "Using the Options API is not allowed."
+                },
+            )
+            .note(markup! {
+                "Although the Options API is still supported by Vue, using the Composition API is recommended, and makes it possible to use Vue's Vapor mode for better performance."
+            })
+            .note(markup! {
+                "Use "<Emphasis>"<script setup>"</Emphasis>" or "<Emphasis>"defineComponent"</Emphasis>" with a function signature to use the "<Hyperlink href="https://vuejs.org/guide/introduction.html#composition-api">"Composition API"</Hyperlink>" instead."
+            }),
+        )
+    }
+}
+
+fn is_define_component_or_create_app(
+    expr: &AnyJsExpression,
+    model: &biome_js_semantic::SemanticModel,
+) -> bool {
+    let Some(call_expr) = expr.as_js_call_expression() else {
+        return false;
+    };
+    let Some(callee) = call_expr.callee().ok().and_then(|c| c.inner_expression()) else {
+        return false;
+    };
+    is_vue_api_reference(&callee, model, "defineComponent")
+        || is_vue_api_reference(&callee, model, "createApp")
+}

crates/biome_html_analyze/src/lint/nursery/use_vue_vapor.rs

@@ -0,0 +1,11 @@
+<script>
+// should generate diagnostics
+// createApp with Options API is not supported in Vapor Mode
+import { createApp } from "vue";
+
+createApp({
+	data() {
+		return { count: 0 };
+	},
+}).mount("#app");
+</script>

crates/biome_js_analyze/src/lint/nursery.rs

@@ -0,0 +1,43 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: invalid-createapp-data.vue
+---
+# Input
+```ts
+// should generate diagnostics
+// createApp with Options API is not supported in Vapor Mode
+import { createApp } from "vue";
+
+createApp({
+	data() {
+		return { count: 0 };
+	},
+}).mount("#app");
+
+```
+
+# Diagnostics
+```
+invalid-createapp-data.vue:5:11 lint/nursery/noVueOptionsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Using the Options API is not allowed.
+  
+     3 │ import { createApp } from "vue";
+     4 │ 
+   > 5 │ createApp({
+       │           ^
+   > 6 │ 	data() {
+   > 7 │ 		return { count: 0 };
+   > 8 │ 	},
+   > 9 │ }).mount("#app");
+       │ ^
+    10 │ 
+  
+  i Although the Options API is still supported by Vue, using the Composition API is recommended, and makes it possible to use Vue's Vapor mode for better performance.
+  
+  i Use <script setup> or defineComponent with a function signature to use the Composition API instead.
+  
+  i 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.
+  
+
+```

crates/biome_js_analyze/src/lint/nursery/no_vue_options_api.rs

@@ -0,0 +1,5 @@
+// should generate diagnostics
+// createApp with empty object is Options API style
+import { createApp } from "vue";
+
+createApp({}).mount("#app");