fix(parse/html/vue): parse dynamic slot directives that contain quotes (#8856)

dyc3 · web-flow · commit 85f81f989237 · 2026-01-24T13:09:48.000-05:00
diff --git a/.changeset/fair-ligers-smell.md b/.changeset/fair-ligers-smell.md
@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#8710](https://github.com/biomejs/biome/issues/8710): Biome now parses Vue dynamic slot shorthand arguments that use template literals in `[]`.
diff --git a/crates/biome_html_parser/src/lexer/mod.rs b/crates/biome_html_parser/src/lexer/mod.rs
@@ -155,6 +155,42 @@ impl<'src> HtmlLexer<'src> {
         }
     }
 
+    /// Consume a token in the [HtmlLexContext::VueDirectiveArgument] context.
+    fn consume_token_vue_directive_argument(&mut self) -> HtmlSyntaxKind {
+        let start = self.text_position();
+        let mut brackets_stack = 0;
+        let mut quotes_seen = QuotesSeen::new();
+
+        while let Some(byte) = self.current_byte() {
+            quotes_seen.check_byte(byte);
+            let char = biome_unicode_table::lookup_byte(byte);
+            use biome_unicode_table::Dispatch::*;
+
+            if quotes_seen.is_empty() {
+                match char {
+                    BTO => {
+                        brackets_stack += 1;
+                    }
+                    BTC => {
+                        if brackets_stack == 0 {
+                            break;
+                        }
+                        brackets_stack -= 1;
+                    }
+                    _ => {}
+                }
+            }
+
+            self.advance_byte_or_char(byte);
+        }
+
+        if self.text_position() != start {
+            HTML_LITERAL
+        } else {
+            ERROR_TOKEN
+        }
+    }
+
     /// Consume a token in the [HtmlLexContext::Regular] context.
     fn consume_token(&mut self, current: u8) -> HtmlSyntaxKind {
         match current {
@@ -1078,6 +1114,9 @@ impl<'src> Lexer<'src> for HtmlLexer<'src> {
                     HtmlLexContext::Regular => self.consume_token(current),
                     HtmlLexContext::InsideTag => self.consume_token_inside_tag(current),
                     HtmlLexContext::InsideTagVue => self.consume_token_inside_tag_vue(current),
+                    HtmlLexContext::VueDirectiveArgument => {
+                        self.consume_token_vue_directive_argument()
+                    }
                     HtmlLexContext::AttributeValue => self.consume_token_attribute_value(current),
                     HtmlLexContext::Doctype => self.consume_token_doctype(current),
                     HtmlLexContext::EmbeddedLanguage(lang) => {
diff --git a/crates/biome_html_parser/src/syntax/vue.rs b/crates/biome_html_parser/src/syntax/vue.rs
@@ -161,7 +161,7 @@ fn parse_vue_dynamic_argument(p: &mut HtmlParser) -> ParsedSyntax {
 
     let m = p.start();
 
-    p.bump_with_context(T!['['], HtmlLexContext::InsideTagVue);
+    p.bump_with_context(T!['['], HtmlLexContext::VueDirectiveArgument);
     p.expect_with_context(HTML_LITERAL, HtmlLexContext::InsideTagVue);
     p.expect_with_context(T![']'], HtmlLexContext::InsideTagVue);
 
diff --git a/crates/biome_html_parser/src/token_source.rs b/crates/biome_html_parser/src/token_source.rs
@@ -29,6 +29,8 @@ pub(crate) enum HtmlLexContext {
     InsideTag,
     /// Like [InsideTag], but with Vue-specific tokens enabled.
     InsideTagVue,
+    /// Lexes Vue directive arguments inside `[]`.
+    VueDirectiveArgument,
     /// When the parser encounters a `=` token (the beginning of the attribute initializer clause), it switches to this context.
     ///
     /// This is because attribute values can start and end with a `"` or `'` character, or be unquoted, and the lexer needs to know to start lexing a string literal.
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/dynamic-slot-arg.vue b/crates/biome_html_parser/tests/html_specs/ok/vue/dynamic-slot-arg.vue
@@ -0,0 +1,23 @@
+<template
+  v-for="episode in episodes"
+  #[`${episode.id}-cell`]="{ row }"
+  :key="episode.id"
+>
+  ...
+</template>
+
+<template
+  v-for="episode in episodes"
+  v-slot:[`${episode.id}-cell`]="{ row }"
+  :key="episode.id"
+>
+  ...
+</template>
+
+<template
+  v-for="episode in episodes"
+  #[episode.id]="{ row }"
+  :key="episode.id"
+>
+  ...
+</template>
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/dynamic-slot-arg.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/dynamic-slot-arg.vue.snap

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@biomejs/biome": patch
 +---
++
 +Fixed [#8710](https://github.com/biomejs/biome/issues/8710): Biome now parses Vue dynamic slot shorthand arguments that use template literals in `[]`.