diff --git a/changelog_unreleased/vue/pr-9052.md b/changelog_unreleased/vue/pr-9052.md
index 06cbc594b4f9..c7b8a6459f2d 100644
--- a/changelog_unreleased/vue/pr-9052.md
+++ b/changelog_unreleased/vue/pr-9052.md
@@ -1,10 +1,11 @@
-#### Fix format blocks with `src` attribute ([#9052](https://github.com/prettier/prettier/pull/9052) by [@fisker](https://github.com/fisker))
+#### Fix self-closing blocks and blocks with `src` attribute format ([#9052](https://github.com/prettier/prettier/pull/9052), [#9055](https://github.com/prettier/prettier/pull/9055) by [@fisker](https://github.com/fisker))
```vue
+
@@ -12,9 +13,13 @@
+
+
```
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index fc8e99a13f06..0beeea66333c 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -72,24 +72,30 @@ function embed(path, print, textToDoc, options) {
return;
}
- if (isVueNonHtmlBlock(node, options)) {
+ if (!node.isSelfClosing && isVueNonHtmlBlock(node, options)) {
const parser = inferScriptParser(node, options);
if (!parser) {
return;
}
- const doc = textToDoc(
- htmlTrimPreserveIndentation(getNodeContent(node, options)),
- { parser },
- { stripTrailingHardline: true }
- );
+ const content = getNodeContent(node, options);
+ let isEmpty = /^\s*$/.test(content);
+ let doc = "";
+ if (!isEmpty) {
+ doc = textToDoc(
+ htmlTrimPreserveIndentation(content),
+ { parser },
+ { stripTrailingHardline: true }
+ );
+ isEmpty = doc === "";
+ }
return concat([
printOpeningTagPrefix(node, options),
group(printOpeningTag(path, options, print)),
- hardline,
+ isEmpty ? "" : hardline,
doc,
- hardline,
+ isEmpty ? "" : hardline,
printClosingTag(node, options),
printClosingTagSuffix(node, options),
]);
diff --git a/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap b/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
index 4d1047328e9f..a921d3a0dbee 100644
--- a/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
@@ -102,6 +102,62 @@ export default {
================================================================================
`;
+exports[`snippet: empty format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+
+=====================================output=====================================
+
+
+================================================================================
+`;
+
+exports[`snippet: new line format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+
+
+
+=====================================output=====================================
+
+
+================================================================================
+`;
+
+exports[`snippet: non-space format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+
+
+
+=====================================output=====================================
+
+
+================================================================================
+`;
+
+exports[`snippet: spaces format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+
+=====================================output=====================================
+
+
+================================================================================
+`;
+
exports[`template-bind.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
@@ -164,6 +220,20 @@ printWidth: 80
================================================================================
`;
+exports[`void-element.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+
+
+=====================================output=====================================
+
+
+================================================================================
+`;
+
exports[`vue-component.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
diff --git a/tests/vue/multiparser/jsfmt.spec.js b/tests/vue/multiparser/jsfmt.spec.js
index 2fd7eede986d..ca3a7b5ccebe 100644
--- a/tests/vue/multiparser/jsfmt.spec.js
+++ b/tests/vue/multiparser/jsfmt.spec.js
@@ -1 +1,24 @@
-run_spec(__dirname, ["vue"]);
+run_spec(
+ {
+ dirname: __dirname,
+ snippets: [
+ {
+ name: "empty",
+ code: '',
+ },
+ {
+ name: "spaces",
+ code: ' ',
+ },
+ {
+ name: "new line",
+ code: '\n \n',
+ },
+ {
+ name: "non-space",
+ code: '\n \u2005 \n',
+ },
+ ],
+ },
+ ["vue"]
+);
diff --git a/tests/vue/multiparser/void-element.vue b/tests/vue/multiparser/void-element.vue
new file mode 100644
index 000000000000..5bd25ee7d7be
--- /dev/null
+++ b/tests/vue/multiparser/void-element.vue
@@ -0,0 +1 @@
+