diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index 1884981fd..29eced80f 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -12,6 +12,16 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compile > component close tag 1`] = `
+"import { template as _template } from 'vue/vapor';
+const t0 = _template("<div><Comp/></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compile > custom directive > basic 1`] = `
 "import { children as _children, resolveDirective as _resolveDirective, withDirectives as _withDirectives, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
@@ -130,7 +140,7 @@ export function render(_ctx) {
 
 exports[`compile > directives > v-pre > self-closing v-pre 1`] = `
 "import { children as _children, createTextNode as _createTextNode, append as _append, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
-const t0 = _template("<div></div><div><Comp></Comp></div>")
+const t0 = _template("<div></div><div><Comp/></div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -145,7 +155,7 @@ export function render(_ctx) {
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
 "import { children as _children, createTextNode as _createTextNode, append as _append, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
-const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>")
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp/></div>")
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
index 23ba98882..0d81ff838 100644
--- a/packages/compiler-vapor/__tests__/compile.spec.ts
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -21,6 +21,11 @@ describe('compile', () => {
     )
     expect(code).matchSnapshot()
   })
+  test('component close tag', () => {
+    const code = compile(`<div><Comp></Comp></div>`)
+    expect(code).matchSnapshot()
+    expect(code).contains(JSON.stringify('<div><Comp/></div>'))
+  })
 
   test('dynamic root', () => {
     const code = compile(`{{ 1 }}{{ 2 }}`)
@@ -96,7 +101,7 @@ describe('compile', () => {
         )
 
         expect(code).toMatchSnapshot()
-        expect(code).contains('<div></div><div><Comp></Comp></div>')
+        expect(code).contains('<div></div><div><Comp/></div>')
         // Waiting for TODO, There should be more here.
       })
     })
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 8aed3a9e3..a9a10a3aa 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -61,7 +61,11 @@ export const transformElement: NodeTransform = (node, context) => {
 
     // TODO remove unnecessary close tag, e.g. if it's the last element of the template
     if (!isVoidTag(tag)) {
-      context.template += `</${tag}>`
+      if (node.tagType === ElementTypes.COMPONENT) {
+        context.template = `<${tag}/>`
+      } else {
+        context.template += `</${tag}>`
+      }
     }
   }
 }