biomejs · dyc3 · Nov 12, 2025 · Nov 9, 2025
diff --git a/.changeset/use-vue-valid-v-else-if.md b/.changeset/use-vue-valid-v-else-if.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the rule [`useVueValidVElseIf`](https://biomejs.dev/linter/rules/use-vue-valid-v-else-if/) to enforce valid `v-else-if` directives in Vue templates. This rule reports invalid `v-else-if` directives with missing conditional expressions or when not preceded by a `v-if` or `v-else-if` directive.
diff --git a/.changeset/use-vue-valid-v-else.md b/.changeset/use-vue-valid-v-else.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the rule [`useVueValidVElse`](https://biomejs.dev/linter/rules/use-vue-valid-v-else/) to enforce valid `v-else` directives in Vue templates. This rule reports `v-else` directives that are not preceded by a `v-if` or `v-else-if` directive.
diff --git a/.changeset/use-vue-valid-v-html.md b/.changeset/use-vue-valid-v-html.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the rule [`useVueValidVHtml`](https://biomejs.dev/linter/rules/use-vue-valid-v-html/) to enforce valid usage of the `v-html` directive in Vue templates. This rule reports `v-html` directives with missing expressions, unexpected arguments, or unexpected modifiers.
diff --git a/.changeset/use-vue-valid-v-if.md b/.changeset/use-vue-valid-v-if.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the rule [`useVueValidVIf`](https://biomejs.dev/linter/rules/use-vue-valid-v-if/) to enforce valid `v-if` directives in Vue templates. It disallows arguments and modifiers, and ensures a value is provided.
diff --git a/.changeset/use-vue-valid-v-on.md b/.changeset/use-vue-valid-v-on.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the rule [`useVueValidVOn`](https://biomejs.dev/linter/rules/use-vue-valid-v-on/) to enforce valid `v-on` directives in Vue templates. This rule reports invalid `v-on` / shorthand `@` directives with missing event names, invalid modifiers, or missing handler expressions.
diff --git a/crates/biome_configuration/src/analyzer/linter/rules.rs b/crates/biome_configuration/src/analyzer/linter/rules.rs
diff --git a/crates/biome_diagnostics_categories/src/categories.rs b/crates/biome_diagnostics_categories/src/categories.rs
@@ -191,6 +191,13 @@ define_categories! {
     "lint/nursery/noVueDataObjectDeclaration": "https://biomejs.dev/linter/rules/no-vue-data-object-declaration",
     "lint/nursery/noVueDuplicateKeys": "https://biomejs.dev/linter/rules/no-vue-duplicate-keys",
     "lint/nursery/useVueValidVBind": "https://biomejs.dev/linter/rules/use-vue-valid-v-bind",
+    "lint/nursery/useVueValidVIf": "https://biomejs.dev/linter/rules/use-vue-valid-v-if",
+    "lint/nursery/useVueValidVElse": "https://biomejs.dev/linter/rules/use-vue-valid-v-else",
+    "lint/nursery/useVueValidVElseIf": "https://biomejs.dev/linter/rules/use-vue-valid-v-else-if",
+    "lint/nursery/useVueValidVFor": "https://biomejs.dev/linter/rules/use-vue-valid-v-for",
+    "lint/nursery/useVueValidVHtml": "https://biomejs.dev/linter/rules/use-vue-valid-v-html",
+    "lint/nursery/useVueValidVModel": "https://biomejs.dev/linter/rules/use-vue-valid-v-model",
+    "lint/nursery/useVueValidVOn": "https://biomejs.dev/linter/rules/use-vue-valid-v-on",
     "lint/nursery/noVueReservedKeys": "https://biomejs.dev/linter/rules/no-vue-reserved-keys",
     "lint/nursery/noVueReservedProps": "https://biomejs.dev/linter/rules/no-vue-reserved-props",
     "lint/nursery/useAnchorHref": "https://biomejs.dev/linter/rules/use-anchor-href",

diff --git a/crates/biome_html_analyze/src/lint/nursery.rs b/crates/biome_html_analyze/src/lint/nursery.rs
@@ -4,4 +4,9 @@
 
 use biome_analyze::declare_lint_group;
 pub mod use_vue_valid_v_bind;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: use_vue_valid_v_bind :: UseVueValidVBind ,] } }
+pub mod use_vue_valid_v_else;
+pub mod use_vue_valid_v_else_if;
+pub mod use_vue_valid_v_html;
+pub mod use_vue_valid_v_if;
+pub mod use_vue_valid_v_on;
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: use_vue_valid_v_bind :: UseVueValidVBind , self :: use_vue_valid_v_else :: UseVueValidVElse , self :: use_vue_valid_v_else_if :: UseVueValidVElseIf , self :: use_vue_valid_v_html :: UseVueValidVHtml , self :: use_vue_valid_v_if :: UseVueValidVIf , self :: use_vue_valid_v_on :: UseVueValidVOn ,] } }
diff --git a/crates/biome_html_analyze/src/lint/nursery/use_vue_valid_v_else.rs b/crates/biome_html_analyze/src/lint/nursery/use_vue_valid_v_else.rs
@@ -0,0 +1,224 @@
+use biome_analyze::{
+    Ast, Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_html_syntax::{AnyVueDirective, HtmlElement, HtmlSelfClosingElement, VueDirective};
+use biome_rowan::{AstNode, TextRange, declare_node_union};
+use biome_rule_options::use_vue_valid_v_else::UseVueValidVElseOptions;
+
+declare_lint_rule! {
+    /// Enforce valid usage of v-else.
+    ///
+    /// This rule reports v-else directives in the following cases:
+    /// - The directive has an argument. E.g. `<div v-if="foo"></div><div v-else:aaa></div>`
+    /// - The directive has a modifier. E.g. `<div v-if="foo"></div><div v-else.bbb></div>`
+    /// - The directive has an attribute value. E.g. `<div v-if="foo"></div><div v-else="bar"></div>`
+    /// - The directive is on elements where the previous element doesn't have `v-if`/`v-else-if` directives. E.g. `<div v-else></div>`
+    /// - The directive is on elements which have `v-if`/`v-else-if` directives. E.g. `<div v-if="foo" v-else></div>`
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```vue,expect_diagnostic
+    /// <div v-else:arg></div>
+    /// ```
+    ///
+    /// ```vue,expect_diagnostic
+    /// <div v-else.mod></div>
+    /// ```
+    ///
+    /// ```vue,expect_diagnostic
+    /// <div v-else="value"></div>
+    /// ```
+    ///
+    /// ```vue,expect_diagnostic
+    /// <div v-else></div>
+    /// ```
+    ///
+    /// ```vue,expect_diagnostic
+    /// <div v-if="foo" v-else></div>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```vue
+    /// <div v-if="foo"></div>
+    /// <div v-else></div>
+    /// ```
+    ///
+    /// ```vue
+    /// <div v-if="foo"></div>
+    /// <div v-else-if="bar"></div>
+    /// <div v-else></div>
+    /// ```
+    ///
+    pub UseVueValidVElse {
+        version: "next",
+        name: "useVueValidVElse",
+        language: "html",
+        recommended: true,
+        domains: &[RuleDomain::Vue],
+        sources: &[RuleSource::EslintVueJs("valid-v-else").same()],
+    }
+}
+
+pub enum ViolationKind {
+    HasArgument(TextRange),
+    HasModifier(TextRange),
+    HasValue(TextRange),
+    MissingPreviousIfOrElseIf,
+    CombinedWithIfOrElseIf(TextRange),
+}
+
+declare_node_union! {
+    pub AnyHtmlElement = HtmlElement | HtmlSelfClosingElement
+}
+
+impl Rule for UseVueValidVElse {
+    type Query = Ast<VueDirective>;
+    type State = ViolationKind;
+    type Signals = Option<Self::State>;
+    type Options = UseVueValidVElseOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let vue_directive = ctx.query();
+        if vue_directive.name_token().ok()?.text_trimmed() != "v-else" {
+            return None;
+        }
+
+        // Check for argument
+        if let Some(arg) = vue_directive.arg() {
+            return Some(ViolationKind::HasArgument(arg.range()));
+        }
+
+        // Check for modifiers
+        let modifiers = vue_directive.modifiers();
+        if let Some(modifier) = modifiers.into_iter().next() {
+            return Some(ViolationKind::HasModifier(modifier.range()));
+        }
+
+        // Check for value
+        if let Some(initializer) = vue_directive.initializer() {
+            return Some(ViolationKind::HasValue(initializer.range()));
+        }
+
+        // Get parent element
+        let parent_element = vue_directive
+            .syntax()
+            .ancestors()
+            .skip(1)
+            .find_map(|ancestor| AnyHtmlElement::cast_ref(&ancestor))?;
+
+        // Check if current element also has v-if or v-else-if
+        if has_v_if_or_else_if_directives(&parent_element) {
+            return Some(ViolationKind::CombinedWithIfOrElseIf(
+                vue_directive.name_token().ok()?.text_range(),
+            ));
+        }
+
+        // Check if previous sibling has v-if or v-else-if
+        if !has_previous_sibling_with_v_if_or_else_if(&parent_element) {
+            return Some(ViolationKind::MissingPreviousIfOrElseIf);
+        }
+
+        None
+    }
+
+    fn diagnostic(ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        Some(
+            match state {
+                ViolationKind::HasArgument(range) => RuleDiagnostic::new(
+                    rule_category!(),
+                    range,
+                    markup! {
+                        "v-else must not have an argument."
+                    },
+                )
+                .note(markup! {
+                    "Remove the argument; v-else is a stand-alone control directive."
+                }),
+                ViolationKind::HasModifier(range) => RuleDiagnostic::new(
+                    rule_category!(),
+                    range,
+                    markup! {
+                        "v-else must not have modifiers."
+                    },
+                )
+                .note(markup! {
+                    "Remove the modifier; v-else is a stand-alone control directive."
+                }),
+                ViolationKind::HasValue(range) => RuleDiagnostic::new(
+                    rule_category!(),
+                    range,
+                    markup! {
+                        "v-else must not have a value."
+                    },
+                )
+                .note(markup! {
+                    "Remove the value; v-else is a stand-alone control directive."
+                }),
+                ViolationKind::MissingPreviousIfOrElseIf => RuleDiagnostic::new(
+                    rule_category!(),
+                    ctx.query().range(),
+                    markup! {
+                        "v-else requires a previous sibling element with v-if or v-else-if."
+                    },
+                )
+                .note(markup! {
+                    "Place v-else immediately after an element with v-if or v-else-if, within the same parent."
+                }),
+                ViolationKind::CombinedWithIfOrElseIf(range) => RuleDiagnostic::new(
+                    rule_category!(),
+                    range,
+                    markup! {
+                        "v-else cannot be used on the same element as v-if or v-else-if."
+                    },
+                )
+                .note(markup! {
+                    "Move v-else onto a separate element immediately following the v-if/v-else-if element."
+                }),
+            }
+        )
+    }
+}
+
+fn has_v_if_or_else_if_directives(element: &AnyHtmlElement) -> bool {
+    // Check attributes for v-if or v-else-if directives
+
+    let attribute_list = match element {
+        AnyHtmlElement::HtmlElement(html_element) => {
+            let Ok(opening_element) = html_element.opening_element() else {
+                return false;
+            };
+            opening_element.attributes()
+        }
+        AnyHtmlElement::HtmlSelfClosingElement(self_closing) => self_closing.attributes(),
+    };
+
+    for attribute in attribute_list {
+        if let Ok(AnyVueDirective::VueDirective(vue_dir)) =
+            AnyVueDirective::try_cast(attribute.syntax().clone())
+            && let Ok(name_token) = vue_dir.name_token()
+        {
+            let name = name_token.text();
+            if name == "v-if" || name == "v-else-if" {
+                return true;
+            }
+        }
+    }
+
+    false
+}
+
+fn has_previous_sibling_with_v_if_or_else_if(element: &AnyHtmlElement) -> bool {
+    if let Some(sibling) = element
+        .syntax()
+        .prev_sibling()
+        .and_then(|s| AnyHtmlElement::cast_ref(&s))
+    {
+        return has_v_if_or_else_if_directives(&sibling);
+    }
+
+    false
+}