diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index 9ac045d2329..1d7d9d157c1 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -17,40 +17,40 @@ function generateMultiComponentForArgs(args: Args, slotProps: string[] | null =
 describe('generateSource Vue3', () => {
   test('boolean true', () => {
     expect(generateForArgs({ booleanProp: true })).toMatchInlineSnapshot(
-      `<Component :booleanProp="booleanProp"/>`
+      `<Component :booleanProp='booleanProp'/>`
     );
   });
   test('boolean false', () => {
     expect(generateForArgs({ booleanProp: false })).toMatchInlineSnapshot(
-      `<Component :booleanProp="booleanProp"/>`
+      `<Component :booleanProp='booleanProp'/>`
     );
   });
   test('null property', () => {
     expect(generateForArgs({ nullProp: null })).toMatchInlineSnapshot(
-      `<Component :nullProp="nullProp"/>`
+      `<Component :nullProp='nullProp'/>`
     );
   });
   test('string property', () => {
     expect(generateForArgs({ stringProp: 'mystr' })).toMatchInlineSnapshot(
-      `<Component :stringProp="stringProp"/>`
+      `<Component :stringProp='stringProp'/>`
     );
   });
   test('number property', () => {
     expect(generateForArgs({ numberProp: 42 })).toMatchInlineSnapshot(
-      `<Component :numberProp="numberProp"/>`
+      `<Component :numberProp='numberProp'/>`
     );
   });
   test('object property', () => {
     expect(generateForArgs({ objProp: { x: true } })).toMatchInlineSnapshot(
-      `<Component :objProp="objProp"/>`
+      `<Component :objProp='objProp'/>`
     );
   });
   test('multiple properties', () => {
-    expect(generateForArgs({ a: 1, b: 2 })).toMatchInlineSnapshot(`<Component :a="a" :b="b"/>`);
+    expect(generateForArgs({ a: 1, b: 2 })).toMatchInlineSnapshot(`<Component :a='a' :b='b'/>`);
   });
   test('1 slot property', () => {
     expect(generateForArgs({ content: 'xyz', myProp: 'abc' }, ['content'])).toMatchInlineSnapshot(`
-      <Component :myProp="myProp">
+      <Component :myProp='myProp'>
       {{ content }}
       </Component>
     `);
@@ -58,7 +58,7 @@ describe('generateSource Vue3', () => {
   test('multiple slot property with second slot value not set', () => {
     expect(generateForArgs({ content: 'xyz', myProp: 'abc' }, ['content', 'footer']))
       .toMatchInlineSnapshot(`
-      <Component :myProp="myProp">
+      <Component :myProp='myProp'>
         <template #content> {{ content }} </template>
       </Component>
     `);
@@ -66,7 +66,7 @@ describe('generateSource Vue3', () => {
   test('multiple slot property with second slot value is set', () => {
     expect(generateForArgs({ content: 'xyz', footer: 'foo', myProp: 'abc' }, ['content', 'footer']))
       .toMatchInlineSnapshot(`
-      <Component :myProp="myProp">
+      <Component :myProp='myProp'>
         <template #content> {{ content }} </template>
         <template #footer> {{ footer }} </template>
       </Component>
@@ -75,7 +75,7 @@ describe('generateSource Vue3', () => {
   // test mutil components
   test('mutil component with boolean true', () => {
     expect(generateMultiComponentForArgs({ booleanProp: true })).toMatchInlineSnapshot(
-      `<Component :booleanProp="booleanProp"/><Component :booleanProp="booleanProp"/>`
+      `<Component :booleanProp='booleanProp'/><Component :booleanProp='booleanProp'/>`
     );
   });
   test('component is not set', () => {
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index cf13888f3d0..e067f396bde 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -9,6 +9,7 @@ import parserTypescript from 'prettier/parser-typescript.js';
 import parserHTML from 'prettier/parser-html.js';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { isArray } from '@vue/shared';
+import { Utils } from 'handlebars';
 /**
  * Check if the sourcecode should be generated.
  *
@@ -89,10 +90,6 @@ function propToDynamicSource(
     return `:${key}='()=>{}'`;
   }
 
-  if (typeof value === 'object') {
-    return `:${key}='${JSON.stringify(value)}'`;
-  }
-
   return `:${key}='${JSON.stringify(value)}'`;
 }
 
@@ -119,7 +116,7 @@ function propValueToSource(val: string | boolean | object | undefined) {
     case 'undefined':
       return `${val}`;
     default:
-      return `"${val}"`;
+      return `'${val}'`;
   }
 }
 
@@ -234,10 +231,9 @@ function createNamedSlots(
     .filter((slotProp) => slotValues[slotProps.indexOf(slotProp)])
     .map(
       (slotProp) =>
-        `  <template #${slotProp}> ${
-          !byReference
-            ? JSON.stringify(slotValues[slotProps.indexOf(slotProp)])
-            : `{{ ${slotProp} }}`
+        `  <template #${slotProp}> ${!byReference
+          ? JSON.stringify(slotValues[slotProps.indexOf(slotProp)])
+          : `{{ ${slotProp} }}`
         } </template>`
     )
     .join('\n');