diff --git a/benchmark/package.json b/benchmark/package.json
index 0ed75efddf20..f9ea9f6159b1 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -15,6 +15,6 @@
     "@typescript-eslint/parser": "8.46.4",
     "dprint": "0.50.2",
     "eslint": "9.39.1",
-    "prettier": "3.6.2"
+    "prettier": "3.7.4"
   }
 }
diff --git a/crates/biome_formatter_test/src/prettier/package.json b/crates/biome_formatter_test/src/prettier/package.json
index 0553ad4473fa..270a45dfc26c 100644
--- a/crates/biome_formatter_test/src/prettier/package.json
+++ b/crates/biome_formatter_test/src/prettier/package.json
@@ -4,7 +4,7 @@
 		"start": "node prepare_tests"
 	},
 	"dependencies": {
-		"prettier": "3.6.2"
+		"prettier": "3.7.1"
 	},
   "private": true
 }
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html
new file mode 100644
index 000000000000..b0a6c9d8b162
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html
@@ -0,0 +1,37 @@
+<button onclick="alert(    '1')">click me!</button>
+
+<div onclick="handleClick(  event  )" onmouseover="showTooltip( this )" onmouseout="hideTooltip(  )">Hover me</div>
+
+<img onerror='handleError(  this  )' onload="imageLoaded(  event  )" />
+
+<button onclick="(event) =>   {  console.log('clicked');  handleClick(  event  );  }">Modern JS</button>
+
+<div onclick="processData(  { id: 123, name: 'test'  },  [ 1,  2, 3 ]  )">Data</div>
+
+<button onclick="api.user.get(  123  ).then(  data =>   updateUI( data )  )">API Call</button>
+
+<input onfocus="highlightField(  this  )" onblur="validateField( this.value )" />
+<select onchange="filterResults(  this.value,  this.selectedIndex  )">
+  <option>Option 1</option>
+</select>
+
+<button onclick="
+   alert(1);           alert(2);
+ ">Click</button>
+
+<button onclick="
+    return false
+  ">Click</button>
+
+<button onclick="
+  console.log(arguments)
+  ">Click</button>
+
+<button onclick="
+  console.log(onclick)
+  ">Click</button>
+
+<button onclick="
+  'use strict'
+  console.log(onclick)
+  ">Click</button>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.prettier-snap
new file mode 100644
index 000000000000..c315e35922bb
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.prettier-snap
@@ -0,0 +1,57 @@
+<button onclick="alert('1')">click me!</button>
+
+<div
+  onclick="handleClick(event)"
+  onmouseover="showTooltip(this)"
+  onmouseout="hideTooltip()"
+>
+  Hover me
+</div>
+
+<img onerror="handleError(this)" onload="imageLoaded(event)" />
+
+<button
+  onclick="
+    (event) => {
+      console.log('clicked');
+      handleClick(event);
+    }
+  "
+>
+  Modern JS
+</button>
+
+<div onclick="processData({ id: 123, name: 'test' }, [1, 2, 3])">Data</div>
+
+<button onclick="api.user.get(123).then((data) => updateUI(data))">
+  API Call
+</button>
+
+<input onfocus="highlightField(this)" onblur="validateField(this.value)" />
+<select onchange="filterResults(this.value, this.selectedIndex)">
+  <option>Option 1</option>
+</select>
+
+<button
+  onclick="
+    alert(1);
+    alert(2);
+  "
+>
+  Click
+</button>
+
+<button onclick="return false;">Click</button>
+
+<button onclick="console.log(arguments)">Click</button>
+
+<button onclick="console.log(onclick)">Click</button>
+
+<button
+  onclick='
+    "use strict";
+    console.log(onclick);
+  '
+>
+  Click
+</button>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.prettier-snap-original b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.prettier-snap-original
new file mode 100644
index 000000000000..e67a0b98879b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.prettier-snap-original
@@ -0,0 +1,57 @@
+<button onclick="alert('1')">click me!</button>
+
+<div
+  onclick="handleClick(event)"
+  onmouseover="showTooltip(this)"
+  onmouseout="hideTooltip()"
+>
+  Hover me
+</div>
+
+<img onerror="handleError(this)" onload="imageLoaded(event)" />
+
+<button
+  onclick="
+    (event) => {
+      console.log('clicked');
+      handleClick(event);
+    }
+  "
+>
+  Modern JS
+</button>
+
+<div onclick="processData({ id: 123, name: 'test' }, [1, 2, 3])">Data</div>
+
+<button onclick="api.user.get(123).then((data) => updateUI(data))">
+  API Call
+</button>
+
+<input onfocus="highlightField(this)" onblur="validateField(this.value)" />
+<select onchange="filterResults(this.value, this.selectedIndex)">
+  <option>Option 1</option>
+</select>
+
+<button
+  onclick="
+    alert(1);
+    alert(2);
+  "
+>
+  Click
+</button>
+
+<button onclick="return false;">Click</button>
+
+<button onclick="console.log(arguments)">Click</button>
+
+<button onclick="console.log(onclick)">Click</button>
+
+<button
+  onclick="
+    &quot;use strict&quot;;
+    console.log(onclick);
+  "
+>
+  Click
+</button>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.snap
new file mode 100644
index 000000000000..f50d98d6277f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/event-attributes.html.snap
@@ -0,0 +1,233 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/attributes/event-attributes.html
+---
+# Input
+
+```html
+<button onclick="alert(    '1')">click me!</button>
+
+<div onclick="handleClick(  event  )" onmouseover="showTooltip( this )" onmouseout="hideTooltip(  )">Hover me</div>
+
+<img onerror='handleError(  this  )' onload="imageLoaded(  event  )" />
+
+<button onclick="(event) =>   {  console.log('clicked');  handleClick(  event  );  }">Modern JS</button>
+
+<div onclick="processData(  { id: 123, name: 'test'  },  [ 1,  2, 3 ]  )">Data</div>
+
+<button onclick="api.user.get(  123  ).then(  data =>   updateUI( data )  )">API Call</button>
+
+<input onfocus="highlightField(  this  )" onblur="validateField( this.value )" />
+<select onchange="filterResults(  this.value,  this.selectedIndex  )">
+  <option>Option 1</option>
+</select>
+
+<button onclick="
+   alert(1);           alert(2);
+ ">Click</button>
+
+<button onclick="
+    return false
+  ">Click</button>
+
+<button onclick="
+  console.log(arguments)
+  ">Click</button>
+
+<button onclick="
+  console.log(onclick)
+  ">Click</button>
+
+<button onclick="
+  'use strict'
+  console.log(onclick)
+  ">Click</button>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,57 +1,74 @@
+-<button onclick="alert('1')">click me!</button>
++<button onclick="alert(    '1')">click me!</button>
+ 
+ <div
+-  onclick="handleClick(event)"
+-  onmouseover="showTooltip(this)"
+-  onmouseout="hideTooltip()"
++  onclick="handleClick(  event  )"
++  onmouseover="showTooltip( this )"
++  onmouseout="hideTooltip(  )"
+ >
+   Hover me
+ </div>
+ 
+-<img onerror="handleError(this)" onload="imageLoaded(event)" />
++<img onerror="handleError(  this  )" onload="imageLoaded(  event  )" />
+ 
+ <button
+-  onclick="
+-    (event) => {
+-      console.log('clicked');
+-      handleClick(event);
+-    }
+-  "
++  onclick="(event) =>   {  console.log('clicked');  handleClick(  event  );  }"
+ >
+   Modern JS
+ </button>
+ 
+-<div onclick="processData({ id: 123, name: 'test' }, [1, 2, 3])">Data</div>
++<div onclick="processData(  { id: 123, name: 'test'  },  [ 1,  2, 3 ]  )">
++  Data
++</div>
+ 
+-<button onclick="api.user.get(123).then((data) => updateUI(data))">
++<button onclick="api.user.get(  123  ).then(  data =>   updateUI( data )  )">
+   API Call
+ </button>
+ 
+-<input onfocus="highlightField(this)" onblur="validateField(this.value)" />
+-<select onchange="filterResults(this.value, this.selectedIndex)">
++<input
++  onfocus="highlightField(  this  )"
++  onblur="validateField( this.value )"
++/>
++<select onchange="filterResults(  this.value,  this.selectedIndex  )">
+   <option>Option 1</option>
+ </select>
+ 
+ <button
+   onclick="
+-    alert(1);
+-    alert(2);
+-  "
++   alert(1);           alert(2);
++ "
+ >
+   Click
+ </button>
+ 
+-<button onclick="return false;">Click</button>
++<button
++  onclick="
++    return false
++  "
++>
++  Click
++</button>
+ 
+-<button onclick="console.log(arguments)">Click</button>
++<button
++  onclick="
++  console.log(arguments)
++  "
++>
++  Click
++</button>
+ 
+-<button onclick="console.log(onclick)">Click</button>
++<button
++  onclick="
++  console.log(onclick)
++  "
++>
++  Click
++</button>
+ 
+ <button
+-  onclick='
+-    "use strict";
+-    console.log(onclick);
+-  '
++  onclick="
++  'use strict'
++  console.log(onclick)
++  "
+ >
+   Click
+ </button>
+```
+
+# Output
+
+```html
+<button onclick="alert(    '1')">click me!</button>
+
+<div
+  onclick="handleClick(  event  )"
+  onmouseover="showTooltip( this )"
+  onmouseout="hideTooltip(  )"
+>
+  Hover me
+</div>
+
+<img onerror="handleError(  this  )" onload="imageLoaded(  event  )" />
+
+<button
+  onclick="(event) =>   {  console.log('clicked');  handleClick(  event  );  }"
+>
+  Modern JS
+</button>
+
+<div onclick="processData(  { id: 123, name: 'test'  },  [ 1,  2, 3 ]  )">
+  Data
+</div>
+
+<button onclick="api.user.get(  123  ).then(  data =>   updateUI( data )  )">
+  API Call
+</button>
+
+<input
+  onfocus="highlightField(  this  )"
+  onblur="validateField( this.value )"
+/>
+<select onchange="filterResults(  this.value,  this.selectedIndex  )">
+  <option>Option 1</option>
+</select>
+
+<button
+  onclick="
+   alert(1);           alert(2);
+ "
+>
+  Click
+</button>
+
+<button
+  onclick="
+    return false
+  "
+>
+  Click
+</button>
+
+<button
+  onclick="
+  console.log(arguments)
+  "
+>
+  Click
+</button>
+
+<button
+  onclick="
+  console.log(onclick)
+  "
+>
+  Click
+</button>
+
+<button
+  onclick="
+  'use strict'
+  console.log(onclick)
+  "
+>
+  Click
+</button>
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html
new file mode 100644
index 000000000000..6b5dafb2709a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html
@@ -0,0 +1,33 @@
+<iframe allow></iframe>
+<iframe allow=""></iframe>
+<iframe allow="   "></iframe>
+<iframe allow=" ; "></iframe>
+<iframe allow=" ;   ;   ; "></iframe>
+<iframe allow="   camera"></iframe>
+<iframe allow="payment;    usb; serial"></iframe>
+<iframe allow="   camera;; microphone;;;"></iframe>
+<iframe allow="   camera 'self';    ambient-light-sensor 'self'"></iframe>
+<iframe allow="   camera 'self'; ambient-light-sensor 'self'"></iframe>
+<iframe allow="   camera
+'self';
+ambient-light-sensor 'self'"></iframe>
+<iframe allow="camera https://very-long-subdomain.very-long-domain-name.example.com https://another-very-long-subdomain.another-very-long-domain.example.org; microphone https://extremely-long-subdomain-name.extremely-long-domain-name.example.net"></iframe>
+<iframe allow="camera https://sub-domain.example.com:8080/path?query=value#fragment; microphone 'self'"></iframe>
+<iframe allow="camera https://subdomain1.example.com https://subdomain2.example.com https://subdomain3.example.com https://subdomain4.example.com https://subdomain5.example.com"></iframe>
+
+<!-- Uppper case -->
+<iframe allow="CAMERA 'self'; MICROPHONE 'none'; GEOlocation https://example.com"></iframe>
+<iframe allow="CAMERA 'self'; UNKOWN-DIRECTIVE"></iframe>
+
+<!-- Duplicated -->
+<iframe allow="camera 'none'; camera 'self'; CAMERA 'self'"></iframe>
+
+<!-- None ASCII -->
+<iframe allow="   中文-dirctive-name"></iframe>
+<iframe allow=" 中文-dirctive-name   'self'  ;   microphone   中文-origin"></iframe>
+
+<!-- Not iframe-->
+<a allow="
+        camera 'self';
+ambient-light-sensor 'self'
+"></a>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html.prettier-snap
new file mode 100644
index 000000000000..f1ed9be0d2df
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html.prettier-snap
@@ -0,0 +1,49 @@
+<iframe allow></iframe>
+<iframe allow=""></iframe>
+<iframe allow=""></iframe>
+<iframe allow=""></iframe>
+<iframe allow=""></iframe>
+<iframe allow="camera"></iframe>
+<iframe allow="payment; usb; serial"></iframe>
+<iframe allow="camera; microphone"></iframe>
+<iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+<iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+<iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+<iframe
+  allow="
+    camera https://very-long-subdomain.very-long-domain-name.example.com https://another-very-long-subdomain.another-very-long-domain.example.org;
+    microphone https://extremely-long-subdomain-name.extremely-long-domain-name.example.net;
+  "
+></iframe>
+<iframe
+  allow="
+    camera https://sub-domain.example.com:8080/path?query=value#fragment;
+    microphone 'self';
+  "
+></iframe>
+<iframe
+  allow="
+    camera https://subdomain1.example.com https://subdomain2.example.com https://subdomain3.example.com https://subdomain4.example.com https://subdomain5.example.com;
+  "
+></iframe>
+
+<!-- Uppper case -->
+<iframe
+  allow="CAMERA 'self'; MICROPHONE 'none'; GEOlocation https://example.com"
+></iframe>
+<iframe allow="CAMERA 'self'; UNKOWN-DIRECTIVE"></iframe>
+
+<!-- Duplicated -->
+<iframe allow="camera 'none'; camera 'self'; CAMERA 'self'"></iframe>
+
+<!-- None ASCII -->
+<iframe allow="中文-dirctive-name"></iframe>
+<iframe allow="中文-dirctive-name 'self'; microphone 中文-origin"></iframe>
+
+<!-- Not iframe-->
+<a
+  allow="
+        camera 'self';
+ambient-light-sensor 'self'
+"
+></a>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html.snap
new file mode 100644
index 000000000000..b1dae27877e7
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/allow-attribute.html.snap
@@ -0,0 +1,144 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/attributes/iframe-allow-attribute/allow-attribute.html
+---
+# Input
+
+```html
+<iframe allow></iframe>
+<iframe allow=""></iframe>
+<iframe allow="   "></iframe>
+<iframe allow=" ; "></iframe>
+<iframe allow=" ;   ;   ; "></iframe>
+<iframe allow="   camera"></iframe>
+<iframe allow="payment;    usb; serial"></iframe>
+<iframe allow="   camera;; microphone;;;"></iframe>
+<iframe allow="   camera 'self';    ambient-light-sensor 'self'"></iframe>
+<iframe allow="   camera 'self'; ambient-light-sensor 'self'"></iframe>
+<iframe allow="   camera
+'self';
+ambient-light-sensor 'self'"></iframe>
+<iframe allow="camera https://very-long-subdomain.very-long-domain-name.example.com https://another-very-long-subdomain.another-very-long-domain.example.org; microphone https://extremely-long-subdomain-name.extremely-long-domain-name.example.net"></iframe>
+<iframe allow="camera https://sub-domain.example.com:8080/path?query=value#fragment; microphone 'self'"></iframe>
+<iframe allow="camera https://subdomain1.example.com https://subdomain2.example.com https://subdomain3.example.com https://subdomain4.example.com https://subdomain5.example.com"></iframe>
+
+<!-- Uppper case -->
+<iframe allow="CAMERA 'self'; MICROPHONE 'none'; GEOlocation https://example.com"></iframe>
+<iframe allow="CAMERA 'self'; UNKOWN-DIRECTIVE"></iframe>
+
+<!-- Duplicated -->
+<iframe allow="camera 'none'; camera 'self'; CAMERA 'self'"></iframe>
+
+<!-- None ASCII -->
+<iframe allow="   中文-dirctive-name"></iframe>
+<iframe allow=" 中文-dirctive-name   'self'  ;   microphone   中文-origin"></iframe>
+
+<!-- Not iframe-->
+<a allow="
+        camera 'self';
+ambient-light-sensor 'self'
+"></a>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -8,9 +8,15 @@
+ <iframe allow="camera; microphone"></iframe>
+ <iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+ <iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+-<iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+ <iframe
+   allow="
++    camera
++'self';
++    ambient-light-sensor 'self';
++  "
++></iframe>
++<iframe
++  allow="
+     camera https://very-long-subdomain.very-long-domain-name.example.com https://another-very-long-subdomain.another-very-long-domain.example.org;
+     microphone https://extremely-long-subdomain-name.extremely-long-domain-name.example.net;
+   "
+@@ -38,7 +44,7 @@
+ 
+ <!-- None ASCII -->
+ <iframe allow="中文-dirctive-name"></iframe>
+-<iframe allow="中文-dirctive-name 'self'; microphone 中文-origin"></iframe>
++<iframe allow="中文-dirctive-name   'self'; microphone   中文-origin"></iframe>
+ 
+ <!-- Not iframe-->
+ <a
+```
+
+# Output
+
+```html
+<iframe allow></iframe>
+<iframe allow=""></iframe>
+<iframe allow=""></iframe>
+<iframe allow=""></iframe>
+<iframe allow=""></iframe>
+<iframe allow="camera"></iframe>
+<iframe allow="payment; usb; serial"></iframe>
+<iframe allow="camera; microphone"></iframe>
+<iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+<iframe allow="camera 'self'; ambient-light-sensor 'self'"></iframe>
+<iframe
+  allow="
+    camera
+'self';
+    ambient-light-sensor 'self';
+  "
+></iframe>
+<iframe
+  allow="
+    camera https://very-long-subdomain.very-long-domain-name.example.com https://another-very-long-subdomain.another-very-long-domain.example.org;
+    microphone https://extremely-long-subdomain-name.extremely-long-domain-name.example.net;
+  "
+></iframe>
+<iframe
+  allow="
+    camera https://sub-domain.example.com:8080/path?query=value#fragment;
+    microphone 'self';
+  "
+></iframe>
+<iframe
+  allow="
+    camera https://subdomain1.example.com https://subdomain2.example.com https://subdomain3.example.com https://subdomain4.example.com https://subdomain5.example.com;
+  "
+></iframe>
+
+<!-- Uppper case -->
+<iframe
+  allow="CAMERA 'self'; MICROPHONE 'none'; GEOlocation https://example.com"
+></iframe>
+<iframe allow="CAMERA 'self'; UNKOWN-DIRECTIVE"></iframe>
+
+<!-- Duplicated -->
+<iframe allow="camera 'none'; camera 'self'; CAMERA 'self'"></iframe>
+
+<!-- None ASCII -->
+<iframe allow="中文-dirctive-name"></iframe>
+<iframe allow="中文-dirctive-name   'self'; microphone   中文-origin"></iframe>
+
+<!-- Not iframe-->
+<a
+  allow="
+        camera 'self';
+ambient-light-sensor 'self'
+"
+></a>
+```
+
+# Lines exceeding max width of 80 characters
+```
+   20:     camera https://very-long-subdomain.very-long-domain-name.example.com https://another-very-long-subdomain.another-very-long-domain.example.org;
+   21:     microphone https://extremely-long-subdomain-name.extremely-long-domain-name.example.net;
+   32:     camera https://subdomain1.example.com https://subdomain2.example.com https://subdomain3.example.com https://subdomain4.example.com https://subdomain5.example.com;
+   47: <iframe allow="中文-dirctive-name   'self'; microphone   中文-origin"></iframe>
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html
new file mode 100644
index 000000000000..1fd2d0f08c43
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html
@@ -0,0 +1,4 @@
+<iframe allow="camera 'self'; microphone 'self'"></iframe>
+<iframe allow="camera ; microphone"></iframe>
+<iframe allow=""></iframe>
+<iframe allow=";"></iframe>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html.prettier-snap
new file mode 100644
index 000000000000..1fd2d0f08c43
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html.prettier-snap
@@ -0,0 +1,4 @@
+<iframe allow="camera 'self'; microphone 'self'"></iframe>
+<iframe allow="camera ; microphone"></iframe>
+<iframe allow=""></iframe>
+<iframe allow=";"></iframe>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html.snap
new file mode 100644
index 000000000000..a78966c4980b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html.snap
@@ -0,0 +1,37 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/attributes/iframe-allow-attribute/small-print-width/allow-attribute.html
+---
+# Input
+
+```html
+<iframe allow="camera 'self'; microphone 'self'"></iframe>
+<iframe allow="camera ; microphone"></iframe>
+<iframe allow=""></iframe>
+<iframe allow=";"></iframe>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,4 +1,4 @@
+ <iframe allow="camera 'self'; microphone 'self'"></iframe>
+-<iframe allow="camera ; microphone"></iframe>
++<iframe allow="camera; microphone"></iframe>
++<iframe allow=""></iframe>
+ <iframe allow=""></iframe>
+-<iframe allow=";"></iframe>
+```
+
+# Output
+
+```html
+<iframe allow="camera 'self'; microphone 'self'"></iframe>
+<iframe allow="camera; microphone"></iframe>
+<iframe allow=""></iframe>
+<iframe allow=""></iframe>
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/no-semi/event-attributes.html b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/no-semi/event-attributes.html
new file mode 100644
index 000000000000..51274fad0609
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/no-semi/event-attributes.html
@@ -0,0 +1,6 @@
+<button
+  onclick="[foo, bar].forEach((fn) => void fn())"
+></button>
+<button
+  onclick="[foo, bar].forEach((fn) => void fn()); alert(1)"
+></button>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/attributes/no-semi/event-attributes.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/no-semi/event-attributes.html.prettier-snap
new file mode 100644
index 000000000000..6fd900797a3f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/attributes/no-semi/event-attributes.html.prettier-snap
@@ -0,0 +1,2 @@
+<button onclick="[foo, bar].forEach((fn) => void fn())"></button>
+<button onclick="[foo, bar].forEach((fn) => void fn()); alert(1)"></button>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html b/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html
new file mode 100644
index 000000000000..29ca0989dc95
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html
@@ -0,0 +1,127 @@
+<!-- unknown tag with colon -->
+<div>
+<foo:bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:bar>
+</div>
+
+<!-- block tag with colon -->
+<div>
+<foo:div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:div>
+</div>
+
+<!-- inline tag with colon -->
+<div>
+<foo:span>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:span>
+</div>
+
+<!-- unknown -->
+<div>
+<foo-bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo-bar>
+</div>
+
+<!-- without colon -->
+<div>
+<div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></div>
+</div>
+
+<!-- #7236 -->
+<with:colon>
+  <div><h1> text  text  text  text  text  text  text  text  text  text  text  text  text  text </h1></div>
+  <script>
+  const func = function() { console.log('Hello, there');}
+  </script>
+  </with:colon>
+
+<!-- script like -->
+<with:colon>
+<style>.a{color:#f00}</style>
+  <SCRIPT>
+  const func = function() { console.log('Hello, there');}
+  </SCRIPT>
+<STYLE>.A{COLOR:#F00}</STYLE>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>
+<svg><style>.a{color:#f00}</style></svg>
+<svg><style>.a{color:#f00}</style></svg>
+</with:colon>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html.prettier-snap
new file mode 100644
index 000000000000..18e9fcbb014c
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html.prettier-snap
@@ -0,0 +1,258 @@
+<!-- unknown tag with colon -->
+<div>
+  <foo:bar>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo:bar
+  >
+</div>
+
+<!-- block tag with colon -->
+<div>
+  <foo:div>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo:div
+  >
+</div>
+
+<!-- inline tag with colon -->
+<div>
+  <foo:span>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo:span
+  >
+</div>
+
+<!-- unknown -->
+<div>
+  <foo-bar>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span></foo-bar
+  >
+</div>
+
+<!-- without colon -->
+<div>
+  <div>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block</div>
+    <div>BLOCK</div>
+    <div>block</div>
+    <div>block</div>
+    <div>block</div>
+    <pre>
+ pre pr
+e</pre
+    >
+    <textarea>
+ pre-wrap pr
+e-wrap </textarea
+    >
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span> <span> inline </span
+    ><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+    <html:div> block </html:div><html:div> block </html:div
+    ><html:div> block </html:div>
+    <html:pre> pre pr e</html:pre>
+    <html:textarea> pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+    <html:span> inline </html:span><html:span> inline </html:span>
+  </div>
+</div>
+
+<!-- #7236 -->
+<with:colon>
+  <div>
+    <h1>
+      text text text text text text text text text text text text text text
+    </h1>
+  </div>
+  <script>
+    const func = function () {
+      console.log("Hello, there");
+    };
+  </script>
+</with:colon>
+
+<!-- script like -->
+<with:colon>
+  <style>
+    .a {
+      color: #f00;
+    }
+  </style>
+  <script>
+    const func = function () {
+      console.log("Hello, there");
+    };
+  </script>
+  <style>
+    .A {
+      color: #f00;
+    }
+  </style>
+  <html:script
+    >const func = function() { console.log('Hello, there');}</html:script
+  >
+  <html:style
+    >.a{color:#f00}</html:style
+  >
+  <svg>
+    <style>
+      .a {
+        color: #f00;
+      }
+    </style>
+  </svg>
+  <svg>
+    <style>
+      .a {
+        color: #f00;
+      }
+    </style>
+  </svg>
+</with:colon>
+<html:script
+  >const func = function() { console.log('Hello, there');}</html:script
+>
+<html:style
+  >.a{color:#f00}</html:style
+>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html.snap
new file mode 100644
index 000000000000..2de68aaa57a5
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/basics/with-colon.html.snap
@@ -0,0 +1,749 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/basics/with-colon.html
+---
+# Input
+
+```html
+<!-- unknown tag with colon -->
+<div>
+<foo:bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:bar>
+</div>
+
+<!-- block tag with colon -->
+<div>
+<foo:div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:div>
+</div>
+
+<!-- inline tag with colon -->
+<div>
+<foo:span>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo:span>
+</div>
+
+<!-- unknown -->
+<div>
+<foo-bar>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></foo-bar>
+</div>
+
+<!-- without colon -->
+<div>
+<div>
+<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
+<div> block </div><DIV> BLOCK </DIV> <div> block </div><div> block </div><div> block </div>
+<pre> pre pr
+e</pre>
+<textarea> pre-wrap pr
+e-wrap </textarea>
+<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
+<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
+<html:div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </html:div>
+<html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV> <html:div> block </html:div><html:div> block </html:div><html:div> block </html:div>
+<html:pre> pre pr
+e</html:pre>
+<html:textarea> pre-wrap pr
+e-wrap </html:textarea>
+<html:span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </html:span>
+<html:span> inline </html:span><html:span> inline </html:span> <html:span> inline </html:span><html:span> inline </html:span></div>
+</div>
+
+<!-- #7236 -->
+<with:colon>
+  <div><h1> text  text  text  text  text  text  text  text  text  text  text  text  text  text </h1></div>
+  <script>
+  const func = function() { console.log('Hello, there');}
+  </script>
+  </with:colon>
+
+<!-- script like -->
+<with:colon>
+<style>.a{color:#f00}</style>
+  <SCRIPT>
+  const func = function() { console.log('Hello, there');}
+  </SCRIPT>
+<STYLE>.A{COLOR:#F00}</STYLE>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>
+<svg><style>.a{color:#f00}</style></svg>
+<svg><style>.a{color:#f00}</style></svg>
+</with:colon>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -4,38 +4,37 @@
+     <div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </div>
+-    <div>block</div>
+-    <div>BLOCK</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <pre>
+- pre pr
+-e</pre
+-    >
+-    <textarea>
+- pre-wrap pr
+-e-wrap </textarea
+-    >
++    <div>block </div>
++    <div>BLOCK </div>
++    <div>block </div>
++    <div>block </div>
++    <div>block </div>
++    <pre> pre pr
++e</pre>
++    <textarea>pre-wrap pr e-wrap </textarea>
+     <span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </span>
+-    <span> inline </span><span> inline </span> <span> inline </span
+-    ><span> inline </span>
++    <span> inline </span><span> inline </span>
++    <span> inline </span><span> inline </span>
+     <html:div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </html:div>
+-    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+-    <html:div> block </html:div><html:div> block </html:div
+-    ><html:div> block </html:div>
+-    <html:pre> pre pr e</html:pre>
+-    <html:textarea> pre-wrap pr e-wrap </html:textarea>
++    <html:DIV>block </html:DIV>
++    <HTML:DIV>BLOCK </HTML:DIV>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:pre>pre pr e</html:pre>
++    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+     <html:span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span></foo:bar
+-  >
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++  </foo:bar>
+ </div>
+ 
+ <!-- block tag with colon -->
+@@ -44,38 +43,37 @@
+     <div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </div>
+-    <div>block</div>
+-    <div>BLOCK</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <pre>
+- pre pr
+-e</pre
+-    >
+-    <textarea>
+- pre-wrap pr
+-e-wrap </textarea
+-    >
++    <div>block </div>
++    <div>BLOCK </div>
++    <div>block </div>
++    <div>block </div>
++    <div>block </div>
++    <pre> pre pr
++e</pre>
++    <textarea>pre-wrap pr e-wrap </textarea>
+     <span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </span>
+-    <span> inline </span><span> inline </span> <span> inline </span
+-    ><span> inline </span>
++    <span> inline </span><span> inline </span>
++    <span> inline </span><span> inline </span>
+     <html:div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </html:div>
+-    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+-    <html:div> block </html:div><html:div> block </html:div
+-    ><html:div> block </html:div>
+-    <html:pre> pre pr e</html:pre>
+-    <html:textarea> pre-wrap pr e-wrap </html:textarea>
++    <html:DIV>block </html:DIV>
++    <HTML:DIV>BLOCK </HTML:DIV>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:pre>pre pr e</html:pre>
++    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+     <html:span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span></foo:div
+-  >
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++  </foo:div>
+ </div>
+ 
+ <!-- inline tag with colon -->
+@@ -84,38 +82,37 @@
+     <div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </div>
+-    <div>block</div>
+-    <div>BLOCK</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <pre>
+- pre pr
+-e</pre
+-    >
+-    <textarea>
+- pre-wrap pr
+-e-wrap </textarea
+-    >
++    <div>block </div>
++    <div>BLOCK </div>
++    <div>block </div>
++    <div>block </div>
++    <div>block </div>
++    <pre> pre pr
++e</pre>
++    <textarea>pre-wrap pr e-wrap </textarea>
+     <span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </span>
+-    <span> inline </span><span> inline </span> <span> inline </span
+-    ><span> inline </span>
++    <span> inline </span><span> inline </span>
++    <span> inline </span><span> inline </span>
+     <html:div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </html:div>
+-    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+-    <html:div> block </html:div><html:div> block </html:div
+-    ><html:div> block </html:div>
+-    <html:pre> pre pr e</html:pre>
+-    <html:textarea> pre-wrap pr e-wrap </html:textarea>
++    <html:DIV>block </html:DIV>
++    <HTML:DIV>BLOCK </HTML:DIV>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:pre>pre pr e</html:pre>
++    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+     <html:span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span></foo:span
+-  >
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++  </foo:span>
+ </div>
+ 
+ <!-- unknown -->
+@@ -124,38 +121,37 @@
+     <div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </div>
+-    <div>block</div>
+-    <div>BLOCK</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <pre>
+- pre pr
+-e</pre
+-    >
+-    <textarea>
+- pre-wrap pr
+-e-wrap </textarea
+-    >
++    <div>block </div>
++    <div>BLOCK </div>
++    <div>block </div>
++    <div>block </div>
++    <div>block </div>
++    <pre> pre pr
++e</pre>
++    <textarea>pre-wrap pr e-wrap </textarea>
+     <span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </span>
+-    <span> inline </span><span> inline </span> <span> inline </span
+-    ><span> inline </span>
++    <span> inline </span><span> inline </span>
++    <span> inline </span><span> inline </span>
+     <html:div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </html:div>
+-    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+-    <html:div> block </html:div><html:div> block </html:div
+-    ><html:div> block </html:div>
+-    <html:pre> pre pr e</html:pre>
+-    <html:textarea> pre-wrap pr e-wrap </html:textarea>
++    <html:DIV>block </html:DIV>
++    <HTML:DIV>BLOCK </HTML:DIV>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:pre>pre pr e</html:pre>
++    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+     <html:span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span></foo-bar
+-  >
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++  </foo-bar>
+ </div>
+ 
+ <!-- without colon -->
+@@ -164,37 +160,36 @@
+     <div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </div>
+-    <div>block</div>
+-    <div>BLOCK</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <div>block</div>
+-    <pre>
+- pre pr
+-e</pre
+-    >
+-    <textarea>
+- pre-wrap pr
+-e-wrap </textarea
+-    >
++    <div>block </div>
++    <div>BLOCK </div>
++    <div>block </div>
++    <div>block </div>
++    <div>block </div>
++    <pre> pre pr
++e</pre>
++    <textarea>pre-wrap pr e-wrap </textarea>
+     <span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </span>
+-    <span> inline </span><span> inline </span> <span> inline </span
+-    ><span> inline </span>
++    <span> inline </span><span> inline </span>
++    <span> inline </span><span> inline </span>
+     <html:div>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+     </html:div>
+-    <html:DIV> block </html:DIV><HTML:DIV> BLOCK </HTML:DIV>
+-    <html:div> block </html:div><html:div> block </html:div
+-    ><html:div> block </html:div>
+-    <html:pre> pre pr e</html:pre>
+-    <html:textarea> pre-wrap pr e-wrap </html:textarea>
++    <html:DIV>block </html:DIV>
++    <HTML:DIV>BLOCK </HTML:DIV>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:div>block </html:div>
++    <html:pre>pre pr e</html:pre>
++    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+     <html:span>
+       looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+     </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span>
+-    <html:span> inline </html:span><html:span> inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
++    <html:span>inline </html:span>
+   </div>
+ </div>
+ 
+@@ -206,53 +201,29 @@
+     </h1>
+   </div>
+   <script>
+-    const func = function () {
+-      console.log("Hello, there");
+-    };
++  const func = function() { console.log('Hello, there');}
+   </script>
+ </with:colon>
+ 
+ <!-- script like -->
+ <with:colon>
+-  <style>
+-    .a {
+-      color: #f00;
+-    }
+-  </style>
++  <style>.a{color:#f00}</style>
+   <script>
+-    const func = function () {
+-      console.log("Hello, there");
+-    };
++  const func = function() { console.log('Hello, there');}
+   </script>
+-  <style>
+-    .A {
+-      color: #f00;
+-    }
+-  </style>
+-  <html:script
+-    >const func = function() { console.log('Hello, there');}</html:script
+-  >
+-  <html:style
+-    >.a{color:#f00}</html:style
+-  >
++  <style>.A{COLOR:#F00}</style>
++  <html:script>
++    const func = function() { console.log('Hello, there');}
++  </html:script>
++  <html:style>.a { color:#f00}</html:style>
+   <svg>
+-    <style>
+-      .a {
+-        color: #f00;
+-      }
+-    </style>
++    <style>.a{color:#f00}</style>
+   </svg>
+   <svg>
+-    <style>
+-      .a {
+-        color: #f00;
+-      }
+-    </style>
++    <style>.a{color:#f00}</style>
+   </svg>
+ </with:colon>
+-<html:script
+-  >const func = function() { console.log('Hello, there');}</html:script
+->
+-<html:style
+-  >.a{color:#f00}</html:style
+->
++<html:script>
++  const func = function() { console.log('Hello, there');}
++</html:script>
++<html:style>.a { color:#f00}</html:style>
+```
+
+# Output
+
+```html
+<!-- unknown tag with colon -->
+<div>
+  <foo:bar>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block </div>
+    <div>BLOCK </div>
+    <div>block </div>
+    <div>block </div>
+    <div>block </div>
+    <pre> pre pr
+e</pre>
+    <textarea>pre-wrap pr e-wrap </textarea>
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span>
+    <span> inline </span><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV>block </html:DIV>
+    <HTML:DIV>BLOCK </HTML:DIV>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:pre>pre pr e</html:pre>
+    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+  </foo:bar>
+</div>
+
+<!-- block tag with colon -->
+<div>
+  <foo:div>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block </div>
+    <div>BLOCK </div>
+    <div>block </div>
+    <div>block </div>
+    <div>block </div>
+    <pre> pre pr
+e</pre>
+    <textarea>pre-wrap pr e-wrap </textarea>
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span>
+    <span> inline </span><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV>block </html:DIV>
+    <HTML:DIV>BLOCK </HTML:DIV>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:pre>pre pr e</html:pre>
+    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+  </foo:div>
+</div>
+
+<!-- inline tag with colon -->
+<div>
+  <foo:span>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block </div>
+    <div>BLOCK </div>
+    <div>block </div>
+    <div>block </div>
+    <div>block </div>
+    <pre> pre pr
+e</pre>
+    <textarea>pre-wrap pr e-wrap </textarea>
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span>
+    <span> inline </span><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV>block </html:DIV>
+    <HTML:DIV>BLOCK </HTML:DIV>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:pre>pre pr e</html:pre>
+    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+  </foo:span>
+</div>
+
+<!-- unknown -->
+<div>
+  <foo-bar>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block </div>
+    <div>BLOCK </div>
+    <div>block </div>
+    <div>block </div>
+    <div>block </div>
+    <pre> pre pr
+e</pre>
+    <textarea>pre-wrap pr e-wrap </textarea>
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span>
+    <span> inline </span><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV>block </html:DIV>
+    <HTML:DIV>BLOCK </HTML:DIV>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:pre>pre pr e</html:pre>
+    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+  </foo-bar>
+</div>
+
+<!-- without colon -->
+<div>
+  <div>
+    <div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </div>
+    <div>block </div>
+    <div>BLOCK </div>
+    <div>block </div>
+    <div>block </div>
+    <div>block </div>
+    <pre> pre pr
+e</pre>
+    <textarea>pre-wrap pr e-wrap </textarea>
+    <span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </span>
+    <span> inline </span><span> inline </span>
+    <span> inline </span><span> inline </span>
+    <html:div>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
+    </html:div>
+    <html:DIV>block </html:DIV>
+    <HTML:DIV>BLOCK </HTML:DIV>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:div>block </html:div>
+    <html:pre>pre pr e</html:pre>
+    <html:textarea>pre-wrap pr e-wrap </html:textarea>
+    <html:span>
+      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
+    </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+    <html:span>inline </html:span>
+  </div>
+</div>
+
+<!-- #7236 -->
+<with:colon>
+  <div>
+    <h1>
+      text text text text text text text text text text text text text text
+    </h1>
+  </div>
+  <script>
+  const func = function() { console.log('Hello, there');}
+  </script>
+</with:colon>
+
+<!-- script like -->
+<with:colon>
+  <style>.a{color:#f00}</style>
+  <script>
+  const func = function() { console.log('Hello, there');}
+  </script>
+  <style>.A{COLOR:#F00}</style>
+  <html:script>
+    const func = function() { console.log('Hello, there');}
+  </html:script>
+  <html:style>.a { color:#f00}</html:style>
+  <svg>
+    <style>.a{color:#f00}</style>
+  </svg>
+  <svg>
+    <style>.a{color:#f00}</style>
+  </svg>
+</with:colon>
+<html:script>
+  const func = function() { console.log('Hello, there');}
+</html:script>
+<html:style>.a { color:#f00}</html:style>
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.ignored b/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.ignored
deleted file mode 100644
index 937c05d9e181..000000000000
--- a/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.ignored
+++ /dev/null
@@ -1,56 +0,0 @@
-<ul><!-- 123
---><li>First</li><!-- 123
-456
-   789
---><li>Second</li><!--
-
-
-    123
-       456
-          789
-
-
---><li>Second</li><!--
-
-
-           123
-        456
-    789
-
-
---></ul>
-<span><!--
---><span>a</span><!--
---><span>b</span><!--
---></span>
-
-<span><!-- 1
---><span>a</span><!-- 2
---><span>b</span><!-- 3
---></span>
-
-<span><!--
-1 --><span>a</span><!--
-2 --><span>b</span><!--
-3 --></span>
-
-123<!---->456
-
-123<!--x-->456
-
-<!-- A
-     B -->
-
-<!--
-The null hero's name is {{nullHero.name}}
-
-See console log:
-  TypeError: Cannot read property 'name' of null in [null]
--->
-
-<!--
-    The null hero's name is {{nullHero.name}}
-
-    See console log:
-    TypeError: Cannot read property 'name' of null in [null]
--->
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.prettier-snap
deleted file mode 100644
index c1fc040526a9..000000000000
--- a/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.prettier-snap
+++ /dev/null
@@ -1,71 +0,0 @@
-<ul>
-  <!-- 123
--->
-  <li>First</li>
-  <!-- 123
-456
-   789
--->
-  <li>Second</li>
-  <!--
-
-
-    123
-       456
-          789
-
-
--->
-  <li>Second</li>
-  <!--
-
-
-           123
-        456
-    789
-
-
---></ul>
-<span
-  ><!--
---><span>a</span
-  ><!--
---><span>b</span
-  ><!--
---></span>
-
-<span
-  ><!-- 1
---><span>a</span
-  ><!-- 2
---><span>b</span
-  ><!-- 3
---></span>
-
-<span
-  ><!--
-1 --><span>a</span
-  ><!--
-2 --><span>b</span
-  ><!--
-3 --></span
->
-
-123<!---->456 123<!--x-->456
-
-<!-- A
-     B -->
-
-<!--
-The null hero's name is {{nullHero.name}}
-
-See console log:
-  TypeError: Cannot read property 'name' of null in [null]
--->
-
-<!--
-    The null hero's name is {{nullHero.name}}
-
-    See console log:
-    TypeError: Cannot read property 'name' of null in [null]
--->
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.snap
deleted file mode 100644
index 92191f479e7c..000000000000
--- a/crates/biome_html_formatter/tests/specs/prettier/html/comments/surrounding-empty-line.html.snap
+++ /dev/null
@@ -1,214 +0,0 @@
----
-source: crates/biome_formatter_test/src/snapshot_builder.rs
-info: html/comments/surrounding-empty-line.html
----
-# Input
-
-```html
-<ul><!-- 123
---><li>First</li><!-- 123
-456
-   789
---><li>Second</li><!--
-
-
-    123
-       456
-          789
-
-
---><li>Second</li><!--
-
-
-           123
-        456
-    789
-
-
---></ul>
-<span><!--
---><span>a</span><!--
---><span>b</span><!--
---></span>
-
-<span><!-- 1
---><span>a</span><!-- 2
---><span>b</span><!-- 3
---></span>
-
-<span><!--
-1 --><span>a</span><!--
-2 --><span>b</span><!--
-3 --></span>
-
-123<!---->456
-
-123<!--x-->456
-
-<!-- A
-     B -->
-
-<!--
-The null hero's name is {{nullHero.name}}
-
-See console log:
-  TypeError: Cannot read property 'name' of null in [null]
--->
-
-<!--
-    The null hero's name is {{nullHero.name}}
-
-    See console log:
-    TypeError: Cannot read property 'name' of null in [null]
--->
-
-```
-
-
-# Prettier differences
-
-```diff
---- Prettier
-+++ Biome
-@@ -25,32 +25,40 @@
-     789
- 
- 
----></ul>
-+-->
-+</ul>
- <span
-   ><!--
----><span>a</span
--  ><!--
----><span>b</span
--  ><!--
----></span>
-+-->
-+  <span>a</span>
-+  <!--
-+-->
-+  <span>b</span>
-+  <!--
-+--></span
-+>
- 
- <span
-   ><!-- 1
----><span>a</span
--  ><!-- 2
----><span>b</span
--  ><!-- 3
----></span>
-+-->
-+  <span>a</span>
-+  <!-- 2
-+-->
-+  <span>b</span>
-+  <!-- 3
-+--></span
-+>
- 
- <span
-   ><!--
--1 --><span>a</span
--  ><!--
--2 --><span>b</span
--  ><!--
-+1 -->
-+  <span>a</span>
-+  <!--
-+2 -->
-+  <span>b</span>
-+  <!--
- 3 --></span
- >
--
- 123<!---->456 123<!--x-->456
- 
- <!-- A
-```
-
-# Output
-
-```html
-<ul>
-  <!-- 123
--->
-  <li>First</li>
-  <!-- 123
-456
-   789
--->
-  <li>Second</li>
-  <!--
-
-
-    123
-       456
-          789
-
-
--->
-  <li>Second</li>
-  <!--
-
-
-           123
-        456
-    789
-
-
--->
-</ul>
-<span
-  ><!--
--->
-  <span>a</span>
-  <!--
--->
-  <span>b</span>
-  <!--
---></span
->
-
-<span
-  ><!-- 1
--->
-  <span>a</span>
-  <!-- 2
--->
-  <span>b</span>
-  <!-- 3
---></span
->
-
-<span
-  ><!--
-1 -->
-  <span>a</span>
-  <!--
-2 -->
-  <span>b</span>
-  <!--
-3 --></span
->
-123<!---->456 123<!--x-->456
-
-<!-- A
-     B -->
-
-<!--
-The null hero's name is {{nullHero.name}}
-
-See console log:
-  TypeError: Cannot read property 'name' of null in [null]
--->
-
-<!--
-    The null hero's name is {{nullHero.name}}
-
-    See console log:
-    TypeError: Cannot read property 'name' of null in [null]
--->
-```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html b/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html
new file mode 100644
index 000000000000..0efa7a6a9719
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html
@@ -0,0 +1,7 @@
+<mjml>
+
+<mj-style> .should-not-format{
+  as: 'css'
+}</mj-style>
+
+</mjml>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html.prettier-snap
new file mode 100644
index 000000000000..74a80a9e0cf3
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html.prettier-snap
@@ -0,0 +1,3 @@
+<mjml>
+  <mj-style> .should-not-format{ as: 'css' }</mj-style>
+</mjml>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html.snap
new file mode 100644
index 000000000000..0cf95cb829f0
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/css/mj-style.html.snap
@@ -0,0 +1,37 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/css/mj-style.html
+---
+# Input
+
+```html
+<mjml>
+
+<mj-style> .should-not-format{
+  as: 'css'
+}</mj-style>
+
+</mjml>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,3 +1,3 @@
+ <mjml>
+-  <mj-style> .should-not-format{ as: 'css' }</mj-style>
++  <mj-style>.should-not-format { as: 'css' }</mj-style>
+ </mjml>
+```
+
+# Output
+
+```html
+<mjml>
+  <mj-style>.should-not-format { as: 'css' }</mj-style>
+</mjml>
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html b/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html
index 9d184032eccf..89c1110e918d 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html
@@ -8,10 +8,10 @@
 
 
 
-}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{
-
-
-    some_variable
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
 
 
 
@@ -20,7 +20,7 @@
                     preserve
 
                     invalid
-
+                    
                     interpolation
 
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html.snap
index 8d55fbb7a333..123a226c2353 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html.snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/interpolation/example.html.snap
@@ -15,10 +15,10 @@ x => {
 
 
 
-}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{
-
-
-    some_variable
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
 
 
 
@@ -27,7 +27,7 @@ x => {
                     preserve
 
                     invalid
-
+                    
                     interpolation
 
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
@@ -59,10 +59,10 @@ x => {
 +
 +
 +
-+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{
-+
-+
-+    some_variable
++}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
++    
++    
++    some_variable 
 +
 +
 +
@@ -71,7 +71,7 @@ x => {
 +                    preserve
 +
 +                    invalid
-+
++                    
 +                    interpolation
 +
 +}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
@@ -90,10 +90,10 @@ x => {
 
 
 
-}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{
-
-
-    some_variable
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
 
 
 
@@ -102,7 +102,7 @@ x => {
                     preserve
 
                     invalid
-
+                    
                     interpolation
 
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
@@ -122,9 +122,9 @@ example.html:1:114 parse ━━━━━━━━━━━━━━━━━━
         ...
    > 9 │ 
   > 10 │ 
-  > 11 │ }} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{
+  > 11 │ }} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{··
        │ ^^
-    12 │ 
+    12 │     
   
   i Remove it or enable the parsing using the html.parser.interpolation option.
   
@@ -132,9 +132,9 @@ example.html:11:72 parse ━━━━━━━━━━━━━━━━━━
 
   × Text expressions aren't supported.
   
-  > 11 │ }} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{
-       │                                                                        ^^
-  > 12 │ 
+  > 11 │ }} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{··
+       │                                                                        ^^^^
+  > 12 │     
         ...
   > 17 │ 
   > 18 │ }} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html b/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html
index abbeb6b1010d..9fab287467f2 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html
@@ -16,6 +16,10 @@
 <script type="text/babel">
             const    someJS    =   'this should be formatted'
 </script>
+<script type="text/jsx">
+            const    someJS    =   'this should be formatted'
+</script>
+
 <script type="module">
       import lib from './lib.js';
   
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.prettier-snap
index 322d4dc6b8f8..0f53f1601d3f 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.prettier-snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.prettier-snap
@@ -16,6 +16,10 @@
 <script type="text/babel">
   const someJS = "this should be formatted";
 </script>
+<script type="text/jsx">
+  const someJS = "this should be formatted";
+</script>
+
 <script type="module">
   import lib from "./lib.js";
 
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.snap
index 635a63f3d4e1..fbc53055e579 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/js/js.html.snap
@@ -23,6 +23,10 @@ info: html/js/js.html
 <script type="text/babel">
             const    someJS    =   'this should be formatted'
 </script>
+<script type="text/jsx">
+            const    someJS    =   'this should be formatted'
+</script>
+
 <script type="module">
       import lib from './lib.js';
   
@@ -37,13 +41,18 @@ info: html/js/js.html
 ```diff
 --- Prettier
 +++ Biome
-@@ -14,12 +14,10 @@
+@@ -14,16 +14,14 @@
    alert(message);
  </script>
  <script type="text/babel">
 -  const someJS = "this should be formatted";
 +            const    someJS    =   'this should be formatted'
  </script>
+ <script type="text/jsx">
+-  const someJS = "this should be formatted";
++            const    someJS    =   'this should be formatted'
+ </script>
+ 
  <script type="module">
 -  import lib from "./lib.js";
 -
@@ -78,6 +87,10 @@ info: html/js/js.html
 <script type="text/babel">
             const    someJS    =   'this should be formatted'
 </script>
+<script type="text/jsx">
+            const    someJS    =   'this should be formatted'
+</script>
+
 <script type="module">
       import lib from './lib.js';
   
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.prettier-snap
index edd984e3f052..c3702e67ad43 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.prettier-snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.prettier-snap
@@ -2,9 +2,7 @@
 <html lang="en">
   <head>
     <script lang="ts">
-      type X = {
-        [K in keyof Y]: Partial<K>;
-      };
+      type X = { [K in keyof Y]: Partial<K> };
 
       class Foo<T> {
         constructor(private foo: keyof Apple) {}
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.snap
index ac318f8ecbc7..9c8a3d0b5ce5 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/multiparser/ts/html-with-ts-script.html.snap
@@ -34,15 +34,13 @@ info: html/multiparser/ts/html-with-ts-script.html
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,14 +1,18 @@
+@@ -1,12 +1,18 @@
 -<!doctype html>
 +<!DOCTYPE html>
  <html lang="en">
    <head>
      <script lang="ts">
--      type X = {
--        [K in keyof Y]: Partial<K>;
--      };
+-      type X = { [K in keyof Y]: Partial<K> };
 +    type X = { [
 +        K in keyof Y
 +    ]: Partial < K >  } ;
@@ -50,11 +48,11 @@ info: html/multiparser/ts/html-with-ts-script.html
 +    class   Foo< T >{
 +
 +        constructor ( private foo: keyof Apple ){
++
  
 -      class Foo<T> {
 -        constructor(private foo: keyof Apple) {}
 -      }
-+
 +        }
 +    }
      </script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html
new file mode 100644
index 000000000000..c954272c41df
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html
@@ -0,0 +1,19 @@
+<head></head>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+/>
+<style>marked-md:not(:defined) { display: none }</style>
+<script type="module" src="../auto.js"></script>
+<!-- prettier-ignore -->
+<marked-md display="block"><plaintext>
+# Hello world!
+
+```html
+<p>Look at these <span id="html">HTML tags</span></p>
+<div class="box">They aren't being <code>interpreted</code> as actual HTML</div>
+```
+
+But this HTML is <mark>actually parsed</mark> just like **normal**.
+
+> <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html.prettier-snap
new file mode 100644
index 000000000000..5e90cd5d3562
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html.prettier-snap
@@ -0,0 +1,23 @@
+<head></head>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+/>
+<style>
+  marked-md:not(:defined) {
+    display: none;
+  }
+</style>
+<script type="module" src="../auto.js"></script>
+<!-- prettier-ignore -->
+<marked-md display="block"><plaintext>
+# Hello world!
+
+```html
+<p>Look at these <span id="html">HTML tags</span></p>
+<div class="box">They aren't being <code>interpreted</code> as actual HTML</div>
+```
+
+But this HTML is <mark>actually parsed</mark> just like **normal**.
+
+> <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html.snap
new file mode 100644
index 000000000000..7e0c22fd22f3
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/issue-15738.html.snap
@@ -0,0 +1,97 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/prettier_ignore/issue-15738.html
+---
+# Input
+
+```html
+<head></head>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+/>
+<style>marked-md:not(:defined) { display: none }</style>
+<script type="module" src="../auto.js"></script>
+<!-- prettier-ignore -->
+<marked-md display="block"><plaintext>
+# Hello world!
+
+```html
+<p>Look at these <span id="html">HTML tags</span></p>
+<div class="box">They aren't being <code>interpreted</code> as actual HTML</div>
+```
+
+But this HTML is <mark>actually parsed</mark> just like **normal**.
+
+> <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -3,11 +3,7 @@
+   rel="stylesheet"
+   href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+ />
+-<style>
+-  marked-md:not(:defined) {
+-    display: none;
+-  }
+-</style>
++<style>marked-md:not(:defined) { display: none }</style>
+ <script type="module" src="../auto.js"></script>
+ <!-- prettier-ignore -->
+ <marked-md display="block"><plaintext>
+```
+
+# Output
+
+```html
+<head></head>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+/>
+<style>marked-md:not(:defined) { display: none }</style>
+<script type="module" src="../auto.js"></script>
+<!-- prettier-ignore -->
+<marked-md display="block"><plaintext>
+# Hello world!
+
+```html
+<p>Look at these <span id="html">HTML tags</span></p>
+<div class="box">They aren't being <code>interpreted</code> as actual HTML</div>
+```
+
+But this HTML is <mark>actually parsed</mark> just like **normal**.
+
+> <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
+```
+
+# Errors
+```
+issue-15738.html:20:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Expected a closing tag but instead found the end of the file.
+  
+    19 │ > <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
+  > 20 │ 
+       │ 
+  
+  i Expected a closing tag here.
+  
+    19 │ > <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
+  > 20 │ 
+       │ 
+  
+
+```
+
+# Lines exceeding max width of 80 characters
+```
+   19: > <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed.html b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed.html
new file mode 100644
index 000000000000..1f8ac0f36fb2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed.html
@@ -0,0 +1,4 @@
+<!-- prettier-ignore -->
+<div>
+# Hello world!
+<span>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed.html.prettier-snap
new file mode 100644
index 000000000000..1f8ac0f36fb2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed.html.prettier-snap
@@ -0,0 +1,4 @@
+<!-- prettier-ignore -->
+<div>
+# Hello world!
+<span>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html
new file mode 100644
index 000000000000..be70dabfcea1
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html
@@ -0,0 +1,4 @@
+<!-- prettier-ignore -->
+<p>
+# Hello world!
+<div>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html.prettier-snap
new file mode 100644
index 000000000000..e2c2fad40519
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html.prettier-snap
@@ -0,0 +1,5 @@
+<!-- prettier-ignore -->
+<p>
+# Hello world!
+
+<div></div>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html.snap
new file mode 100644
index 000000000000..ac503c88bef1
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/prettier_ignore/unclosed2.html.snap
@@ -0,0 +1,58 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/prettier_ignore/unclosed2.html
+---
+# Input
+
+```html
+<!-- prettier-ignore -->
+<p>
+# Hello world!
+<div>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,5 +1,4 @@
+ <!-- prettier-ignore -->
+ <p>
+ # Hello world!
+-
+-<div></div>
++<div>
+```
+
+# Output
+
+```html
+<!-- prettier-ignore -->
+<p>
+# Hello world!
+<div>
+```
+
+# Errors
+```
+unclosed2.html:5:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Expected a closing tag but instead found the end of the file.
+  
+    3 │ # Hello world!
+    4 │ <div>
+  > 5 │ 
+      │ 
+  
+  i Expected a closing tag here.
+  
+    3 │ # Hello world!
+    4 │ <div>
+  > 5 │ 
+      │ 
+  
+
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html b/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html
index 75ff3bed275a..fcf3d7ccb20c 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html
@@ -7,6 +7,15 @@ <h1>Hello World!</h1>,
 );
 </script>
 
+<script type="text/jsx" data-presets="react" data-type="module">
+import { h, 
+         render } from 'https://unpkg.com/preact?module';
+render(
+<h1>Hello World!</h1>,
+         document.body
+);
+</script>
+
 <script type="text/babel">
 <!--
 alert(1)
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.prettier-snap
index 751b96724fae..ec9853fd6c9e 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.prettier-snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.prettier-snap
@@ -3,6 +3,11 @@
   render(<h1>Hello World!</h1>, document.body);
 </script>
 
+<script type="text/jsx" data-presets="react" data-type="module">
+  import { h, render } from "https://unpkg.com/preact?module";
+  render(<h1>Hello World!</h1>, document.body);
+</script>
+
 <script type="text/babel">
   <!--
   alert(1);
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.snap
index 4555b7b91106..94e350b9cf2a 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.snap
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/script/babel.html.snap
@@ -14,6 +14,15 @@ render(
 );
 </script>
 
+<script type="text/jsx" data-presets="react" data-type="module">
+import { h, 
+         render } from 'https://unpkg.com/preact?module';
+render(
+<h1>Hello World!</h1>,
+         document.body
+);
+</script>
+
 <script type="text/babel">
 <!--
 alert(1)
@@ -28,7 +37,7 @@ alert(1)
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,10 +1,14 @@
+@@ -1,15 +1,23 @@
  <script type="text/babel" data-presets="react" data-type="module">
 -  import { h, render } from "https://unpkg.com/preact?module";
 -  render(<h1>Hello World!</h1>, document.body);
@@ -40,6 +49,17 @@ alert(1)
 +);
  </script>
  
+ <script type="text/jsx" data-presets="react" data-type="module">
+-  import { h, render } from "https://unpkg.com/preact?module";
+-  render(<h1>Hello World!</h1>, document.body);
++import { h, 
++         render } from 'https://unpkg.com/preact?module';
++render(
++<h1>Hello World!</h1>,
++         document.body
++);
+ </script>
+ 
  <script type="text/babel">
 -  <!--
 -  alert(1);
@@ -62,6 +82,15 @@ render(
 );
 </script>
 
+<script type="text/jsx" data-presets="react" data-type="module">
+import { h, 
+         render } from 'https://unpkg.com/preact?module';
+render(
+<h1>Hello World!</h1>,
+         document.body
+);
+</script>
+
 <script type="text/babel">
 <!--
 alert(1)
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html b/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html
new file mode 100644
index 000000000000..f3855a49e7bc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html
@@ -0,0 +1,12 @@
+<constructor>constructor</constructor>
+<hasOwnProperty>hasOwnProperty</hasOwnProperty>
+<isPrototypeOf>isPrototypeOf</isPrototypeOf>
+<propertyIsEnumerable>propertyIsEnumerable</propertyIsEnumerable>
+<toLocaleString>toLocaleString</toLocaleString>
+<toString>toString</toString>
+<valueOf>valueOf</valueOf>
+<!-- <__defineGetter__>__defineGetter__</__defineGetter__> -->
+<!-- <__defineSetter__>__defineSetter__</__defineSetter__> -->
+<!-- <__lookupGetter__>__lookupGetter__</__lookupGetter__> -->
+<!-- <__lookupSetter__>__lookupSetter__</__lookupSetter__> -->
+<!-- <__proto__>__proto__</__proto__> -->
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html.prettier-snap
new file mode 100644
index 000000000000..f3855a49e7bc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html.prettier-snap
@@ -0,0 +1,12 @@
+<constructor>constructor</constructor>
+<hasOwnProperty>hasOwnProperty</hasOwnProperty>
+<isPrototypeOf>isPrototypeOf</isPrototypeOf>
+<propertyIsEnumerable>propertyIsEnumerable</propertyIsEnumerable>
+<toLocaleString>toLocaleString</toLocaleString>
+<toString>toString</toString>
+<valueOf>valueOf</valueOf>
+<!-- <__defineGetter__>__defineGetter__</__defineGetter__> -->
+<!-- <__defineSetter__>__defineSetter__</__defineSetter__> -->
+<!-- <__lookupGetter__>__lookupGetter__</__lookupGetter__> -->
+<!-- <__lookupSetter__>__lookupSetter__</__lookupSetter__> -->
+<!-- <__proto__>__proto__</__proto__> -->
diff --git a/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html.snap b/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html.snap
new file mode 100644
index 000000000000..e0cf63dde07e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/html/tags/object-prototype-properties/object-prototype-properties.html.snap
@@ -0,0 +1,52 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: html/tags/object-prototype-properties/object-prototype-properties.html
+---
+# Input
+
+```html
+<constructor>constructor</constructor>
+<hasOwnProperty>hasOwnProperty</hasOwnProperty>
+<isPrototypeOf>isPrototypeOf</isPrototypeOf>
+<propertyIsEnumerable>propertyIsEnumerable</propertyIsEnumerable>
+<toLocaleString>toLocaleString</toLocaleString>
+<toString>toString</toString>
+<valueOf>valueOf</valueOf>
+<!-- <__defineGetter__>__defineGetter__</__defineGetter__> -->
+<!-- <__defineSetter__>__defineSetter__</__defineSetter__> -->
+<!-- <__lookupGetter__>__lookupGetter__</__lookupGetter__> -->
+<!-- <__lookupSetter__>__lookupSetter__</__lookupSetter__> -->
+<!-- <__proto__>__proto__</__proto__> -->
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -9,4 +9,4 @@
+ <!-- <__defineSetter__>__defineSetter__</__defineSetter__> -->
+ <!-- <__lookupGetter__>__lookupGetter__</__lookupGetter__> -->
+ <!-- <__lookupSetter__>__lookupSetter__</__lookupSetter__> -->
+-<!-- <__proto__>__proto__</__proto__> -->
++<!-- <__proto__>__proto__</__proto__> -->
+\ No newline at end of file
+```
+
+# Output
+
+```html
+<constructor>constructor</constructor>
+<hasOwnProperty>hasOwnProperty</hasOwnProperty>
+<isPrototypeOf>isPrototypeOf</isPrototypeOf>
+<propertyIsEnumerable>propertyIsEnumerable</propertyIsEnumerable>
+<toLocaleString>toLocaleString</toLocaleString>
+<toString>toString</toString>
+<valueOf>valueOf</valueOf>
+<!-- <__defineGetter__>__defineGetter__</__defineGetter__> -->
+<!-- <__defineSetter__>__defineSetter__</__defineSetter__> -->
+<!-- <__lookupGetter__>__lookupGetter__</__lookupGetter__> -->
+<!-- <__lookupSetter__>__lookupSetter__</__lookupSetter__> -->
+<!-- <__proto__>__proto__</__proto__> -->```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/prepare_tests.js b/crates/biome_html_formatter/tests/specs/prettier/prepare_tests.js
index 5898bb1954df..38abffc38f38 100644
--- a/crates/biome_html_formatter/tests/specs/prettier/prepare_tests.js
+++ b/crates/biome_html_formatter/tests/specs/prettier/prepare_tests.js
@@ -1,9 +1,16 @@
-const {extractPrettierTests} = require("../../../../biome_formatter_test/src/prettier/prepare_tests");
+import { extractPrettierTests } from "../../../../biome_formatter_test/src/prettier/prepare_tests.js";
+import fs from "fs/promises";
 
 async function main() {
 	await extractPrettierTests("html", {
 		parser: "html",
 	});
+	// These tests don't contain real HTML, and its specific to prettier's testing infra
+	await fs.rm("html/cursor", { recursive: true, force: true });
+
+	await extractPrettierTests("vue", {
+		parser: "vue",
+	});
 }
 
 main().catch((err) => {
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html
new file mode 100644
index 000000000000..40b08f887f07
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+<template>
+  <div id="js-app">
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">new Vue({el: '#js-app'})</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
+</body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html.prettier-snap
new file mode 100644
index 000000000000..e0ceca6d6ff0
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html.prettier-snap
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <template>
+      <div id="js-app">
+        <div
+          :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+        >
+          text
+        </div>
+        <div
+          :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+        ></div>
+        <span
+          :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+        >
+          text
+        </span>
+        <span
+          :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+        ></span>
+        <img
+          :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+        />
+        <div class="a">text</div>
+        <span class="a"> text </span>
+        <img class="a" />
+      </div>
+    </template>
+
+    <script
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >
+      new Vue({el: '#js-app'})
+    </script>
+    <style
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >
+      .a {color: #f00}
+    </style>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html.snap b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html.snap
new file mode 100644
index 000000000000..6a69553cf871
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.html.snap
@@ -0,0 +1,127 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: vue/bracket-same-line/vue.html
+---
+# Input
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+<template>
+  <div id="js-app">
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">new Vue({el: '#js-app'})</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
+</body>
+</html>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -36,13 +36,9 @@
+ 
+     <script
+       long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+-    >
+-      new Vue({el: '#js-app'})
+-    </script>
++    >new Vue({el: '#js-app'})</script>
+     <style
+       long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+-    >
+-      .a {color: #f00}
+-    </style>
++    >.a {color: #f00}</style>
+   </body>
+ </html>
+```
+
+# Output
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <template>
+      <div id="js-app">
+        <div
+          :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+        >
+          text
+        </div>
+        <div
+          :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+        ></div>
+        <span
+          :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+        >
+          text
+        </span>
+        <span
+          :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+        ></span>
+        <img
+          :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+        />
+        <div class="a">text</div>
+        <span class="a"> text </span>
+        <img class="a" />
+      </div>
+    </template>
+
+    <script
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >new Vue({el: '#js-app'})</script>
+    <style
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >.a {color: #f00}</style>
+  </body>
+</html>
+```
+
+# Lines exceeding max width of 80 characters
+```
+   13:           :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+   18:           :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+   21:           :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+   26:           :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+   29:           :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+   38:       long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+   41:       long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.vue
new file mode 100644
index 000000000000..c4f590a6c9c1
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+<div :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div v-on:long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">export default {}</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.vue.prettier-snap
new file mode 100644
index 000000000000..a98812b5ecd4
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/bracket-same-line/vue.vue.prettier-snap
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div
+      :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >
+      text
+    </div>
+    <div
+      v-on:long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    ></div>
+    <span
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >
+      text
+    </span>
+    <span
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    ></span>
+    <img
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    />
+    <div class="a">text</div>
+    <span class="a"> text </span>
+    <img class="a" />
+  </div>
+</template>
+
+<script
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+export default {}
+</script>
+<style
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+.a {color: #f00}
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/broken-plugins/missing-comments.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/broken-plugins/missing-comments.vue
new file mode 100644
index 000000000000..2c5d7bfef6ad
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/broken-plugins/missing-comments.vue
@@ -0,0 +1,2 @@
+<template lang="missing-comments">
+      This should not be replaced.</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/broken-plugins/missing-comments.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/broken-plugins/missing-comments.vue.prettier-snap
new file mode 100644
index 000000000000..2c5d7bfef6ad
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/broken-plugins/missing-comments.vue.prettier-snap
@@ -0,0 +1,2 @@
+<template lang="missing-comments">
+      This should not be replaced.</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/graphql.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/graphql.vue
new file mode 100644
index 000000000000..d0702f6af452
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/graphql.vue
@@ -0,0 +1,11 @@
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/graphql.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/graphql.vue.prettier-snap
new file mode 100644
index 000000000000..d0702f6af452
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/graphql.vue.prettier-snap
@@ -0,0 +1,11 @@
+<page-query lang="graphql">
+query { posts: allWordPressPost {
+    edges {
+   node {
+          id
+      title
+      }
+    }
+  }
+}
+</page-query>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/handlebars.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/handlebars.vue
new file mode 100644
index 000000000000..30d3ca5313fc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/handlebars.vue
@@ -0,0 +1,3 @@
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/handlebars.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/handlebars.vue.prettier-snap
new file mode 100644
index 000000000000..30d3ca5313fc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/handlebars.vue.prettier-snap
@@ -0,0 +1,3 @@
+<custom type="text/x-handlebars-template">
+Handlebars <b>{{     doesWhat}}</b>
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/html-whitespace-sensitivity/one-line.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/html-whitespace-sensitivity/one-line.vue
new file mode 100644
index 000000000000..7ba2436e0c2a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/html-whitespace-sensitivity/one-line.vue
@@ -0,0 +1 @@
+<docs lang=unknown></docs><docs lang=unknown></docs><!-- display: inline --><docs lang=unknown></docs><docs lang=unknown style="display: inline"></docs>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/html-whitespace-sensitivity/one-line.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/html-whitespace-sensitivity/one-line.vue.prettier-snap
new file mode 100644
index 000000000000..980697f01dd5
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/html-whitespace-sensitivity/one-line.vue.prettier-snap
@@ -0,0 +1,5 @@
+<docs lang="unknown"></docs>
+<docs lang="unknown"></docs>
+<!-- display: inline -->
+<docs lang="unknown"></docs>
+<docs lang="unknown" style="display: inline"></docs>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/json.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/json.vue
new file mode 100644
index 000000000000..bb69efc9b2eb
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/json.vue
@@ -0,0 +1,34 @@
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/json.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/json.vue.prettier-snap
new file mode 100644
index 000000000000..bb69efc9b2eb
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/json.vue.prettier-snap
@@ -0,0 +1,34 @@
+<i18n lang="json">
+{ "en": {
+    "hello": "hello world!"
+    
+    
+    }, "ja": {
+   
+   
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<i18n type="application/json">
+{ "en": {
+    "hello": "hello world!"
+
+
+    }, "ja": {
+
+
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom lang="json">{
+  "a": 1
+}</custom>
+
+<custom lang="json">{
+  "a": 1
+}
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/lang-attribute.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/lang-attribute.vue
new file mode 100644
index 000000000000..1872b0f72bfc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/lang-attribute.vue
@@ -0,0 +1,4 @@
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/lang-attribute.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/lang-attribute.vue.prettier-snap
new file mode 100644
index 000000000000..1872b0f72bfc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/lang-attribute.vue.prettier-snap
@@ -0,0 +1,4 @@
+<custom lang="js">
+const foo
+      = 'foo'
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/markdown.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/markdown.vue
new file mode 100644
index 000000000000..8b533f558016
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/markdown.vue
@@ -0,0 +1,23 @@
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/markdown.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/markdown.vue.prettier-snap
new file mode 100644
index 000000000000..8b533f558016
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/markdown.vue.prettier-snap
@@ -0,0 +1,23 @@
+<docs lang="markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
+
+<docs type="text/markdown">
+# Foo
+- bar
+- baz
+
+| Age | Time | Food | Gold | Requirement |
+  | ------------ | ----- | ---- | ---- | ----------------------- |
+  | Feudal Age | 02:10 | 500 | 0 | Dark Age building x 2 |
+  | Castle Age | 02:40 | 800 | 200 |- |
+  | Imperial Age | 03:30 | 1000 | 800 | Castle Age building x 2 |
+</docs>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/tag_like.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/tag_like.vue
new file mode 100644
index 000000000000..7a079025f4c1
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/tag_like.vue
@@ -0,0 +1,9 @@
+<docs>
+This component takes an `items` prop (`Array<Object>`).
+  or
+This component should be placed inside a `<my-component>`.
+</docs>
+
+<custom lang="javascript">
+const foo =            "</"
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/tag_like.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/tag_like.vue.prettier-snap
new file mode 100644
index 000000000000..7a079025f4c1
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/tag_like.vue.prettier-snap
@@ -0,0 +1,9 @@
+<docs>
+This component takes an `items` prop (`Array<Object>`).
+  or
+This component should be placed inside a `<my-component>`.
+</docs>
+
+<custom lang="javascript">
+const foo =            "</"
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/unknown.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/unknown.vue
new file mode 100644
index 000000000000..e15502e673c7
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/unknown.vue
@@ -0,0 +1,25 @@
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/unknown.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/unknown.vue.prettier-snap
new file mode 100644
index 000000000000..e15502e673c7
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/unknown.vue.prettier-snap
@@ -0,0 +1,25 @@
+<i18n lang="foooo">
+{"en": {
+    "hello": "hello world!"
+  }, "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<custom>
+const foo =
+
+
+     "foo";
+</custom>
+
+<custom lang="zzz">
+const foo = "foo";
+  const foo = "foo";</custom>
+
+<custom lang="zzz">123</custom>
+
+<custom>{
+     foo: "bar"
+}</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/yaml.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/yaml.vue
new file mode 100644
index 000000000000..51803993b68c
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/yaml.vue
@@ -0,0 +1,6 @@
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/yaml.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/yaml.vue.prettier-snap
new file mode 100644
index 000000000000..51803993b68c
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/custom_block/yaml.vue.prettier-snap
@@ -0,0 +1,6 @@
+<i18n lang="yaml">
+en:
+                       hello: "hello world!"
+ja:
+        hello: "こんにちは、世界！"
+</i18n>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/assignment.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/assignment.vue
new file mode 100644
index 000000000000..f06f462109ff
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/assignment.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <button @click="  foo   =   1  "></button>
+    <button @click="  foo   =   1;  "></button>
+    <button @click="  foo   +=   1  "></button>
+    <button @click="  foo   +=   1;  "></button>
+    <button @click="  foo   -=   1  "></button>
+    <button @click="  foo   -=   1;  "></button>
+    <button @click="  foo   *=   1  "></button>
+    <button @click="  foo   *=   1;  "></button>
+    <button @click="  foo   /=   1  "></button>
+    <button @click="  foo   /=   1;  "></button>
+    <button @click="  foo   %=   1  "></button>
+    <button @click="  foo   %=   1;  "></button>
+    <button @click="  foo   <<=   1  "></button>
+    <button @click="  foo   <<=   1;  "></button>
+    <button @click="  foo   >>=   1  "></button>
+    <button @click="  foo   >>=   1;  "></button>
+    <button @click="  foo   >>>=   1  "></button>
+    <button @click="  foo   >>>=   1;  "></button>
+    <button @click="  foo   |=   1  "></button>
+    <button @click="  foo   |=   1;  "></button>
+    <button @click="  foo   ^=   1  "></button>
+    <button @click="  foo   ^=   1;  "></button>
+    <button @click="  foo   &=   1  "></button>
+    <button @click="  foo   &=   1;  "></button>
+    <button @click="  foo   ||=   1  "></button>
+    <button @click="  foo   ||=   1;  "></button>
+    <button @click="  foo   &&=   1  "></button>
+    <button @click="  foo   &&=   1;  "></button>
+    <button @click="  foo   ??=   1  "></button>
+    <button @click="  foo   ??=   1;  "></button>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/assignment.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/assignment.vue.prettier-snap
new file mode 100644
index 000000000000..58a0a68a55df
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/assignment.vue.prettier-snap
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <button @click="foo = 1"></button>
+    <button @click="foo = 1"></button>
+    <button @click="foo += 1"></button>
+    <button @click="foo += 1"></button>
+    <button @click="foo -= 1"></button>
+    <button @click="foo -= 1"></button>
+    <button @click="foo *= 1"></button>
+    <button @click="foo *= 1"></button>
+    <button @click="foo /= 1"></button>
+    <button @click="foo /= 1"></button>
+    <button @click="foo %= 1"></button>
+    <button @click="foo %= 1"></button>
+    <button @click="foo <<= 1"></button>
+    <button @click="foo <<= 1"></button>
+    <button @click="foo >>= 1"></button>
+    <button @click="foo >>= 1"></button>
+    <button @click="foo >>>= 1"></button>
+    <button @click="foo >>>= 1"></button>
+    <button @click="foo |= 1"></button>
+    <button @click="foo |= 1"></button>
+    <button @click="foo ^= 1"></button>
+    <button @click="foo ^= 1"></button>
+    <button @click="foo &= 1"></button>
+    <button @click="foo &= 1"></button>
+    <button @click="foo ||= 1"></button>
+    <button @click="foo ||= 1"></button>
+    <button @click="foo &&= 1"></button>
+    <button @click="foo &&= 1"></button>
+    <button @click="foo ??= 1"></button>
+    <button @click="foo ??= 1"></button>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/basic-ts.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/basic-ts.vue
new file mode 100644
index 000000000000..4eff06ddad7b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/basic-ts.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+let x = 1;
+function log(...args) {
+  console.log(...args);
+}
+</script>
+
+<template>
+  <div @click="if (x === 1 as number) { log('hello') } else { log('nonhello') };">{{ x }}</div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/basic-ts.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/basic-ts.vue.prettier-snap
new file mode 100644
index 000000000000..e4551ed67a28
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/basic-ts.vue.prettier-snap
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+let x = 1;
+function log(...args) {
+  console.log(...args);
+}
+</script>
+
+<template>
+  <div
+    @click="
+      if (x === (1 as number)) {
+        log('hello');
+      } else {
+        log('nonhello');
+      }
+    "
+  >
+    {{ x }}
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/function-expression-ts.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/function-expression-ts.vue
new file mode 100644
index 000000000000..ffb1d01ff3b5
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/function-expression-ts.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div @click=" (  x :   never) =>      null">arrow</div>
+  <div @click=" function(  a    :   unknown[])      {
+      console.log(    'abcdefg');
+      return;
+  }">anonymous function</div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/function-expression-ts.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/function-expression-ts.vue.prettier-snap
new file mode 100644
index 000000000000..4311a6c29234
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/function-expression-ts.vue.prettier-snap
@@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div @click="(x: never) => null">arrow</div>
+  <div
+    @click="
+      function (a: unknown[]) {
+        console.log('abcdefg');
+        return;
+      }
+    "
+  >
+    anonymous function
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/no-semi/single-expression.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/no-semi/single-expression.vue
new file mode 100644
index 000000000000..16c7e545b7d2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/no-semi/single-expression.vue
@@ -0,0 +1,6 @@
+<template>
+  <foo-bar
+    @click="[foo, bar].forEach(fn => void fn())"
+    @loaded="(map = $event) && initMap()"
+  ></foo-bar>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/no-semi/single-expression.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/no-semi/single-expression.vue.prettier-snap
new file mode 100644
index 000000000000..16c7e545b7d2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/no-semi/single-expression.vue.prettier-snap
@@ -0,0 +1,6 @@
+<template>
+  <foo-bar
+    @click="[foo, bar].forEach(fn => void fn())"
+    @loaded="(map = $event) && initMap()"
+  ></foo-bar>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression-ts.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression-ts.vue
new file mode 100644
index 000000000000..96d0cf453977
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression-ts.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const 我 = () => {}
+const me = () => {}
+
+type Foo = () => void
+</script>
+
+<template>
+  <div @click="   我   " />
+  <div @click="   me   " />
+  <div @click="我   as Foo" />
+  <div @click="me   as Foo" />
+  <div @click="我   satisfies Foo" />
+  <div @click="me   satisfies Foo" />
+  <div @click="   (<number>我)" />
+  <div @click="   (<number>me)" />
+  <div @click="   我!" />
+  <div @click="   me!" />
+  <div @click="我<   string>" />
+  <div @click="me<   string>" />
+  <div @click="我!   as unknown   satisfies Foo" />
+  <div @click="me!   as unknown   satisfies Foo" />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression-ts.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression-ts.vue.prettier-snap
new file mode 100644
index 000000000000..0f34c8a81ef5
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression-ts.vue.prettier-snap
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const 我 = () => {};
+const me = () => {};
+
+type Foo = () => void;
+</script>
+
+<template>
+  <div @click="我" />
+  <div @click="me" />
+  <div @click="我 as Foo" />
+  <div @click="me as Foo" />
+  <div @click="我 satisfies Foo" />
+  <div @click="me satisfies Foo" />
+  <div @click="<number>我" />
+  <div @click="<number>me" />
+  <div @click="我!" />
+  <div @click="me!" />
+  <div @click="我<string>" />
+  <div @click="me<string>" />
+  <div @click="我! as unknown satisfies Foo" />
+  <div @click="me! as unknown satisfies Foo" />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression.vue
new file mode 100644
index 000000000000..7fb474a79548
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression.vue
@@ -0,0 +1,4 @@
+<template>
+  <div @click="   我   " />
+  <div @click="   me   " />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression.vue.prettier-snap
new file mode 100644
index 000000000000..9332515ec917
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/event-binding/non-ascii-expression.vue.prettier-snap
@@ -0,0 +1,4 @@
+<template>
+  <div @click="我" />
+  <div @click="me" />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html
new file mode 100644
index 000000000000..3bb9dc8d6712
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html
@@ -0,0 +1,106 @@
+<!-- https://github.com/vuejs/vue/blob/dev/examples/elastic-header/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>Vue.js elastic header example</title>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
+    <script src="http://dynamicsjs.com/lib/dynamics.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <!-- template for the component -->
+    <script type="text/x-template" id="header-view-template">
+      <div class="draggable-header-view"
+        @mousedown="startDrag" @touchstart="startDrag"
+        @mousemove="onDrag" @touchmove="onDrag"
+        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
+        <svg class="bg" width="320" height="560">
+          <path :d="headerPath" fill="#3F51B5"></path>
+        </svg>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" :style="contentPosition">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </script>
+  </head>
+  <body>
+
+    <div id="app" @touchmove.prevent>
+      <draggable-header-view>
+        <template slot="header">
+          <h1>Elastic Draggable SVG Header</h1>
+          <p>with <a href="https://vuejs.org">Vue.js</a> + <a href="http://dynamicsjs.com">dynamics.js</a></p>
+        </template>
+        <template slot="content">
+          <p>Note this is just an effect demo - there are of course many additional details if you want to use this in production, e.g. handling responsive sizes, reload threshold and content scrolling. Those are out of scope for this quick little hack. However, the idea is that you can hide them as internal details of a Vue.js component and expose a simple Web-Component-like interface.</p>
+        </template>
+      </draggable-header-view>
+    </div>
+
+    <script>
+    Vue.component('draggable-header-view', {
+      template: '#header-view-template',
+      data: function () {
+        return {
+          dragging: false,
+          // quadratic bezier control point
+          c: { x: 160, y: 160 },
+          // record drag start point
+          start: { x: 0, y: 0 }
+        }
+      },
+      computed: {
+        headerPath: function () {
+          return 'M0,0 L320,0 320,160' +
+            'Q' + this.c.x + ',' + this.c.y +
+            ' 0,160'
+        },
+        contentPosition: function () {
+          var dy = this.c.y - 160
+          var dampen = dy > 0 ? 2 : 4
+          return {
+            transform: 'translate3d(0,' + dy / dampen + 'px,0)'
+          }
+        }
+      },
+      methods: {
+        startDrag: function (e) {
+          e = e.changedTouches ? e.changedTouches[0] : e
+          this.dragging = true
+          this.start.x = e.pageX
+          this.start.y = e.pageY
+        },
+        onDrag: function (e) {
+          e = e.changedTouches ? e.changedTouches[0] : e
+          if (this.dragging) {
+            this.c.x = 160 + (e.pageX - this.start.x)
+            // dampen vertical drag by a factor
+            var dy = e.pageY - this.start.y
+            var dampen = dy > 0 ? 1.5 : 4
+            this.c.y = 160 + dy / dampen
+          }
+        },
+        stopDrag: function () {
+          if (this.dragging) {
+            this.dragging = false
+            dynamics.animate(this.c, {
+              x: 160,
+              y: 160
+            }, {
+              type: dynamics.spring,
+              duration: 700,
+              friction: 280
+            })
+          }
+        }
+      }
+    })
+
+    new Vue({ el: '#app' })
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html.prettier-snap
new file mode 100644
index 000000000000..4b9e1c7da3f1
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html.prettier-snap
@@ -0,0 +1,122 @@
+<!-- https://github.com/vuejs/vue/blob/dev/examples/elastic-header/index.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <title>Vue.js elastic header example</title>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
+    <script src="http://dynamicsjs.com/lib/dynamics.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <!-- template for the component -->
+    <script type="text/x-template" id="header-view-template">
+      <div class="draggable-header-view"
+        @mousedown="startDrag" @touchstart="startDrag"
+        @mousemove="onDrag" @touchmove="onDrag"
+        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
+        <svg class="bg" width="320" height="560">
+          <path :d="headerPath" fill="#3F51B5"></path>
+        </svg>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" :style="contentPosition">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </script>
+  </head>
+  <body>
+    <div id="app" @touchmove.prevent>
+      <draggable-header-view>
+        <template slot="header">
+          <h1>Elastic Draggable SVG Header</h1>
+          <p>
+            with <a href="https://vuejs.org">Vue.js</a> +
+            <a href="http://dynamicsjs.com">dynamics.js</a>
+          </p>
+        </template>
+        <template slot="content">
+          <p>
+            Note this is just an effect demo - there are of course many
+            additional details if you want to use this in production, e.g.
+            handling responsive sizes, reload threshold and content scrolling.
+            Those are out of scope for this quick little hack. However, the idea
+            is that you can hide them as internal details of a Vue.js component
+            and expose a simple Web-Component-like interface.
+          </p>
+        </template>
+      </draggable-header-view>
+    </div>
+
+    <script>
+      Vue.component("draggable-header-view", {
+        template: "#header-view-template",
+        data: function () {
+          return {
+            dragging: false,
+            // quadratic bezier control point
+            c: { x: 160, y: 160 },
+            // record drag start point
+            start: { x: 0, y: 0 },
+          };
+        },
+        computed: {
+          headerPath: function () {
+            return (
+              "M0,0 L320,0 320,160" + "Q" + this.c.x + "," + this.c.y + " 0,160"
+            );
+          },
+          contentPosition: function () {
+            var dy = this.c.y - 160;
+            var dampen = dy > 0 ? 2 : 4;
+            return {
+              transform: "translate3d(0," + dy / dampen + "px,0)",
+            };
+          },
+        },
+        methods: {
+          startDrag: function (e) {
+            e = e.changedTouches ? e.changedTouches[0] : e;
+            this.dragging = true;
+            this.start.x = e.pageX;
+            this.start.y = e.pageY;
+          },
+          onDrag: function (e) {
+            e = e.changedTouches ? e.changedTouches[0] : e;
+            if (this.dragging) {
+              this.c.x = 160 + (e.pageX - this.start.x);
+              // dampen vertical drag by a factor
+              var dy = e.pageY - this.start.y;
+              var dampen = dy > 0 ? 1.5 : 4;
+              this.c.y = 160 + dy / dampen;
+            }
+          },
+          stopDrag: function () {
+            if (this.dragging) {
+              this.dragging = false;
+              dynamics.animate(
+                this.c,
+                {
+                  x: 160,
+                  y: 160,
+                },
+                {
+                  type: dynamics.spring,
+                  duration: 700,
+                  friction: 280,
+                },
+              );
+            }
+          },
+        },
+      });
+
+      new Vue({ el: "#app" });
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html.snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html.snap
new file mode 100644
index 000000000000..c277a46cb7e0
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/elastic-header.html.snap
@@ -0,0 +1,398 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: vue/html-vue/elastic-header.html
+---
+# Input
+
+```html
+<!-- https://github.com/vuejs/vue/blob/dev/examples/elastic-header/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>Vue.js elastic header example</title>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
+    <script src="http://dynamicsjs.com/lib/dynamics.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <!-- template for the component -->
+    <script type="text/x-template" id="header-view-template">
+      <div class="draggable-header-view"
+        @mousedown="startDrag" @touchstart="startDrag"
+        @mousemove="onDrag" @touchmove="onDrag"
+        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
+        <svg class="bg" width="320" height="560">
+          <path :d="headerPath" fill="#3F51B5"></path>
+        </svg>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" :style="contentPosition">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </script>
+  </head>
+  <body>
+
+    <div id="app" @touchmove.prevent>
+      <draggable-header-view>
+        <template slot="header">
+          <h1>Elastic Draggable SVG Header</h1>
+          <p>with <a href="https://vuejs.org">Vue.js</a> + <a href="http://dynamicsjs.com">dynamics.js</a></p>
+        </template>
+        <template slot="content">
+          <p>Note this is just an effect demo - there are of course many additional details if you want to use this in production, e.g. handling responsive sizes, reload threshold and content scrolling. Those are out of scope for this quick little hack. However, the idea is that you can hide them as internal details of a Vue.js component and expose a simple Web-Component-like interface.</p>
+        </template>
+      </draggable-header-view>
+    </div>
+
+    <script>
+    Vue.component('draggable-header-view', {
+      template: '#header-view-template',
+      data: function () {
+        return {
+          dragging: false,
+          // quadratic bezier control point
+          c: { x: 160, y: 160 },
+          // record drag start point
+          start: { x: 0, y: 0 }
+        }
+      },
+      computed: {
+        headerPath: function () {
+          return 'M0,0 L320,0 320,160' +
+            'Q' + this.c.x + ',' + this.c.y +
+            ' 0,160'
+        },
+        contentPosition: function () {
+          var dy = this.c.y - 160
+          var dampen = dy > 0 ? 2 : 4
+          return {
+            transform: 'translate3d(0,' + dy / dampen + 'px,0)'
+          }
+        }
+      },
+      methods: {
+        startDrag: function (e) {
+          e = e.changedTouches ? e.changedTouches[0] : e
+          this.dragging = true
+          this.start.x = e.pageX
+          this.start.y = e.pageY
+        },
+        onDrag: function (e) {
+          e = e.changedTouches ? e.changedTouches[0] : e
+          if (this.dragging) {
+            this.c.x = 160 + (e.pageX - this.start.x)
+            // dampen vertical drag by a factor
+            var dy = e.pageY - this.start.y
+            var dampen = dy > 0 ? 1.5 : 4
+            this.c.y = 160 + dy / dampen
+          }
+        },
+        stopDrag: function () {
+          if (this.dragging) {
+            this.dragging = false
+            dynamics.animate(this.c, {
+              x: 160,
+              y: 160
+            }, {
+              type: dynamics.spring,
+              duration: 700,
+              friction: 280
+            })
+          }
+        }
+      }
+    })
+
+    new Vue({ el: '#app' })
+    </script>
+  </body>
+</html>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,5 +1,5 @@
+ <!-- https://github.com/vuejs/vue/blob/dev/examples/elastic-header/index.html -->
+-<!doctype html>
++<!DOCTYPE html>
+ <html lang="en">
+   <head>
+     <meta charset="utf-8" />
+@@ -36,8 +36,10 @@
+         <template slot="header">
+           <h1>Elastic Draggable SVG Header</h1>
+           <p>
+-            with <a href="https://vuejs.org">Vue.js</a> +
+-            <a href="http://dynamicsjs.com">dynamics.js</a>
++            with <a href="https://vuejs.org">Vue.js</a>+ <a
++              href="http://dynamicsjs.com"
++              >dynamics.js</a
++            >
+           </p>
+         </template>
+         <template slot="content">
+@@ -54,69 +56,65 @@
+     </div>
+ 
+     <script>
+-      Vue.component("draggable-header-view", {
+-        template: "#header-view-template",
+-        data: function () {
++    Vue.component('draggable-header-view', {
++      template: '#header-view-template',
++      data: function () {
++        return {
++          dragging: false,
++          // quadratic bezier control point
++          c: { x: 160, y: 160 },
++          // record drag start point
++          start: { x: 0, y: 0 }
++        }
++      },
++      computed: {
++        headerPath: function () {
++          return 'M0,0 L320,0 320,160' +
++            'Q' + this.c.x + ',' + this.c.y +
++            ' 0,160'
++        },
++        contentPosition: function () {
++          var dy = this.c.y - 160
++          var dampen = dy > 0 ? 2 : 4
+           return {
+-            dragging: false,
+-            // quadratic bezier control point
+-            c: { x: 160, y: 160 },
+-            // record drag start point
+-            start: { x: 0, y: 0 },
+-          };
++            transform: 'translate3d(0,' + dy / dampen + 'px,0)'
++          }
++        }
++      },
++      methods: {
++        startDrag: function (e) {
++          e = e.changedTouches ? e.changedTouches[0] : e
++          this.dragging = true
++          this.start.x = e.pageX
++          this.start.y = e.pageY
+         },
+-        computed: {
+-          headerPath: function () {
+-            return (
+-              "M0,0 L320,0 320,160" + "Q" + this.c.x + "," + this.c.y + " 0,160"
+-            );
+-          },
+-          contentPosition: function () {
+-            var dy = this.c.y - 160;
+-            var dampen = dy > 0 ? 2 : 4;
+-            return {
+-              transform: "translate3d(0," + dy / dampen + "px,0)",
+-            };
+-          },
++        onDrag: function (e) {
++          e = e.changedTouches ? e.changedTouches[0] : e
++          if (this.dragging) {
++            this.c.x = 160 + (e.pageX - this.start.x)
++            // dampen vertical drag by a factor
++            var dy = e.pageY - this.start.y
++            var dampen = dy > 0 ? 1.5 : 4
++            this.c.y = 160 + dy / dampen
++          }
+         },
+-        methods: {
+-          startDrag: function (e) {
+-            e = e.changedTouches ? e.changedTouches[0] : e;
+-            this.dragging = true;
+-            this.start.x = e.pageX;
+-            this.start.y = e.pageY;
+-          },
+-          onDrag: function (e) {
+-            e = e.changedTouches ? e.changedTouches[0] : e;
+-            if (this.dragging) {
+-              this.c.x = 160 + (e.pageX - this.start.x);
+-              // dampen vertical drag by a factor
+-              var dy = e.pageY - this.start.y;
+-              var dampen = dy > 0 ? 1.5 : 4;
+-              this.c.y = 160 + dy / dampen;
+-            }
+-          },
+-          stopDrag: function () {
+-            if (this.dragging) {
+-              this.dragging = false;
+-              dynamics.animate(
+-                this.c,
+-                {
+-                  x: 160,
+-                  y: 160,
+-                },
+-                {
+-                  type: dynamics.spring,
+-                  duration: 700,
+-                  friction: 280,
+-                },
+-              );
+-            }
+-          },
+-        },
+-      });
++        stopDrag: function () {
++          if (this.dragging) {
++            this.dragging = false
++            dynamics.animate(this.c, {
++              x: 160,
++              y: 160
++            }, {
++              type: dynamics.spring,
++              duration: 700,
++              friction: 280
++            })
++          }
++        }
++      }
++    })
+ 
+-      new Vue({ el: "#app" });
++    new Vue({ el: '#app' })
+     </script>
+   </body>
+ </html>
+```
+
+# Output
+
+```html
+<!-- https://github.com/vuejs/vue/blob/dev/examples/elastic-header/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <title>Vue.js elastic header example</title>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
+    <script src="http://dynamicsjs.com/lib/dynamics.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <!-- template for the component -->
+    <script type="text/x-template" id="header-view-template">
+      <div class="draggable-header-view"
+        @mousedown="startDrag" @touchstart="startDrag"
+        @mousemove="onDrag" @touchmove="onDrag"
+        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
+        <svg class="bg" width="320" height="560">
+          <path :d="headerPath" fill="#3F51B5"></path>
+        </svg>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" :style="contentPosition">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </script>
+  </head>
+  <body>
+    <div id="app" @touchmove.prevent>
+      <draggable-header-view>
+        <template slot="header">
+          <h1>Elastic Draggable SVG Header</h1>
+          <p>
+            with <a href="https://vuejs.org">Vue.js</a>+ <a
+              href="http://dynamicsjs.com"
+              >dynamics.js</a
+            >
+          </p>
+        </template>
+        <template slot="content">
+          <p>
+            Note this is just an effect demo - there are of course many
+            additional details if you want to use this in production, e.g.
+            handling responsive sizes, reload threshold and content scrolling.
+            Those are out of scope for this quick little hack. However, the idea
+            is that you can hide them as internal details of a Vue.js component
+            and expose a simple Web-Component-like interface.
+          </p>
+        </template>
+      </draggable-header-view>
+    </div>
+
+    <script>
+    Vue.component('draggable-header-view', {
+      template: '#header-view-template',
+      data: function () {
+        return {
+          dragging: false,
+          // quadratic bezier control point
+          c: { x: 160, y: 160 },
+          // record drag start point
+          start: { x: 0, y: 0 }
+        }
+      },
+      computed: {
+        headerPath: function () {
+          return 'M0,0 L320,0 320,160' +
+            'Q' + this.c.x + ',' + this.c.y +
+            ' 0,160'
+        },
+        contentPosition: function () {
+          var dy = this.c.y - 160
+          var dampen = dy > 0 ? 2 : 4
+          return {
+            transform: 'translate3d(0,' + dy / dampen + 'px,0)'
+          }
+        }
+      },
+      methods: {
+        startDrag: function (e) {
+          e = e.changedTouches ? e.changedTouches[0] : e
+          this.dragging = true
+          this.start.x = e.pageX
+          this.start.y = e.pageY
+        },
+        onDrag: function (e) {
+          e = e.changedTouches ? e.changedTouches[0] : e
+          if (this.dragging) {
+            this.c.x = 160 + (e.pageX - this.start.x)
+            // dampen vertical drag by a factor
+            var dy = e.pageY - this.start.y
+            var dampen = dy > 0 ? 1.5 : 4
+            this.c.y = 160 + dy / dampen
+          }
+        },
+        stopDrag: function () {
+          if (this.dragging) {
+            this.dragging = false
+            dynamics.animate(this.c, {
+              x: 160,
+              y: 160
+            }, {
+              type: dynamics.spring,
+              duration: 700,
+              friction: 280
+            })
+          }
+        }
+      }
+    })
+
+    new Vue({ el: '#app' })
+    </script>
+  </body>
+</html>
+```
+
+# Lines exceeding max width of 80 characters
+```
+    1: <!-- https://github.com/vuejs/vue/blob/dev/examples/elastic-header/index.html -->
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html
new file mode 100644
index 000000000000..20b6fcb012ed
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html
@@ -0,0 +1,22 @@
+<!-- Hello World example from https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My first Vue app</title>
+  <script src="https://unpkg.com/vue"></script>
+</head>
+<body>
+  <div id="app">
+    {{ message }}
+  </div>
+
+  <script>
+    var app = new Vue({
+      el: '#app',
+      data: {
+        message: 'Hello Vue!'
+      }
+    })
+  </script>
+</body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html.prettier-snap
new file mode 100644
index 000000000000..02b9112223f7
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html.prettier-snap
@@ -0,0 +1,22 @@
+<!-- Hello World example from https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html -->
+<!doctype html>
+<html>
+  <head>
+    <title>My first Vue app</title>
+    <script src="https://unpkg.com/vue"></script>
+  </head>
+  <body>
+    <div id="app">
+      {{ message }}
+    </div>
+
+    <script>
+      var app = new Vue({
+        el: "#app",
+        data: {
+          message: "Hello Vue!",
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html.snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html.snap
new file mode 100644
index 000000000000..a4dfb188c87c
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/hello-world.html.snap
@@ -0,0 +1,122 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: vue/html-vue/hello-world.html
+---
+# Input
+
+```html
+<!-- Hello World example from https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My first Vue app</title>
+  <script src="https://unpkg.com/vue"></script>
+</head>
+<body>
+  <div id="app">
+    {{ message }}
+  </div>
+
+  <script>
+    var app = new Vue({
+      el: '#app',
+      data: {
+        message: 'Hello Vue!'
+      }
+    })
+  </script>
+</body>
+</html>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,5 +1,5 @@
+ <!-- Hello World example from https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html -->
+-<!doctype html>
++<!DOCTYPE html>
+ <html>
+   <head>
+     <title>My first Vue app</title>
+@@ -7,16 +7,16 @@
+   </head>
+   <body>
+     <div id="app">
+-      {{ message }}
+-    </div>
++    {{ message }}
++  </div>
+ 
+     <script>
+-      var app = new Vue({
+-        el: "#app",
+-        data: {
+-          message: "Hello Vue!",
+-        },
+-      });
+-    </script>
++    var app = new Vue({
++      el: '#app',
++      data: {
++        message: 'Hello Vue!'
++      }
++    })
++  </script>
+   </body>
+ </html>
+```
+
+# Output
+
+```html
+<!-- Hello World example from https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My first Vue app</title>
+    <script src="https://unpkg.com/vue"></script>
+  </head>
+  <body>
+    <div id="app">
+    {{ message }}
+  </div>
+
+    <script>
+    var app = new Vue({
+      el: '#app',
+      data: {
+        message: 'Hello Vue!'
+      }
+    })
+  </script>
+  </body>
+</html>
+```
+
+# Errors
+```
+hello-world.html:10:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Text expressions aren't supported.
+  
+     8 │ <body>
+     9 │   <div id="app">
+  > 10 │     {{ message }}
+       │     ^^^^^^^^^^^^^
+    11 │   </div>
+    12 │ 
+  
+  i Remove it or enable the parsing using the html.parser.interpolation option.
+  
+
+```
+
+# Lines exceeding max width of 80 characters
+```
+    1: <!-- Hello World example from https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html -->
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html
new file mode 100644
index 000000000000..cdcede41d65e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html
@@ -0,0 +1,12 @@
+<!-- issue #8162 -->
+
+<!DOCTYPE html><HTML>
+    <body>
+      <div v-if="foo ===    'foo'">
+  
+  </div>
+      <script>
+  new Vue({el: '#app'})
+      </script>
+    </body>
+  </HTML>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html.prettier-snap
new file mode 100644
index 000000000000..f95271ce4e54
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html.prettier-snap
@@ -0,0 +1,11 @@
+<!-- issue #8162 -->
+
+<!doctype html>
+<html>
+  <body>
+    <div v-if="foo === 'foo'"></div>
+    <script>
+      new Vue({ el: "#app" });
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html.snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html.snap
new file mode 100644
index 000000000000..0a83546ce9cc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-2.html.snap
@@ -0,0 +1,79 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: vue/html-vue/upper-case-2.html
+---
+# Input
+
+```html
+<!-- issue #8162 -->
+
+<!DOCTYPE html><HTML>
+    <body>
+      <div v-if="foo ===    'foo'">
+  
+  </div>
+      <script>
+  new Vue({el: '#app'})
+      </script>
+    </body>
+  </HTML>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,11 +1,11 @@
+ <!-- issue #8162 -->
+ 
+-<!doctype html>
++<!DOCTYPE html>
+ <html>
+   <body>
+-    <div v-if="foo === 'foo'"></div>
++    <div v-if="foo ===    'foo'"></div>
+     <script>
+-      new Vue({ el: "#app" });
+-    </script>
++  new Vue({el: '#app'})
++      </script>
+   </body>
+ </html>
+```
+
+# Output
+
+```html
+<!-- issue #8162 -->
+
+<!DOCTYPE html>
+<html>
+  <body>
+    <div v-if="foo ===    'foo'"></div>
+    <script>
+  new Vue({el: '#app'})
+      </script>
+  </body>
+</html>
+```
+
+# Errors
+```
+upper-case-2.html:5:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Vue syntax isn't enabled. Is this supposed to be a .vue file?
+  
+    3 │ <!DOCTYPE html><HTML>
+    4 │     <body>
+  > 5 │       <div v-if="foo ===    'foo'">
+      │            ^^^^^^^^^^^^^^^^^^^^^^^
+    6 │   
+    7 │   </div>
+  
+  i Remove it or enable the parsing using the html.parser.vue option.
+  
+
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html
new file mode 100644
index 000000000000..ea7494904ea6
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html><HTML>
+  <body>
+    <div v-if="foo ===    'foo'">
+
+</div>
+    <script>
+new Vue({el: '#app'})
+    </script>
+  </body>
+</HTML>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html.prettier-snap
new file mode 100644
index 000000000000..6f9ee65a7d14
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html.prettier-snap
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <body>
+    <div v-if="foo === 'foo'"></div>
+    <script>
+      new Vue({ el: "#app" });
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html.snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html.snap
new file mode 100644
index 000000000000..59ec96194f99
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-2.html.snap
@@ -0,0 +1,72 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: vue/html-vue/upper-case-html-tag-2.html
+---
+# Input
+
+```html
+<!DOCTYPE html><HTML>
+  <body>
+    <div v-if="foo ===    'foo'">
+
+</div>
+    <script>
+new Vue({el: '#app'})
+    </script>
+  </body>
+</HTML>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,9 +1,9 @@
+-<!doctype html>
++<!DOCTYPE html>
+ <html>
+   <body>
+-    <div v-if="foo === 'foo'"></div>
++    <div v-if="foo ===    'foo'"></div>
+     <script>
+-      new Vue({ el: "#app" });
++new Vue({el: '#app'})
+     </script>
+   </body>
+ </html>
+```
+
+# Output
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <div v-if="foo ===    'foo'"></div>
+    <script>
+new Vue({el: '#app'})
+    </script>
+  </body>
+</html>
+```
+
+# Errors
+```
+upper-case-html-tag-2.html:3:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Vue syntax isn't enabled. Is this supposed to be a .vue file?
+  
+    1 │ <!DOCTYPE html><HTML>
+    2 │   <body>
+  > 3 │     <div v-if="foo ===    'foo'">
+      │          ^^^^^^^^^^^^^^^^^^^^^^^
+    4 │ 
+    5 │ </div>
+  
+  i Remove it or enable the parsing using the html.parser.vue option.
+  
+
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-3.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-3.html
new file mode 100644
index 000000000000..967280a252a2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-3.html
@@ -0,0 +1 @@
+<HTML><head></head><body></body></HTML>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-3.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-3.html.prettier-snap
new file mode 100644
index 000000000000..1895d203450a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-3.html.prettier-snap
@@ -0,0 +1,4 @@
+<html>
+  <head></head>
+  <body></body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html
new file mode 100644
index 000000000000..1af39e9e0c96
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html
@@ -0,0 +1,10 @@
+<hTml>
+    <body>
+      <div v-if="foo ===    'foo'">
+
+  </div>
+      <script>
+  new Vue({el: '#app'})
+      </script>
+    </body>
+  </hTml>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html.prettier-snap
new file mode 100644
index 000000000000..e42e5ff9fe9f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html.prettier-snap
@@ -0,0 +1,8 @@
+<html>
+  <body>
+    <div v-if="foo === 'foo'"></div>
+    <script>
+      new Vue({ el: "#app" });
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html.snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html.snap
new file mode 100644
index 000000000000..0001e555a839
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag-4.html.snap
@@ -0,0 +1,70 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: vue/html-vue/upper-case-html-tag-4.html
+---
+# Input
+
+```html
+<hTml>
+    <body>
+      <div v-if="foo ===    'foo'">
+
+  </div>
+      <script>
+  new Vue({el: '#app'})
+      </script>
+    </body>
+  </hTml>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -1,8 +1,8 @@
+ <html>
+   <body>
+-    <div v-if="foo === 'foo'"></div>
++    <div v-if="foo ===    'foo'"></div>
+     <script>
+-      new Vue({ el: "#app" });
+-    </script>
++  new Vue({el: '#app'})
++      </script>
+   </body>
+ </html>
+```
+
+# Output
+
+```html
+<html>
+  <body>
+    <div v-if="foo ===    'foo'"></div>
+    <script>
+  new Vue({el: '#app'})
+      </script>
+  </body>
+</html>
+```
+
+# Errors
+```
+upper-case-html-tag-4.html:3:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Vue syntax isn't enabled. Is this supposed to be a .vue file?
+  
+    1 │ <hTml>
+    2 │     <body>
+  > 3 │       <div v-if="foo ===    'foo'">
+      │            ^^^^^^^^^^^^^^^^^^^^^^^
+    4 │ 
+    5 │   </div>
+  
+  i Remove it or enable the parsing using the html.parser.vue option.
+  
+
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag.html
new file mode 100644
index 000000000000..c84ec7c18d26
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag.html
@@ -0,0 +1 @@
+<!doctype html><HTML></HTML>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag.html.prettier-snap
new file mode 100644
index 000000000000..4b3b4339d8bd
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/upper-case-html-tag.html.prettier-snap
@@ -0,0 +1,2 @@
+<!doctype html>
+<html></html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/void-element.html b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/void-element.html
new file mode 100644
index 000000000000..4740ec98c495
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/void-element.html
@@ -0,0 +1 @@
+<img>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/void-element.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/void-element.html.prettier-snap
new file mode 100644
index 000000000000..de53ca855376
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/html-vue/void-element.html.prettier-snap
@@ -0,0 +1 @@
+<img />
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/indent/inside-template.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/inside-template.vue
new file mode 100644
index 000000000000..3966a06e9d41
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/inside-template.vue
@@ -0,0 +1,22 @@
+<template>
+    <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+    </style>
+
+    <script>
+        console.log('hello');
+    console.log('hello');
+    </script>
+
+    <br />
+    <footer>
+        foo
+        <br/>
+    </footer>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/indent/inside-template.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/inside-template.vue.prettier-snap
new file mode 100644
index 000000000000..17189d306343
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/inside-template.vue.prettier-snap
@@ -0,0 +1,22 @@
+<template>
+  <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+  </style>
+
+  <script>
+        console.log('hello');
+    console.log('hello');
+  </script>
+
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/indent/vue-tag-indent.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/vue-tag-indent.vue
new file mode 100644
index 000000000000..62a729e9e100
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/vue-tag-indent.vue
@@ -0,0 +1,22 @@
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/indent/vue-tag-indent.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/vue-tag-indent.vue.prettier-snap
new file mode 100644
index 000000000000..0e3c8f633d93
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/indent/vue-tag-indent.vue.prettier-snap
@@ -0,0 +1,22 @@
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/bitwise-or-operator.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/bitwise-or-operator.vue
new file mode 100644
index 000000000000..ddfac4f11987
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/bitwise-or-operator.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    {{
+      fn(
+        bitwise | or | operator | a_long_long_long_long_long_long_long_long_long_long_variable
+      )
+      | filter1
+      | filter2
+      | filter3
+      | filter4
+    }}
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/bitwise-or-operator.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/bitwise-or-operator.vue.prettier-snap
new file mode 100644
index 000000000000..5e2611b43a5a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/bitwise-or-operator.vue.prettier-snap
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    {{
+      fn(
+        bitwise |
+          or |
+          operator |
+          a_long_long_long_long_long_long_long_long_long_long_variable,
+      )
+        | filter1
+        | filter2
+        | filter3
+        | filter4
+    }}
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/parenthesized.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/parenthesized.vue
new file mode 100644
index 000000000000..3a519bd70932
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/parenthesized.vue
@@ -0,0 +1,3 @@
+<template>
+<span>{{(a||          b)}} {{z&&(a&&b)}}</span>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/parenthesized.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/parenthesized.vue.prettier-snap
new file mode 100644
index 000000000000..73cfe41f5926
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/parenthesized.vue.prettier-snap
@@ -0,0 +1,3 @@
+<template>
+  <span>{{ a || b }} {{ z && a && b }}</span>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/template.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/template.vue
new file mode 100644
index 000000000000..26f7b0381407
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/template.vue
@@ -0,0 +1,10 @@
+<template>
+  <root>
+<div class="red">
+    We are going to add this simple card here
+  </div>
+  <div class="red">
+    What is going on {{ prop1 }} and {{ prop2 }}
+  </div>
+  </root>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/template.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/template.vue.prettier-snap
new file mode 100644
index 000000000000..7564fe672224
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/interpolation/template.vue.prettier-snap
@@ -0,0 +1,6 @@
+<template>
+  <root>
+    <div class="red">We are going to add this simple card here</div>
+    <div class="red">What is going on {{ prop1 }} and {{ prop2 }}</div>
+  </root>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/invalid/v-for.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/invalid/v-for.vue
new file mode 100644
index 000000000000..2678f1cab151
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/invalid/v-for.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div
+      v-for="    _       in          "
+      v-for="            in _        "
+      v-for="            in          "
+      v-for="    _,      in a        "
+      v-for="    ,_      in a        "
+
+      v-for="    a, b,      in a        "
+      v-for="    a,  , c     in a        "
+
+      v-for="     , b, c     in a        "
+      v-for="    a, b,       in a        "
+
+      v-for="     , b, c     in a        "
+      v-for="    a,  , c     in a        "
+      v-for="    (,a,b) of 'abcd'        "
+    ></div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/invalid/v-for.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/invalid/v-for.vue.prettier-snap
new file mode 100644
index 000000000000..23e71955a005
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/invalid/v-for.vue.prettier-snap
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div
+      v-for="    _       in          "
+      v-for="            in _        "
+      v-for="            in          "
+      v-for="_ in a"
+      v-for="    ,_      in a        "
+      v-for="(a, b) in a"
+      v-for="    a,  , c     in a        "
+      v-for="     , b, c     in a        "
+      v-for="(a, b) in a"
+      v-for="     , b, c     in a        "
+      v-for="    a,  , c     in a        "
+      v-for="    (,a,b) of 'abcd'        "
+    ></div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-empty.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-empty.vue
new file mode 100644
index 000000000000..808269a44755
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-empty.vue
@@ -0,0 +1,5 @@
+<script lang="">
+should.
+be.   well.formatted(
+
+);</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-empty.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-empty.vue.prettier-snap
new file mode 100644
index 000000000000..95ab75f6f932
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-empty.vue.prettier-snap
@@ -0,0 +1,3 @@
+<script lang="">
+should.be.well.formatted();
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-js.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-js.vue
new file mode 100644
index 000000000000..4cb7c5e7c928
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-js.vue
@@ -0,0 +1,5 @@
+<script lang="js">
+should.
+be.   well.formatted(
+
+);</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-js.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-js.vue.prettier-snap
new file mode 100644
index 000000000000..8daf219fb172
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-js.vue.prettier-snap
@@ -0,0 +1,3 @@
+<script lang="js">
+should.be.well.formatted();
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-jsx.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-jsx.vue
new file mode 100644
index 000000000000..58235d190372
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-jsx.vue
@@ -0,0 +1,13 @@
+<script lang="jsx">
+export default {
+  data: () => ({
+    message: 'hello with jsx'
+  }),
+  render(h) {
+
+
+
+    return <div>{this.message}</div>
+  }
+}
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-jsx.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-jsx.vue.prettier-snap
new file mode 100644
index 000000000000..226c405ebb19
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-jsx.vue.prettier-snap
@@ -0,0 +1,10 @@
+<script lang="jsx">
+export default {
+  data: () => ({
+    message: "hello with jsx",
+  }),
+  render(h) {
+    return <div>{this.message}</div>;
+  },
+};
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-none.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-none.vue
new file mode 100644
index 000000000000..68e3f73d1678
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-none.vue
@@ -0,0 +1,5 @@
+<script>
+should.
+be.   well.formatted(
+
+);</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-none.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-none.vue.prettier-snap
new file mode 100644
index 000000000000..a84d88e4a3b2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-none.vue.prettier-snap
@@ -0,0 +1,3 @@
+<script>
+should.be.well.formatted();
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts-multiple-script-tags.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts-multiple-script-tags.vue
new file mode 100644
index 000000000000..d60027bb2f07
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts-multiple-script-tags.vue
@@ -0,0 +1,21 @@
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x:      string |         number = 1
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+  v-if=" (x    as string).length  >     0"
+  v-for="a in [1,2,  3,4,5].map(   (x  :    number) => x *   x)"
+  :foo="  (x    as number).toFixed(   2) "
+  >
+  {{ (x      as      number).toFixed(2) }}
+  </span>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts-multiple-script-tags.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts-multiple-script-tags.vue.prettier-snap
new file mode 100644
index 000000000000..77996744196f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts-multiple-script-tags.vue.prettier-snap
@@ -0,0 +1,21 @@
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x: string | number = 1;
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+    v-if="(x as string).length > 0"
+    v-for="a in [1, 2, 3, 4, 5].map((x: number) => x * x)"
+    :foo="(x as number).toFixed(2)"
+  >
+    {{ (x as number).toFixed(2) }}
+  </span>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts.vue
new file mode 100644
index 000000000000..091b4fa2692c
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>{{foo}}</div>
+</template>
+
+<script lang="ts">
+export default {
+  computed: {  foo( ): string {  return "foo";  },  },
+}
+</script>
+
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts.vue.prettier-snap
new file mode 100644
index 000000000000..65d84b570fac
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-ts.vue.prettier-snap
@@ -0,0 +1,13 @@
+<template>
+  <div>{{ foo }}</div>
+</template>
+
+<script lang="ts">
+export default {
+  computed: {
+    foo(): string {
+      return "foo";
+    },
+  },
+};
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-tsx.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-tsx.vue
new file mode 100644
index 000000000000..8c34bc8767fa
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-tsx.vue
@@ -0,0 +1,7 @@
+<script lang="tsx">
+import {VNode} from "vue"
+export default {
+  computed: {  foo( ):string { return "foo" }, },
+  render(h):VNode {  return <div>{ this.foo }</div> },
+}
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-tsx.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-tsx.vue.prettier-snap
new file mode 100644
index 000000000000..4e36d8ff89d8
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/lang-tsx.vue.prettier-snap
@@ -0,0 +1,13 @@
+<script lang="tsx">
+import { VNode } from "vue";
+export default {
+  computed: {
+    foo(): string {
+      return "foo";
+    },
+  },
+  render(h): VNode {
+    return <div>{this.foo}</div>;
+  },
+};
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-bind.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-bind.vue
new file mode 100644
index 000000000000..4a60b83d7bea
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-bind.vue
@@ -0,0 +1,15 @@
+<template>
+    <div v-bind:id=" 'list-'   +  id "></div>
+    <div v-bind:id=" &quot;list-&quot;   +  id "></div>
+    <div v-bind:id=" &apos;list-&apos;   +  id "></div>
+    <div v-bind:id=" &apos;&quot;&apos;   +  id "></div>
+    <div v-bind:id="  rawId | formatId "></div>
+    <div v-bind:id=" ok ? 'YES' : 'NO' "></div>
+
+
+    <button :disabled="   a &&b "></button>
+    <button .disabled="   a &&b "></button>
+
+    <button @click=" foo ( arg, 'string' ) "></button>
+</template>
+
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-bind.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-bind.vue.prettier-snap
new file mode 100644
index 000000000000..4802ed36b337
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-bind.vue.prettier-snap
@@ -0,0 +1,13 @@
+<template>
+  <div v-bind:id="'list-' + id"></div>
+  <div v-bind:id="'list-' + id"></div>
+  <div v-bind:id="'list-' + id"></div>
+  <div v-bind:id="'&quot;' + id"></div>
+  <div v-bind:id="rawId | formatId"></div>
+  <div v-bind:id="ok ? 'YES' : 'NO'"></div>
+
+  <button :disabled="a && b"></button>
+  <button .disabled="a && b"></button>
+
+  <button @click="foo(arg, 'string')"></button>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-class.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-class.vue
new file mode 100644
index 000000000000..4339a674bd85
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-class.vue
@@ -0,0 +1,9 @@
+<template>
+  <h2
+    class="title"
+    :class="{ 'issue-realtime-pre-pulse': preAnimation,
+ 'issue-realtime-trigger-pulse': pulseAnimation}"
+    v-html="titleHtml"
+  >
+  </h2>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-class.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-class.vue.prettier-snap
new file mode 100644
index 000000000000..b75166e50f25
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/template-class.vue.prettier-snap
@@ -0,0 +1,10 @@
+<template>
+  <h2
+    class="title"
+    :class="{
+      'issue-realtime-pre-pulse': preAnimation,
+      'issue-realtime-trigger-pulse': pulseAnimation,
+    }"
+    v-html="titleHtml"
+  ></h2>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/unknown/unknown.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/unknown/unknown.vue
new file mode 100644
index 000000000000..86dca0de51c0
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/unknown/unknown.vue
@@ -0,0 +1,30 @@
+<style lang="unknown">
+.prettier {
+content:
+"awesome"
+          }
+</style>
+
+<script lang="unknown">
+prettier.is
+                  .awesome(
+)
+</script>
+
+<script type="unknown">
+prettier.is
+                  .awesome(
+)
+</script>
+
+<script type="unknown" lang="unknown">
+prettier.is
+                  .awesome(
+)
+</script>
+
+<template lang="unknown">
+    <prettier>
+      awesome
+</prettier>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/unknown/unknown.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/unknown/unknown.vue.prettier-snap
new file mode 100644
index 000000000000..86dca0de51c0
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/unknown/unknown.vue.prettier-snap
@@ -0,0 +1,30 @@
+<style lang="unknown">
+.prettier {
+content:
+"awesome"
+          }
+</style>
+
+<script lang="unknown">
+prettier.is
+                  .awesome(
+)
+</script>
+
+<script type="unknown">
+prettier.is
+                  .awesome(
+)
+</script>
+
+<script type="unknown" lang="unknown">
+prettier.is
+                  .awesome(
+)
+</script>
+
+<template lang="unknown">
+    <prettier>
+      awesome
+</prettier>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/void-element.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/void-element.vue
new file mode 100644
index 000000000000..5bd25ee7d7be
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/void-element.vue
@@ -0,0 +1 @@
+<custom lang="markdown" />
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/void-element.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/void-element.vue.prettier-snap
new file mode 100644
index 000000000000..5bd25ee7d7be
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/void-element.vue.prettier-snap
@@ -0,0 +1 @@
+<custom lang="markdown" />
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/vue-component.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/vue-component.vue
new file mode 100644
index 000000000000..a404d5bef7f5
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/vue-component.vue
@@ -0,0 +1,22 @@
+<template >
+  <h1 >{{greeting}}     world</h1 >
+  <script>kikoo ( ) </script>
+</template >
+
+<script>
+module  .  exports  =
+{data : function () {return {
+	greeting: "Hello"
+}}
+}
+</script>
+
+<style   scoped >
+p { font-size : 2em ; text-align : center ; }
+
+  </style >
+
+<style   lang="postcss" >
+p { font-size : 2em ; text-align : center ; }
+
+  </style >
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/vue-component.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/vue-component.vue.prettier-snap
new file mode 100644
index 000000000000..1261cb83ee13
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/multiparser/vue-component.vue.prettier-snap
@@ -0,0 +1,30 @@
+<template>
+  <h1>{{ greeting }} world</h1>
+  <script>
+    kikoo();
+  </script>
+</template>
+
+<script>
+module.exports = {
+  data: function () {
+    return {
+      greeting: "Hello",
+    };
+  },
+};
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>
+
+<style lang="postcss">
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/range/example.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/range/example.vue
new file mode 100644
index 000000000000..10671579c98c
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/range/example.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>Templates are formatted as well...
+    </p>
+</template>
+
+<<<PRETTIER_RANGE_START>>><script>
+let Prettier        = format => { your.js('though') }
+</script><<<PRETTIER_RANGE_END>>>
+
+<style>
+.and { css: too !important }
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/range/example.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/range/example.vue.prettier-snap
new file mode 100644
index 000000000000..ab57562b00bf
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/range/example.vue.prettier-snap
@@ -0,0 +1,15 @@
+<template>
+  <p>Templates are formatted as well...</p>
+</template>
+
+<script>
+let Prettier = (format) => {
+  your.js("though");
+};
+</script>
+
+<style>
+.and {
+  css: too !important;
+}
+</style>
\ No newline at end of file
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/sfc-blocks.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/sfc-blocks.vue
new file mode 100644
index 000000000000..9118346d54e3
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/sfc-blocks.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+console.log("hello")
+</script>
+
+<style scoped lang="scss">
+p {
+  color: red;
+}
+</style>
+
+<unknown-block foo bar="bar" baz long_long_long_long_attribute></unknown-block>
+
+<script lang="ts" src="./long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./long_long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./short">
+</script>
+
+<template lang="pug" src="./long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./long_long_long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./short">
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/sfc-blocks.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/sfc-blocks.vue.prettier-snap
new file mode 100644
index 000000000000..6320f6988062
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/sfc-blocks.vue.prettier-snap
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+console.log("hello");
+</script>
+
+<style scoped lang="scss">
+p {
+  color: red;
+}
+</style>
+
+<unknown-block foo bar="bar" baz long_long_long_long_attribute></unknown-block>
+
+<script lang="ts" src="./long_long_long_long_long_long_file_path.ts"></script>
+
+<script
+  lang="ts"
+  src="./long_long_long_long_long_long_long_file_path.ts"
+></script>
+
+<script lang="ts" src="./short"></script>
+
+<template lang="pug" src="./long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template
+  lang="pug"
+  src="./long_long_long_long_long_long_long_long_file_path.pug"
+>
+</template>
+
+<template lang="pug" src="./short">
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/single-attribute-per-line.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/single-attribute-per-line.vue
new file mode 100644
index 000000000000..50d5b49ad47e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/single-attribute-per-line.vue
@@ -0,0 +1,23 @@
+<template>
+  <div data-a="1">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+
+  <div data-a="1" data-b="2" data-c="3">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+
+  <div data-a="Lorem ipsum dolor sit amet" data-b="Lorem ipsum dolor sit amet" data-c="Lorem ipsum dolor sit amet">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+
+  <div data-long-attribute-a="1" data-long-attribute-b="2" data-long-attribute-c="3">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+
+  <img src="/images/foo.png" />
+
+  <img src="/images/foo.png" alt="bar" />
+
+  <img src="/images/foo.png" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/single-attribute-per-line.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/single-attribute-per-line.vue.prettier-snap
new file mode 100644
index 000000000000..2df426e9a210
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/single-attribute-per-line/single-attribute-per-line.vue.prettier-snap
@@ -0,0 +1,32 @@
+<template>
+  <div data-a="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+
+  <div data-a="1" data-b="2" data-c="3">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+
+  <div
+    data-a="Lorem ipsum dolor sit amet"
+    data-b="Lorem ipsum dolor sit amet"
+    data-c="Lorem ipsum dolor sit amet"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+
+  <div
+    data-long-attribute-a="1"
+    data-long-attribute-b="2"
+    data-long-attribute-c="3"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </div>
+
+  <img src="/images/foo.png" />
+
+  <img src="/images/foo.png" alt="bar" />
+
+  <img
+    src="/images/foo.png"
+    alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/style/mj-style.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/style/mj-style.vue
new file mode 100644
index 000000000000..c0e88705ef66
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/style/mj-style.vue
@@ -0,0 +1,9 @@
+<template>
+<mjml>
+
+<mj-style> .should-not-format{
+  as: 'css'
+}</mj-style>
+
+</mjml>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/style/mj-style.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/style/mj-style.vue.prettier-snap
new file mode 100644
index 000000000000..41f40f758f21
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/style/mj-style.vue.prettier-snap
@@ -0,0 +1,5 @@
+<template>
+  <mjml>
+    <mj-style> .should-not-format{ as: 'css' }</mj-style>
+  </mjml>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/attribute-expr.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/attribute-expr.vue
new file mode 100644
index 000000000000..25747b3ac4cc
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/attribute-expr.vue
@@ -0,0 +1,7 @@
+<script lang="ts"></script>
+
+<template>
+  <comp :foo="   (a:string)=>1"/>
+  <comp :foo=" <X extends Something & AnothoerOne, Y    extends unknown[]>(x:X,y:Y)=>y.length + x.foobar.abcdefg"/>
+  <comp :foo="(myFunction<T   |U>(qwerty,qwerty.qwerty?.qwerty)as any) + x.filter(abcdefg as never).join(xxx)"/>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/attribute-expr.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/attribute-expr.vue.prettier-snap
new file mode 100644
index 000000000000..e5c945085abd
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/attribute-expr.vue.prettier-snap
@@ -0,0 +1,17 @@
+<script lang="ts"></script>
+
+<template>
+  <comp :foo="(a: string) => 1" />
+  <comp
+    :foo="
+      <X extends Something & AnothoerOne, Y extends unknown[]>(x: X, y: Y) =>
+        y.length + x.foobar.abcdefg
+    "
+  />
+  <comp
+    :foo="
+      (myFunction<T | U>(qwerty, qwerty.qwerty?.qwerty) as any) +
+      x.filter(abcdefg as never).join(xxx)
+    "
+  />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/basic.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/basic.vue
new file mode 100644
index 000000000000..8fa91cce59b3
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/basic.vue
@@ -0,0 +1,6 @@
+<template>
+  <p v-if="isFolder(file)">{{ (   file as   mymodule.Folder    ).deadline }}</p>
+  <prettier :format=" myFunc(  o as unknown )" />
+</template>
+
+<script lang="ts"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/basic.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/basic.vue.prettier-snap
new file mode 100644
index 000000000000..e029db71e25e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/basic.vue.prettier-snap
@@ -0,0 +1,6 @@
+<template>
+  <p v-if="isFolder(file)">{{ (file as mymodule.Folder).deadline }}</p>
+  <prettier :format="myFunc(o as unknown)" />
+</template>
+
+<script lang="ts"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/comment.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/comment.vue
new file mode 100644
index 000000000000..6dd32e52a05b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/comment.vue
@@ -0,0 +1,11 @@
+<template>
+  <div v-if="
+            // leading comment
+    isFolder(   /* NOTE: I like pizza */file)
+    // trailing comment
+    "
+  :format="   /* leading comment */ myFunc( /* NOTE: I like banana */ o as unknown ) /* trailing comment */"
+  >{{ /* leading comment */ (   file as /* NOTE: I like sushi */   mymodule.Folder   ).deadline /* trailing comment */    }}</div>
+</template>
+
+<script lang="ts"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/comment.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/comment.vue.prettier-snap
new file mode 100644
index 000000000000..42105cfbb460
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/comment.vue.prettier-snap
@@ -0,0 +1,21 @@
+<template>
+  <div
+    v-if="
+      // leading comment
+      isFolder(/* NOTE: I like pizza */ file)
+      // trailing comment
+    "
+    :format="
+      /* leading comment */ myFunc(
+        /* NOTE: I like banana */ o as unknown,
+      ) /* trailing comment */
+    "
+  >
+    {{
+      /* leading comment */ (file as /* NOTE: I like sushi */ mymodule.Folder)
+        .deadline /* trailing comment */
+    }}
+  </div>
+</template>
+
+<script lang="ts"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/filter.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/filter.vue
new file mode 100644
index 000000000000..db99030e171a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/filter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts"></script>
+
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div>
+    <div class="allowed">{{
+      value | thisIsARealSuperLongFilterPipe("arg1", arg2 as unknown) | anotherPipeLongJustForFun | pipeTheThird
+    }}</div>
+    <div class="allowed" v-bind:something='
+      value | thisIsARealSuperLongFilterPipe("arg1", arg2 as unknown) | anotherPipeLongJustForFun | pipeTheThird
+    '></div>
+    <div class="allowed" :class='
+      value | thisIsARealSuperLongFilterPipe("arg1", arg2 as unknown) | anotherPipeLongJustForFun | pipeTheThird'
+    ></div>
+    <div class="not-allowed" v-if='
+      value | thisIsARealSuperLongBitwiseOr("arg1", arg2 as unknown) | anotherBitwiseOrLongJustForFun | bitwiseOrTheThird
+    '></div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/filter.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/filter.vue.prettier-snap
new file mode 100644
index 000000000000..6c394b7bfb7e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/filter.vue.prettier-snap
@@ -0,0 +1,42 @@
+<script setup lang="ts"></script>
+
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div>
+    <div class="allowed">
+      {{
+        value
+          | thisIsARealSuperLongFilterPipe("arg1", arg2 as unknown)
+          | anotherPipeLongJustForFun
+          | pipeTheThird
+      }}
+    </div>
+    <div
+      class="allowed"
+      v-bind:something="
+        value
+          | thisIsARealSuperLongFilterPipe('arg1', arg2 as unknown)
+          | anotherPipeLongJustForFun
+          | pipeTheThird
+      "
+    ></div>
+    <div
+      class="allowed"
+      :class="
+        value
+          | thisIsARealSuperLongFilterPipe('arg1', arg2 as unknown)
+          | anotherPipeLongJustForFun
+          | pipeTheThird
+      "
+    ></div>
+    <div
+      class="not-allowed"
+      v-if="
+        value |
+          thisIsARealSuperLongBitwiseOr('arg1', arg2 as unknown) |
+          anotherBitwiseOrLongJustForFun |
+          bitwiseOrTheThird
+      "
+    ></div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/not-working-with-non-ts-script.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/not-working-with-non-ts-script.vue
new file mode 100644
index 000000000000..6b9163183f04
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/not-working-with-non-ts-script.vue
@@ -0,0 +1,6 @@
+<template>
+  <p v-if="isFolder(file)">{{ (   file as   mymodule.Folder    ).deadline }}</p>
+  <prettier :format=" myFunc(  o as unknown )" />
+</template>
+
+<script></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/not-working-with-non-ts-script.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/not-working-with-non-ts-script.vue.prettier-snap
new file mode 100644
index 000000000000..6b9163183f04
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/ts-expression/not-working-with-non-ts-script.vue.prettier-snap
@@ -0,0 +1,6 @@
+<template>
+  <p v-if="isFolder(file)">{{ (   file as   mymodule.Folder    ).deadline }}</p>
+  <prettier :format=" myFunc(  o as unknown )" />
+</template>
+
+<script></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/invalid.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/invalid.vue
new file mode 100644
index 000000000000..ff40322d958a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/invalid.vue
@@ -0,0 +1,5 @@
+<template>
+<div
+  v-for="  item instanceof  items "
+></div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/invalid.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/invalid.vue.prettier-snap
new file mode 100644
index 000000000000..75647cfcd38d
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/invalid.vue.prettier-snap
@@ -0,0 +1,3 @@
+<template>
+  <div v-for="  item instanceof  items "></div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/ts.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/ts.vue
new file mode 100644
index 000000000000..f2d695c6a73f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/ts.vue
@@ -0,0 +1,10 @@
+<script lang="ts"></script>
+<template>
+<div
+v-for="a:number       of x as number[]"
+v-for="[ a  , b]   : [   string,string ]     of x as Array<     [string, string]>"
+v-for="  a  of list.map( (x:any): unknown     => x.foo.bar)"
+v-for="([longLongProp, longLongProp, [longLongProp, longLongProp='Hello, Prettier!', [longLongProp, longLongProp, anotherLongLongProp=[longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+>
+</div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/ts.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/ts.vue.prettier-snap
new file mode 100644
index 000000000000..74f8fb062a85
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/v-for/ts.vue.prettier-snap
@@ -0,0 +1,32 @@
+<script lang="ts"></script>
+<template>
+  <div
+    v-for="a: number of x as number[]"
+    v-for="[a, b]: [string, string] of x as Array<[string, string]>"
+    v-for="a of list.map((x: any): unknown => x.foo.bar)"
+    v-for="(
+      [
+        longLongProp,
+        longLongProp,
+        [
+          longLongProp,
+          longLongProp = 'Hello, Prettier!',
+          [
+            longLongProp,
+            longLongProp,
+            anotherLongLongProp = [
+              longLongProp,
+              longLongProp,
+              anotherLongLongProp,
+              yetAnotherLongLongProp,
+            ],
+            yetAnotherLongLongProp,
+          ],
+          yetAnotherLongLongProp,
+        ],
+        yetAnotherLongLongProp,
+      ],
+      index
+    ) of longLongLongLongLongLongLongLongList"
+  ></div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-generic.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-generic.vue
new file mode 100644
index 000000000000..c6de13813e76
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-generic.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts" generic="T"></script>
+
+<script setup lang="ts" generic="T extends Type1 & Type2 & (Type3 | Type4), U"></script>
+
+<script setup lang="ts" generic="T extends Type1 & Type2 & (Type3 | Type4), U extends string | number | boolean"></script>
+
+<script setup lang="ts" generic="T extends | 'loooooooooooooooooooooooooooooooooong' | 'looooooooooooooooooooooooooooooooooong', U extends LooooooooooooooooooooooooooooooooongType<AnotherLoooooooooooooooongType<NonNullable<Record<string, (Type1 & Type2 & (LoooooooooooooooooooooongType3 | LoooooooooooooooooooooongType4)) | null>[string]>>>, C" ></script>
+
+<script setup lang="ts" generic="
+
+
+                                        // comment 1:
+T 
+extends string &
+
+'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong',
+/**
+       * comment 2
+ */
+        U extends number, // comment 3
+        
+        /** comment 4 */ C extends MyType
+
+
+        "></script>
+
+<template>
+  <!-- should not format it here -->
+  <not-script setup lang="ts" generic="T extends Type1 & Type2 & (Type3 | Type4), U extends string | number | boolean"></not-script>
+</template>
+
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-generic.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-generic.vue.prettier-snap
new file mode 100644
index 000000000000..362ca77c2315
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-generic.vue.prettier-snap
@@ -0,0 +1,67 @@
+<script setup lang="ts" generic="T"></script>
+
+<script
+  setup
+  lang="ts"
+  generic="T extends Type1 & Type2 & (Type3 | Type4), U"
+></script>
+
+<script
+  setup
+  lang="ts"
+  generic="
+    T extends Type1 & Type2 & (Type3 | Type4),
+    U extends string | number | boolean
+  "
+></script>
+
+<script
+  setup
+  lang="ts"
+  generic="
+    T extends
+      | 'loooooooooooooooooooooooooooooooooong'
+      | 'looooooooooooooooooooooooooooooooooong',
+    U extends LooooooooooooooooooooooooooooooooongType<
+      AnotherLoooooooooooooooongType<
+        NonNullable<
+          Record<
+            string,
+            | (Type1 &
+                Type2 &
+                (
+                  | LoooooooooooooooooooooongType3
+                  | LoooooooooooooooooooooongType4
+                ))
+            | null
+          >[string]
+        >
+      >
+    >,
+    C
+  "
+></script>
+
+<script
+  setup
+  lang="ts"
+  generic="
+    // comment 1:
+    T extends string &
+      'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong',
+    /**
+     * comment 2
+     */
+    U extends number, // comment 3
+    /** comment 4 */ C extends MyType
+  "
+></script>
+
+<template>
+  <!-- should not format it here -->
+  <not-script
+    setup
+    lang="ts"
+    generic="T extends Type1 & Type2 & (Type3 | Type4), U extends string | number | boolean"
+  ></not-script>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-setup.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-setup.vue
new file mode 100644
index 000000000000..c72ac65789e7
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-setup.vue
@@ -0,0 +1,18 @@
+<script setup></script>
+<script setup="     foo"></script>
+<script setup="     {row   }"></script>
+<script setup="{destructuring:{   a:{b}}}"></script>
+
+<!-- Not script -->
+<custom setup="     {row   }">Not A script</custom>
+<style setup="     {row   }"></style>
+
+<!-- Not root block -->
+<template>
+<script setup="     {row   }"></script>
+</template>
+
+<!-- Not attribute -->
+<script>
+<setup>{not:{a:attribute}}</setup>
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-setup.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-setup.vue.prettier-snap
new file mode 100644
index 000000000000..246371ec6c2a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/script-setup.vue.prettier-snap
@@ -0,0 +1,24 @@
+<script setup></script>
+<script setup="foo"></script>
+<script setup="{ row }"></script>
+<script
+  setup="{
+    destructuring: {
+      a: { b },
+    },
+  }"
+></script>
+
+<!-- Not script -->
+<custom setup="     {row   }">Not A script</custom>
+<style setup="     {row   }"></style>
+
+<!-- Not root block -->
+<template>
+  <script setup="     {row   }"></script>
+</template>
+
+<!-- Not attribute -->
+<script>
+<setup>{not:{a:attribute}}</setup>
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/style-variables.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/style-variables.vue
new file mode 100644
index 000000000000..a490e8e5a888
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/style-variables.vue
@@ -0,0 +1,18 @@
+<style vars></style>
+<style vars="     foo"></style>
+<style vars="     {row   }"></style>
+<style vars="{destructuring:{   a:{b}}}"></style>
+
+<!-- Not style -->
+<custom vars="     {row   }">Not A style</custom>
+<script vars="     {row   }"></script>
+
+<!-- Not root block -->
+<template>
+<style vars="     {row   }"></style>
+</template> 
+
+<!-- Not attribute -->
+<style>
+<vars>{not:{a:attribute}}</vars>
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/style-variables.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/style-variables.vue.prettier-snap
new file mode 100644
index 000000000000..a726fab05266
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue-3/style-variables.vue.prettier-snap
@@ -0,0 +1,24 @@
+<style vars></style>
+<style vars="foo"></style>
+<style vars="{ row }"></style>
+<style
+  vars="{
+    destructuring: {
+      a: { b },
+    },
+  }"
+></style>
+
+<!-- Not style -->
+<custom vars="     {row   }">Not A style</custom>
+<script vars="     {row   }"></script>
+
+<!-- Not root block -->
+<template>
+  <style vars="     {row   }"></style>
+</template>
+
+<!-- Not attribute -->
+<style>
+<vars>{not:{a:attribute}}</vars>
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/attributes.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/attributes.vue
new file mode 100644
index 000000000000..571615012cb2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/attributes.vue
@@ -0,0 +1,68 @@
+<template>
+<div
+  v-for="({ longLongProp, longLongProp }, index) of longLongLongLongLongLongLongLongList"
+  v-for="({ longLongProp=42, longLongProp='Hello, World!' }, index) of longLongLongLongLongLongLongLongList"
+  v-for="({ longLongProp, longLongProp }) of longLongLongLongLongLongLongLongList"
+  v-for="({ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, index) of longLongLongLongLongLongLongLongList"
+  v-for="({ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }) of longLongLongLongLongLongLongLongList"
+  v-for="([longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+  v-for="([longLongProp, longLongProp=42, anotherLongLongProp, yetAnotherLongLongProp='Hello, World!'], index) of longLongLongLongLongLongLongLongList"
+  v-for="([longLongProp, longLongProp, [longLongProp, longLongProp, [longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+  v-for="([longLongProp, longLongProp, [longLongProp, longLongProp='Hello, Prettier!', [longLongProp, longLongProp, anotherLongLongProp=[longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+  v-for="([{ longLongProp, longLongProp }, { longLongProp, longLongProp }, [{ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, longLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+  v-for="({firstValue, secondValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+  v-for="({firstValue={ longLongProp, longLongProp }, secondValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+  v-for="({firstValue, secondValue, thirdValue, fourthValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+  v-for="({firstValue, secondValue, thirdValue, fourthValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+  v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, sixthValue, seventhValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+  v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, sixthValue: {firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, sixthValue, seventhValue}, seventhValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+  v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp={ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, yetAnotherLongLongProp }, sixthValue, seventhValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="     foo"
+  slot-scope="     {row   }"
+  slot-scope="{destructuring:{   a:{b}}}"
+  #default="     foo"
+  #default="     {row   }"
+  #default="{destructuring:{   a:{b}}}"
+  v-slot="     foo"
+  v-slot="     {row   }"
+  v-slot="{destructuring:{   a:{b}}}"
+  v-slot:name="     foo"
+  v-slot:name="     {row   }"
+  v-slot:name="{destructuring:{   a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
+  @click="() => {console.log(test)}"
+  @click="
+    () => {
+      console.log(test);
+    }
+  "
+  @click="doSomething()"
+  @click="doSomething;"
+  @click="a.b;"
+  @click="a[1];"
+  @click="a['b'];"
+  @click="a[null];"
+  #default="{foo:{bar:{baz}}}"
+></div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/attributes.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/attributes.vue.prettier-snap
new file mode 100644
index 000000000000..bf5b23be7f66
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/attributes.vue.prettier-snap
@@ -0,0 +1,68 @@
+<template>
+  <div
+    v-for="({ longLongProp, longLongProp }, index) of longLongLongLongLongLongLongLongList"
+    v-for="({ longLongProp=42, longLongProp='Hello, World!' }, index) of longLongLongLongLongLongLongLongList"
+    v-for="({ longLongProp, longLongProp }) of longLongLongLongLongLongLongLongList"
+    v-for="({ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, index) of longLongLongLongLongLongLongLongList"
+    v-for="({ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }) of longLongLongLongLongLongLongLongList"
+    v-for="([longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+    v-for="([longLongProp, longLongProp=42, anotherLongLongProp, yetAnotherLongLongProp='Hello, World!'], index) of longLongLongLongLongLongLongLongList"
+    v-for="([longLongProp, longLongProp, [longLongProp, longLongProp, [longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+    v-for="([longLongProp, longLongProp, [longLongProp, longLongProp='Hello, Prettier!', [longLongProp, longLongProp, anotherLongLongProp=[longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+    v-for="([{ longLongProp, longLongProp }, { longLongProp, longLongProp }, [{ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, longLongProp], yetAnotherLongLongProp], index) of longLongLongLongLongLongLongLongList"
+    v-for="({firstValue, secondValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+    v-for="({firstValue={ longLongProp, longLongProp }, secondValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+    v-for="({firstValue, secondValue, thirdValue, fourthValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+    v-for="({firstValue, secondValue, thirdValue, fourthValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+    v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, sixthValue, seventhValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+    v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, sixthValue: {firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, sixthValue, seventhValue}, seventhValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+    v-for="({firstValue, secondValue, thirdValue, fourthValue, fifthValue: { longLongProp, longLongProp, anotherLongLongProp={ longLongProp, longLongProp, anotherLongLongProp, yetAnotherLongLongProp }, yetAnotherLongLongProp }, sixthValue, seventhValue}, objectKey, index) in objectWithAVeryVeryVeryVeryLongName"
+    v-for="  item  in  items "
+    v-for="  item  of  items "
+    v-for="(    item    , index)    in    items"
+    v-for="value    in     object"
+    v-for="(value,    key)    in    object"
+    v-for="(value,    key)    of    object"
+    v-for="(value  ,   key,   index)    in   object"
+    v-for="   n    in   evenNumbers"
+    v-for=" n in even   ( numbers) "
+    v-for=" n    in    10"
+    v-for=" { a }    in    [0].map(()=>({a:1}))   "
+    v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+    v-for=" n in items.map(x => { return x }) "
+    @click="  /* hello */   "
+    @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+    @click="   $emit(   'click'   )   "
+    @click="   $emit(   'click'   )  ;"
+    @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+    slot-scope="     foo"
+    slot-scope="     {row   }"
+    slot-scope="{destructuring:{   a:{b}}}"
+    #default="     foo"
+    #default="     {row   }"
+    #default="{destructuring:{   a:{b}}}"
+    v-slot="     foo"
+    v-slot="     {row   }"
+    v-slot="{destructuring:{   a:{b}}}"
+    v-slot:name="     foo"
+    v-slot:name="     {row   }"
+    v-slot:name="{destructuring:{   a:{b}}}"
+    :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+    :class="(() => { return 'hello' })()"
+    :key="index /* hello */ "
+    :key="index // hello "
+    @click="() => {console.log(test)}"
+    @click="
+    () => {
+      console.log(test);
+    }
+  "
+    @click="doSomething()"
+    @click="doSomething;"
+    @click="a.b;"
+    @click="a[1];"
+    @click="a['b'];"
+    @click="a[null];"
+    #default="{foo:{bar:{baz}}}"
+  ></div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/board_card.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/board_card.vue
new file mode 100644
index 000000000000..c1c34e5122ca
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/board_card.vue
@@ -0,0 +1,73 @@
+<script>
+import './issue_card_inner';
+import eventHub from '../eventhub';
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardsIssueCard',
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains('js-no-trigger')) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit('clearDetailIssue');
+        } else {
+          eventHub.$emit('newDetailIssue', this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="card"
+    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)">
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true" />
+  </li>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/board_card.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/board_card.vue.prettier-snap
new file mode 100644
index 000000000000..e415d2a07c77
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/board_card.vue.prettier-snap
@@ -0,0 +1,76 @@
+<script>
+import './issue_card_inner';
+import eventHub from '../eventhub';
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardsIssueCard',
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return (
+        this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id
+      );
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains('js-no-trigger')) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          eventHub.$emit('clearDetailIssue');
+        } else {
+          eventHub.$emit('newDetailIssue', this.issue);
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    class="card"
+    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+    :index="index"
+    :data-issue-id="issue.id"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)"
+  >
+    <issue-card-inner
+      :list="list"
+      :issue="issue"
+      :issue-link-base="issueLinkBase"
+      :root-path="rootPath"
+      :update-filters="true"
+    />
+  </li>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/case-sensitive-tags.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/case-sensitive-tags.vue
new file mode 100644
index 000000000000..04a06a6ab3a3
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/case-sensitive-tags.vue
@@ -0,0 +1,3 @@
+<template>
+	<Input></Input>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/case-sensitive-tags.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/case-sensitive-tags.vue.prettier-snap
new file mode 100644
index 000000000000..5f3ec91271b0
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/case-sensitive-tags.vue.prettier-snap
@@ -0,0 +1,3 @@
+<template>
+  <Input></Input>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/custom-block.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/custom-block.vue
new file mode 100644
index 000000000000..88d47f5213c4
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/custom-block.vue
@@ -0,0 +1,7 @@
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html><head></head><body></body></html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/custom-block.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/custom-block.vue.prettier-snap
new file mode 100644
index 000000000000..8a7be4ba6908
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/custom-block.vue.prettier-snap
@@ -0,0 +1,10 @@
+<i18n>
+  en:
+    one: One
+    two: Two
+</i18n>
+
+<html>
+  <head></head>
+  <body></body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding-ts.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding-ts.vue
new file mode 100644
index 000000000000..66bc2f04514e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding-ts.vue
@@ -0,0 +1,13 @@
+<!-- #7396 -->
+<template>
+<MyComponent
+:foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
+:bar="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
++`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
+:baz="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
+:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+:add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+/>
+</template>
+<script lang="ts"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding-ts.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding-ts.vue.prettier-snap
new file mode 100644
index 000000000000..1e0ebb643cda
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding-ts.vue.prettier-snap
@@ -0,0 +1,13 @@
+<!-- #7396 -->
+<template>
+  <MyComponent
+    :foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
+    :bar="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
++`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
+    :baz="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
+    :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+    :add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+    :num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+  />
+</template>
+<script lang="ts"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding.vue
new file mode 100644
index 000000000000..e55a4caf6e2d
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding.vue
@@ -0,0 +1,12 @@
+<!-- #7396 -->
+<template>
+<MyComponent
+:foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
+:bar="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
++`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
+:baz="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
+:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+:add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+/>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding.vue.prettier-snap
new file mode 100644
index 000000000000..edf2521b0c82
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/expression-binding.vue.prettier-snap
@@ -0,0 +1,12 @@
+<!-- #7396 -->
+<template>
+  <MyComponent
+    :foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
+    :bar="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
++`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
+    :baz="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
+    :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+    :add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+    :num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+  />
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/filter.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/filter.vue
new file mode 100644
index 000000000000..a425be2b9928
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/filter.vue
@@ -0,0 +1,7 @@
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongBitwiseOr("arg1", arg2) | anotherBitwiseOrLongJustForFun | bitwiseOrTheThird'></div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/filter.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/filter.vue.prettier-snap
new file mode 100644
index 000000000000..b0645bd21cf4
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/filter.vue.prettier-snap
@@ -0,0 +1,18 @@
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'
+  ></div>
+  <div
+    class="allowed"
+    :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'
+  ></div>
+  <div
+    class="not-allowed"
+    v-if='value | thisIsARealSuperLongBitwiseOr("arg1", arg2) | anotherBitwiseOrLongJustForFun | bitwiseOrTheThird'
+  ></div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/interpolations.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/interpolations.vue
new file mode 100644
index 000000000000..0c71775a2857
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/interpolations.vue
@@ -0,0 +1,58 @@
+<template>
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/interpolations.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/interpolations.vue.prettier-snap
new file mode 100644
index 000000000000..bbddec8d33c5
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/interpolations.vue.prettier-snap
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+    }}
+    Magni consectetur in et molestias neque esse voluptatibus voluptas.
+    {{  
+    
+    
+    some_variable 
+
+
+
+    }}
+    Eum quia nihil nulla esse. Dolorem asperiores vero est error
+    {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+    }}
+    reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.
+  </div>
+
+  <script type="text/jsx">
+    export default {
+      render (h) {
+        return (
+          <ul
+            class={{
+              'a': b,
+              'c': d,
+              "e": f
+            }}
+          >
+            { this.xyz }
+          </ul>
+      )
+    };
+  </script>
+
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{ something
+    }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }}1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}
+    1234567890
+  </div>
+  <div>
+    1234567890123456789012345678901234567890123456789012345678901234567890
+    {{ something }} 1234567890
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template1.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template1.vue
new file mode 100644
index 000000000000..32e403af2458
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template1.vue
@@ -0,0 +1,5 @@
+<template></template>
+<template lang=unknown>
+<a>
+</template>
+cloned.
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template1.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template1.vue.prettier-snap
new file mode 100644
index 000000000000..f5ab1ad6302b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template1.vue.prettier-snap
@@ -0,0 +1,5 @@
+<template></template>
+<template lang="unknown">
+<a>
+</template>
+cloned.
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template2.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template2.vue
new file mode 100644
index 000000000000..ae555fe6320a
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template2.vue
@@ -0,0 +1,5 @@
+<template></template>
+<template lang=unknown>
+<a>
+</template>
+<template></template >
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template2.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template2.vue.prettier-snap
new file mode 100644
index 000000000000..b2d203be3c39
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/multiple-template2.vue.prettier-snap
@@ -0,0 +1,5 @@
+<template></template>
+<template lang="unknown">
+<a>
+</template>
+<template></template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/nested-template.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/nested-template.vue
new file mode 100644
index 000000000000..4f9efc1ef2cb
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/nested-template.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+      <template>
+        <div></div>
+      </template>
+      <div>
+               Do not go out, you'll got yourself cloned by bad bad people.
+      </div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/nested-template.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/nested-template.vue.prettier-snap
new file mode 100644
index 000000000000..a25ff3a56f69
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/nested-template.vue.prettier-snap
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <template>
+      <div></div>
+    </template>
+    <div>Do not go out, you'll got yourself cloned by bad bad people.</div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template1.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template1.vue
new file mode 100644
index 000000000000..cd073978f419
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template1.vue
@@ -0,0 +1 @@
+<template><p>foo</p><div>foo</div></template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template1.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template1.vue.prettier-snap
new file mode 100644
index 000000000000..054e89afe1a5
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template1.vue.prettier-snap
@@ -0,0 +1,4 @@
+<template>
+  <p>foo</p>
+  <div>foo</div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template2.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template2.vue
new file mode 100644
index 000000000000..9716de2e56c7
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template2.vue
@@ -0,0 +1 @@
+<template><div><p>foo</p><div>bar</div></div></template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template2.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template2.vue.prettier-snap
new file mode 100644
index 000000000000..d6f52d62bb29
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/one-line-template2.vue.prettier-snap
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <p>foo</p>
+    <div>bar</div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/pre-child.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/pre-child.vue
new file mode 100644
index 000000000000..049b3a38d856
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/pre-child.vue
@@ -0,0 +1,43 @@
+<template>
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+</template>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+<pre class='woot'>
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq }}123
+    </pre>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/pre-child.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/pre-child.vue.prettier-snap
new file mode 100644
index 000000000000..c726d3e8ede6
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/pre-child.vue.prettier-snap
@@ -0,0 +1,42 @@
+<template>
+  <!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+  <pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+</template>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  {{ stuff }}
+  </pre>
+</template>
+
+<template>
+  <pre class="woot">
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq
+    }}123
+  123{{ wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq || wqeqwwqwqweqweqwewwq
+    }}123
+    </pre
+  >
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/script_src.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/script_src.vue
new file mode 100644
index 000000000000..f38f5d6b8e45
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/script_src.vue
@@ -0,0 +1,2 @@
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/script_src.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/script_src.vue.prettier-snap
new file mode 100644
index 000000000000..f38f5d6b8e45
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/script_src.vue.prettier-snap
@@ -0,0 +1,2 @@
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing.vue
new file mode 100644
index 000000000000..a09594996202
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing.vue
@@ -0,0 +1,22 @@
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+
+<template>
+<div class="container">
+  <HomeH />
+  <HomeA />
+  <HomeX />
+  <HomeY />
+</div>
+</template>
+
+<template>
+  <Foo><Bar
+         attr
+                                     /></Foo>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing.vue.prettier-snap
new file mode 100644
index 000000000000..9cf66b413a7b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing.vue.prettier-snap
@@ -0,0 +1,20 @@
+<template>
+  <div />
+</template>
+
+<script>
+foo( )
+</script>
+
+<template>
+  <div class="container">
+    <HomeH />
+    <HomeA />
+    <HomeX />
+    <HomeY />
+  </div>
+</template>
+
+<template>
+  <Foo><Bar attr /></Foo>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing_style.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing_style.vue
new file mode 100644
index 000000000000..fa9f07004d7f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing_style.vue
@@ -0,0 +1,5 @@
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing_style.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing_style.vue.prettier-snap
new file mode 100644
index 000000000000..fa9f07004d7f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/self_closing_style.vue.prettier-snap
@@ -0,0 +1,5 @@
+<template>
+  <span :class="$style.root"><slot /></span>
+</template>
+
+<style src="./style.css" module />
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/slot-ts.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/slot-ts.vue
new file mode 100644
index 000000000000..3ff4dc348b3d
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/slot-ts.vue
@@ -0,0 +1,13 @@
+<script lang="ts"></script>
+<template>
+  <comp>
+    <template
+    v-slot="x:    unknown   []"
+    v-slot:named="   y  :     never"
+    slot-scope=" { des: {truc: tured  } } : any "
+    #shorthand=" abc   : string  "
+    >
+      {{ x[1] }}
+    </template>
+  </comp>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/slot-ts.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/slot-ts.vue.prettier-snap
new file mode 100644
index 000000000000..cbb82383cb78
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/slot-ts.vue.prettier-snap
@@ -0,0 +1,13 @@
+<script lang="ts"></script>
+<template>
+  <comp>
+    <template
+      v-slot="x:    unknown   []"
+      v-slot:named="   y  :     never"
+      slot-scope=" { des: {truc: tured  } } : any "
+      #shorthand=" abc   : string  "
+    >
+      {{ x[1] }}
+    </template>
+  </comp>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/style.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/style.vue
new file mode 100644
index 000000000000..96d75d5a25f6
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/style.vue
@@ -0,0 +1,46 @@
+<script>
+</script>
+
+<style>
+#foo1{ color: #f00;
+}
+</style>
+<style scoped>
+#foo2{ color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3{ color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4{ color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5{ color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6{ 
+         @color: #f00;
+  color: @color;
+}
+</style>
+
+
+<style lang="scss">
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8{ 
+         $color: #f00;
+  color: $color;
+}
+</style>
+
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/style.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/style.vue.prettier-snap
new file mode 100644
index 000000000000..6788f4fb2d5b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/style.vue.prettier-snap
@@ -0,0 +1,43 @@
+<script></script>
+
+<style>
+#foo1{ color: #f00;
+}
+</style>
+<style scoped>
+#foo2{ color: #f00;
+}
+</style>
+
+<style lang="css">
+#foo3{ color: #f00;
+}
+</style>
+<style lang="css" scoped>
+#foo4{ color: #f00;
+}
+</style>
+
+<style lang="less">
+#foo5{ color: #f00;
+}
+</style>
+<style lang="less" scoped>
+#foo6{
+         @color: #f00;
+  color: @color;
+}
+</style>
+
+<style lang="scss">
+#foo8{
+         $color: #f00;
+  color: $color;
+}
+</style>
+<style lang="scss" scoped>
+#foo8{
+         $color: #f00;
+  color: $color;
+}
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/tag-name.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/tag-name.vue
new file mode 100644
index 000000000000..2a1aa9833e09
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/tag-name.vue
@@ -0,0 +1,3 @@
+<template>
+  <Table></Table>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/tag-name.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/tag-name.vue.prettier-snap
new file mode 100644
index 000000000000..2a1aa9833e09
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/tag-name.vue.prettier-snap
@@ -0,0 +1,3 @@
+<template>
+  <Table></Table>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html
new file mode 100644
index 000000000000..7a2875df824b
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html><html>
+  <body>
+    <div v-if="foo ===    'foo'">
+
+</div>
+    <script>
+new Vue({el: '#app'})
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html.prettier-snap
new file mode 100644
index 000000000000..0dd95edf0030
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html.prettier-snap
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div v-if="foo ===    'foo'"></div>
+    <script>
+      new Vue({el: '#app'})
+    </script>
+  </body>
+</html>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html.snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html.snap
new file mode 100644
index 000000000000..f1eead2511b8
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-dom.html.snap
@@ -0,0 +1,68 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: vue/vue/template-dom.html
+---
+# Input
+
+```html
+<!DOCTYPE html><html>
+  <body>
+    <div v-if="foo ===    'foo'">
+
+</div>
+    <script>
+new Vue({el: '#app'})
+    </script>
+  </body>
+</html>
+
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Biome
+@@ -3,7 +3,7 @@
+   <body>
+     <div v-if="foo ===    'foo'"></div>
+     <script>
+-      new Vue({el: '#app'})
++new Vue({el: '#app'})
+     </script>
+   </body>
+ </html>
+```
+
+# Output
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <div v-if="foo ===    'foo'"></div>
+    <script>
+new Vue({el: '#app'})
+    </script>
+  </body>
+</html>
+```
+
+# Errors
+```
+template-dom.html:3:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Vue syntax isn't enabled. Is this supposed to be a .vue file?
+  
+    1 │ <!DOCTYPE html><html>
+    2 │   <body>
+  > 3 │     <div v-if="foo ===    'foo'">
+      │          ^^^^^^^^^^^^^^^^^^^^^^^
+    4 │ 
+    5 │ </div>
+  
+  i Remove it or enable the parsing using the html.parser.vue option.
+  
+
+```
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-lang.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-lang.vue
new file mode 100644
index 000000000000..b53b7646ec70
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-lang.vue
@@ -0,0 +1,36 @@
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="unknown">
+  #container
+    some-component(tag='<some-tag>')
+</template>
+
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-lang.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-lang.vue.prettier-snap
new file mode 100644
index 000000000000..8860589a5c87
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template-lang.vue.prettier-snap
@@ -0,0 +1,32 @@
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="unknown">
+  #container
+    some-component(tag='<some-tag>')
+</template>
+
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template.vue
new file mode 100644
index 000000000000..32583b34593e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template.vue
@@ -0,0 +1,27 @@
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template.vue.prettier-snap
new file mode 100644
index 000000000000..1e3514bdc649
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/template.vue.prettier-snap
@@ -0,0 +1,24 @@
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"
+      />
+      <p v-if="renderInfo" class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height"> | </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/v-if.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/v-if.vue
new file mode 100644
index 000000000000..d4754a423846
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/v-if.vue
@@ -0,0 +1,34 @@
+<template>
+<root>
+  <and v-if="
+long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && short_1 && short_2 &&
+long_long_long_long_long_long_long_condition_3 &&
+long_long_long_long_long_long_long_condition_4
+"></and>
+  <and v-if="
+(long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && (short_1 && short_2) ) &&
+long_long_long_long_long_long_long_condition_3 &&
+long_long_long_long_long_long_long_condition_4
+"></and>
+  <or v-if="
+long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 ||short_1 || short_2 ||
+long_long_long_long_long_long_long_condition_3 ||
+long_long_long_long_long_long_long_condition_4
+"></or>
+  <or v-if="
+(long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 || (short_1 || short_2) ||
+long_long_long_long_long_long_long_condition_3) ||
+long_long_long_long_long_long_long_condition_4
+"></or>
+  <mixed v-if="
+long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 ||  ((short_1 && short_2) &&
+long_long_long_long_long_long_long_condition_3 &&
+long_long_long_long_long_long_long_condition_4)
+"></mixed>
+  <mixed v-if="
+long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || short_1 && short_2 &&
+long_long_long_long_long_long_long_condition_3 ||
+long_long_long_long_long_long_long_condition_4
+"></mixed>
+</root>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/vue/v-if.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/v-if.vue.prettier-snap
new file mode 100644
index 000000000000..b91c7d8e9f43
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/vue/v-if.vue.prettier-snap
@@ -0,0 +1,46 @@
+<template>
+  <root>
+    <and
+      v-if="
+long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && short_1 && short_2 &&
+long_long_long_long_long_long_long_condition_3 &&
+long_long_long_long_long_long_long_condition_4
+"
+    ></and>
+    <and
+      v-if="
+(long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && (short_1 && short_2) ) &&
+long_long_long_long_long_long_long_condition_3 &&
+long_long_long_long_long_long_long_condition_4
+"
+    ></and>
+    <or
+      v-if="
+long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 ||short_1 || short_2 ||
+long_long_long_long_long_long_long_condition_3 ||
+long_long_long_long_long_long_long_condition_4
+"
+    ></or>
+    <or
+      v-if="
+(long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 || (short_1 || short_2) ||
+long_long_long_long_long_long_long_condition_3) ||
+long_long_long_long_long_long_long_condition_4
+"
+    ></or>
+    <mixed
+      v-if="
+long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 ||  ((short_1 && short_2) &&
+long_long_long_long_long_long_long_condition_3 &&
+long_long_long_long_long_long_long_condition_4)
+"
+    ></mixed>
+    <mixed
+      v-if="
+long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || short_1 && short_2 &&
+long_long_long_long_long_long_long_condition_3 ||
+long_long_long_long_long_long_long_condition_4
+"
+    ></mixed>
+  </root>
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/custom-block-lang.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/custom-block-lang.vue
new file mode 100644
index 000000000000..67948a249d4e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/custom-block-lang.vue
@@ -0,0 +1,4 @@
+<custom lang="uppercase-rocks">
+hello,
+world!
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/custom-block-lang.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/custom-block-lang.vue.prettier-snap
new file mode 100644
index 000000000000..7b242a8627b2
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/custom-block-lang.vue.prettier-snap
@@ -0,0 +1,4 @@
+<custom lang="uppercase-rocks">
+HELLO,
+WORLD!
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/inline.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/inline.vue
new file mode 100644
index 000000000000..83044f4cf2d3
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/inline.vue
@@ -0,0 +1 @@
+<custom lang="uppercase-rocks">hello, world!</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/inline.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/inline.vue.prettier-snap
new file mode 100644
index 000000000000..9472e81db1bd
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/inline.vue.prettier-snap
@@ -0,0 +1,3 @@
+<custom lang="uppercase-rocks">
+HELLO, WORLD!
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/script-lang.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/script-lang.vue
new file mode 100644
index 000000000000..050f2195f23e
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/script-lang.vue
@@ -0,0 +1,4 @@
+<script lang="uppercase-rocks">
+hello,
+world!
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/script-lang.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/script-lang.vue.prettier-snap
new file mode 100644
index 000000000000..fc39c2840c0f
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/script-lang.vue.prettier-snap
@@ -0,0 +1,4 @@
+<script lang="uppercase-rocks">
+HELLO,
+WORLD!
+</script>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/style-lang.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/style-lang.vue
new file mode 100644
index 000000000000..ca88524501f8
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/style-lang.vue
@@ -0,0 +1,5 @@
+<style lang="uppercase-rocks">
+/* Should be uppercased */
+hello,
+world!
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/style-lang.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/style-lang.vue.prettier-snap
new file mode 100644
index 000000000000..3fc50592152d
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/style-lang.vue.prettier-snap
@@ -0,0 +1,5 @@
+<style lang="uppercase-rocks">
+/* SHOULD BE UPPERCASED */
+HELLO,
+WORLD!
+</style>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/template-lang.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/template-lang.vue
new file mode 100644
index 000000000000..fac4ea38e621
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/template-lang.vue
@@ -0,0 +1,4 @@
+<template lang="uppercase-rocks">
+hello,
+world!
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/template-lang.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/template-lang.vue.prettier-snap
new file mode 100644
index 000000000000..26125ba5e163
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/template-lang.vue.prettier-snap
@@ -0,0 +1,4 @@
+<template lang="uppercase-rocks">
+HELLO,
+WORLD!
+</template>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/whitspace.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/whitspace.vue
new file mode 100644
index 000000000000..eacb0a623c7d
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/whitspace.vue
@@ -0,0 +1,4 @@
+<custom lang="uppercase-rocks">
+  hello,
+  world!
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/whitspace.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/whitspace.vue.prettier-snap
new file mode 100644
index 000000000000..10de6cca9bec
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/whitspace.vue.prettier-snap
@@ -0,0 +1,4 @@
+<custom lang="uppercase-rocks">
+  HELLO,
+  WORLD!
+</custom>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/with-src.vue b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/with-src.vue
new file mode 100644
index 000000000000..209f53b95193
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/with-src.vue
@@ -0,0 +1,29 @@
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"></template>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"></style>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"></script>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"></custom>
+<template lang="uppercase-rocks" src></template>
+<template lang="uppercase-rocks" src=""></template>
+<template lang="uppercase-rocks" src>PrEtTiEr</template>
+<template lang="uppercase-rocks" src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" src>
+
+     </template>
+<template lang="uppercase-rocks" src="">
+
+     </template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks">
+PrEtTiEr
+</template>
+
+
+<template lang="uppercase-rocks" :src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" @src="">PrEtTiEr</template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"/>
+<custom lang="uppercase-rocks" src/>
+<template lang="uppercase-rocks" src=""/>
diff --git a/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/with-src.vue.prettier-snap b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/with-src.vue.prettier-snap
new file mode 100644
index 000000000000..aefd7607e552
--- /dev/null
+++ b/crates/biome_html_formatter/tests/specs/prettier/vue/with-plugins/with-src.vue.prettier-snap
@@ -0,0 +1,32 @@
+<template lang="uppercase-rocks" src="foo.uppercase-rocks"></template>
+<style lang="uppercase-rocks" src="foo.uppercase-rocks"></style>
+<script lang="uppercase-rocks" src="foo.uppercase-rocks"></script>
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks"></custom>
+<template lang="uppercase-rocks" src></template>
+<template lang="uppercase-rocks" src=""></template>
+<template lang="uppercase-rocks" src>PrEtTiEr</template>
+<template lang="uppercase-rocks" src="">PrEtTiEr</template>
+<template lang="uppercase-rocks" src>
+
+     </template>
+<template lang="uppercase-rocks" src="">
+
+     </template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks">
+PrEtTiEr
+</template>
+
+<template lang="uppercase-rocks" :src="">
+PRETTIER
+</template>
+<template lang="uppercase-rocks" @src="">
+PRETTIER
+</template>
+
+<template lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<style lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<script lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<custom lang="uppercase-rocks" src="foo.uppercase-rocks" />
+<custom lang="uppercase-rocks" src />
+<template lang="uppercase-rocks" src="" />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 485518c6f64d..83351a21a655 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,14 +36,14 @@ importers:
         specifier: 9.39.1
         version: 9.39.1(jiti@1.21.6)
       prettier:
-        specifier: 3.6.2
-        version: 3.6.2
+        specifier: 3.7.4
+        version: 3.7.4
 
   crates/biome_formatter_test/src/prettier:
     dependencies:
       prettier:
-        specifier: 3.6.2
-        version: 3.6.2
+        specifier: 3.7.1
+        version: 3.7.1
 
   packages/@biomejs/backend-jsonrpc:
     devDependencies:
@@ -1298,8 +1298,13 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.6.2:
-    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+  prettier@3.7.1:
+    resolution: {integrity: sha512-RWKXE4qB3u5Z6yz7omJkjWwmTfLdcbv44jUVHC5NpfXwFGzvpQM798FGv/6WNK879tc+Cn0AAyherCl1KjbyZQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  prettier@3.7.4:
+    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -2702,7 +2707,9 @@ snapshots:
 
   prettier@2.8.8: {}
 
-  prettier@3.6.2: {}
+  prettier@3.7.1: {}
+
+  prettier@3.7.4: {}
 
   punycode@2.3.1: {}