diff --git a/apps/volt/doc/avatar/ImportDoc.vue b/apps/volt/doc/avatar/ImportDoc.vue
index b098e1981..ff6d0d92c 100644
--- a/apps/volt/doc/avatar/ImportDoc.vue
+++ b/apps/volt/doc/avatar/ImportDoc.vue
@@ -3,13 +3,10 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputText from '@/volt/inputtext';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+`);
 </script>
diff --git a/apps/volt/doc/badge/ImportDoc.vue b/apps/volt/doc/badge/ImportDoc.vue
index 0d1d1228b..4d29ca3af 100644
--- a/apps/volt/doc/badge/ImportDoc.vue
+++ b/apps/volt/doc/badge/ImportDoc.vue
@@ -3,14 +3,10 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Badge from '@/volt/badge';
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Badge from '@/volt/badge';
 import OverlayBadge from '@/volt/overlaybadge';
-`
-        };
-    }
-};
+`);
 </script>
diff --git a/apps/volt/doc/button/ImportDoc.vue b/apps/volt/doc/button/ImportDoc.vue
index ef4a48713..1a74679a4 100644
--- a/apps/volt/doc/button/ImportDoc.vue
+++ b/apps/volt/doc/button/ImportDoc.vue
@@ -3,16 +3,12 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Button from '@/volt/button';
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Button from '@/volt/button';
 import SecondaryButton from '@/volt/button/secondary';
 import ContrastButton from '@/volt/button/contrast';
 import DangerButton from '@/volt/button/danger';
-`
-        };
-    }
-};
+`);
 </script>
diff --git a/apps/volt/doc/card/ImportDoc.vue b/apps/volt/doc/card/ImportDoc.vue
index 870d3cdd7..995e0ca85 100644
--- a/apps/volt/doc/card/ImportDoc.vue
+++ b/apps/volt/doc/card/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Card from '@/volt/card';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Card from '@/volt/card';
+`);
 </script>
diff --git a/apps/volt/doc/checkbox/ImportDoc.vue b/apps/volt/doc/checkbox/ImportDoc.vue
index d23c8d795..c214ebcf3 100644
--- a/apps/volt/doc/checkbox/ImportDoc.vue
+++ b/apps/volt/doc/checkbox/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Checkbox from '@/volt/checkbox';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Checkbox from '@/volt/checkbox';
+`);
 </script>
diff --git a/apps/volt/doc/chip/ImportDoc.vue b/apps/volt/doc/chip/ImportDoc.vue
index ef873110b..e1944fa11 100644
--- a/apps/volt/doc/chip/ImportDoc.vue
+++ b/apps/volt/doc/chip/ImportDoc.vue
@@ -3,14 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import Chip from '@/volt/chip';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Chip from '@/volt/chip';
+`);
 </script>
diff --git a/apps/volt/doc/divider/ImportDoc.vue b/apps/volt/doc/divider/ImportDoc.vue
index 3dc5b21b6..879229a05 100644
--- a/apps/volt/doc/divider/ImportDoc.vue
+++ b/apps/volt/doc/divider/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Divider from '@/volt/divider';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Divider from '@/volt/divider';
+`);
 </script>
diff --git a/apps/volt/doc/inputmask/ImportDoc.vue b/apps/volt/doc/inputmask/ImportDoc.vue
index 9b6e02bf3..45b020cf7 100644
--- a/apps/volt/doc/inputmask/ImportDoc.vue
+++ b/apps/volt/doc/inputmask/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputMask from '@/volt/inputmask';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import InputMask from '@/volt/inputmask';
+`);
 </script>
diff --git a/apps/volt/doc/inputnumber/ImportDoc.vue b/apps/volt/doc/inputnumber/ImportDoc.vue
index 4523bf240..b252b1ef7 100644
--- a/apps/volt/doc/inputnumber/ImportDoc.vue
+++ b/apps/volt/doc/inputnumber/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputNumber from '@/volt/inputnumber';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import InputNumber from '@/volt/inputnumber';
+`);
 </script>
diff --git a/apps/volt/doc/inputtext/ImportDoc.vue b/apps/volt/doc/inputtext/ImportDoc.vue
index b098e1981..c75b95032 100644
--- a/apps/volt/doc/inputtext/ImportDoc.vue
+++ b/apps/volt/doc/inputtext/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import InputText from '@/volt/inputtext';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import InputText from '@/volt/inputtext';
+`);
 </script>
diff --git a/apps/volt/doc/progressbar/ImportDoc.vue b/apps/volt/doc/progressbar/ImportDoc.vue
index 8b2ad1a06..6d2de3b8f 100644
--- a/apps/volt/doc/progressbar/ImportDoc.vue
+++ b/apps/volt/doc/progressbar/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import ProgressBar from '@/volt/progressbar';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import ProgressBar from '@/volt/progressbar';
+`);
 </script>
diff --git a/apps/volt/doc/radiobutton/ImportDoc.vue b/apps/volt/doc/radiobutton/ImportDoc.vue
index 3c7e9dadb..a5c3c1e10 100644
--- a/apps/volt/doc/radiobutton/ImportDoc.vue
+++ b/apps/volt/doc/radiobutton/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import RadioButton from '@/volt/radiobutton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import RadioButton from '@/volt/radiobutton';
+`);
 </script>
diff --git a/apps/volt/doc/rating/ImportDoc.vue b/apps/volt/doc/rating/ImportDoc.vue
index a6c45f087..d5440066b 100644
--- a/apps/volt/doc/rating/ImportDoc.vue
+++ b/apps/volt/doc/rating/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Rating from '@/volt/rating';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Rating from '@/volt/rating';
+`);
 </script>
diff --git a/apps/volt/doc/selectbutton/ImportDoc.vue b/apps/volt/doc/selectbutton/ImportDoc.vue
index a25896e30..aaa9ab270 100644
--- a/apps/volt/doc/selectbutton/ImportDoc.vue
+++ b/apps/volt/doc/selectbutton/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import SelectButton from '@/volt/selectbutton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import SelectButton from '@/volt/selectbutton';
+`);
 </script>
diff --git a/apps/volt/doc/skeleton/ImportDoc.vue b/apps/volt/doc/skeleton/ImportDoc.vue
index 8722be9a0..e1ad86cbf 100644
--- a/apps/volt/doc/skeleton/ImportDoc.vue
+++ b/apps/volt/doc/skeleton/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Skeleton from '@/volt/skeleton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Skeleton from '@/volt/skeleton';
+`);
 </script>
diff --git a/apps/volt/doc/slider/ImportDoc.vue b/apps/volt/doc/slider/ImportDoc.vue
index 81c445f7c..0e5b3e793 100644
--- a/apps/volt/doc/slider/ImportDoc.vue
+++ b/apps/volt/doc/slider/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Slider from '@/volt/slider';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Slider from '@/volt/slider';
+`);
 </script>
diff --git a/apps/volt/doc/textarea/ImportDoc.vue b/apps/volt/doc/textarea/ImportDoc.vue
index 113928ee3..8045de4da 100644
--- a/apps/volt/doc/textarea/ImportDoc.vue
+++ b/apps/volt/doc/textarea/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Textarea from '@/volt/textarea';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Textarea from '@/volt/textarea';
+`);
 </script>
diff --git a/apps/volt/doc/timeline/ImportDoc.vue b/apps/volt/doc/timeline/ImportDoc.vue
index ee88fa698..5f1e63ccf 100644
--- a/apps/volt/doc/timeline/ImportDoc.vue
+++ b/apps/volt/doc/timeline/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import Timeline from '@/volt/timeline';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Timeline from '@/volt/timeline';
+`);
 </script>
diff --git a/apps/volt/doc/togglebutton/ImportDoc.vue b/apps/volt/doc/togglebutton/ImportDoc.vue
index cee97f107..698b55ac4 100644
--- a/apps/volt/doc/togglebutton/ImportDoc.vue
+++ b/apps/volt/doc/togglebutton/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import ToggleButton from '@/volt/togglebutton';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import ToggleButton from '@/volt/togglebutton';
+`);
 </script>
diff --git a/apps/volt/doc/toggleswitch/ImportDoc.vue b/apps/volt/doc/toggleswitch/ImportDoc.vue
index 34c1abaf9..6942724ab 100644
--- a/apps/volt/doc/toggleswitch/ImportDoc.vue
+++ b/apps/volt/doc/toggleswitch/ImportDoc.vue
@@ -3,13 +3,9 @@
     <DocSectionCode :code="code" lang="script" />
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            code: `import ToggleSwitch from '@/volt/toggleswitch';
-`
-        };
-    }
-};
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import ToggleSwitch from '@/volt/toggleswitch';
+`);
 </script>