diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 0a97bd9884f9..d695d7979c37 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -286,6 +286,10 @@ describe('Vue3: sourceDecorator->attributeSoure()', () => {
   it('normal html attribute should not convert to vue event directive', () => {
     expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
   });
+  it('The value undefined or empty string must not be returned.', () => {
+    expect(attributeSource('icon', undefined)).toMatchInlineSnapshot(`icon=""`);
+    expect(attributeSource('icon', '')).toMatchInlineSnapshot(`icon=""`);
+  });
   it('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
     const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
       return htmlEventToVueEvent(attribute);
diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index 707feb46e58f..b4e502952dfd 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -24,9 +24,9 @@ const htmlEventAttributeToVueEventAttribute = (key: string) => {
 };
 
 const directiveSource = (key: string, value: unknown) =>
-  key.includes('on')
+  key.toLowerCase().startsWith('on')
     ? `${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`
-    : `${key}="${value}"`;
+    : `${key}="${value || ''}"`;
 
 const attributeSource = (key: string, value: unknown, dynamic?: boolean) =>
   // convert html event key to vue event key