From fc61cdad4fb76d53ceaae13b4c2cff64314adccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 28 Feb 2023 20:40:48 +0300
Subject: [PATCH] Code section fixes

---
 doc/accordion/ImportDoc.vue                   |  2 +-
 doc/autocomplete/AccessibilityDoc.vue         |  2 +-
 doc/autocomplete/ImportDoc.vue                |  2 +-
 doc/avatar/ImportDoc.vue                      |  2 +-
 doc/badge/ImportDoc.vue                       |  2 +-
 doc/blockui/ImportDoc.vue                     |  2 +-
 doc/breadcrumb/ImportDoc.vue                  |  2 +-
 doc/button/AccessibilityDoc.vue               |  2 +-
 doc/button/ImportDoc.vue                      |  2 +-
 doc/calendar/AccessibilityDoc.vue             |  2 +-
 doc/calendar/ImportDoc.vue                    |  2 +-
 doc/card/AccessibilityDoc.vue                 |  2 +-
 doc/card/ImportDoc.vue                        |  2 +-
 doc/carousel/ImportDoc.vue                    |  2 +-
 doc/cascadeselect/AccessibilityDoc.vue        |  2 +-
 doc/cascadeselect/ImportDoc.vue               |  2 +-
 doc/chart/AccessibilityDoc.vue                |  2 +-
 doc/chart/ChartJSDoc.vue                      |  2 +-
 doc/chart/ImportDoc.vue                       |  2 +-
 doc/checkbox/AccessibilityDoc.vue             |  2 +-
 doc/checkbox/ImportDoc.vue                    |  2 +-
 doc/chip/ImportDoc.vue                        |  2 +-
 doc/chips/AccessibilityDoc.vue                |  2 +-
 doc/chips/ImportDoc.vue                       |  2 +-
 doc/colorpicker/ImportDoc.vue                 |  2 +-
 doc/colors/OverviewDoc.vue                    |  2 +-
 doc/configuration/ImportDoc.vue               |  2 +-
 doc/configuration/InputStyleDoc.vue           |  2 +-
 doc/configuration/NuxtIntegrationDoc.vue      |  4 ++--
 doc/configuration/PropCasesDoc.vue            |  2 +-
 doc/configuration/RippleDoc.vue               |  2 +-
 doc/configuration/ZIndexDoc.vue               |  2 +-
 doc/confirmdialog/AccessibilityDoc.vue        |  4 ++--
 doc/confirmdialog/ConfirmationServiceDoc.vue  |  2 +-
 doc/confirmdialog/ImportDoc.vue               |  2 +-
 doc/confirmpopup/AccessibilityDoc.vue         |  4 ++--
 doc/confirmpopup/ConfirmationServiceDoc.vue   |  2 +-
 doc/confirmpopup/ImportDoc.vue                |  2 +-
 doc/contextmenu/ImportDoc.vue                 |  2 +-
 doc/datatable/ImportDoc.vue                   |  2 +-
 doc/dataview/ImportDoc.vue                    |  2 +-
 doc/dataview/PrimeFlexDoc.vue                 |  4 ++--
 doc/deferredcontent/AccessibilityDoc.vue      | 22 ++++++++++++-----
 doc/deferredcontent/ImportDoc.vue             |  2 +-
 doc/dialog/AccessibilityDoc.vue               |  2 +-
 doc/dialog/ImportDoc.vue                      |  2 +-
 doc/divider/ImportDoc.vue                     |  2 +-
 doc/dock/ImportDoc.vue                        |  2 +-
 doc/dropdown/AccessibilityDoc.vue             |  2 +-
 doc/dropdown/ImportDoc.vue                    |  2 +-
 doc/dynamicdialog/CustomizingDialogDoc.vue    |  2 +-
 doc/dynamicdialog/DialogServiceDoc.vue        |  2 +-
 doc/dynamicdialog/ImportDoc.vue               |  2 +-
 doc/editor/ImportDoc.vue                      |  2 +-
 doc/editor/QuillDoc.vue                       |  2 +-
 doc/fieldset/ImportDoc.vue                    |  2 +-
 doc/fileupload/AccessibilityDoc.vue           |  2 +-
 doc/fileupload/ImportDoc.vue                  |  2 +-
 doc/filterservice/CustomConstraintDoc.vue     |  2 +-
 doc/filterservice/ImportDoc.vue               |  2 +-
 doc/filterservice/UsageDoc.vue                |  2 +-
 doc/focustrap/ImportDoc.vue                   |  2 +-
 doc/galleria/ImportDoc.vue                    |  2 +-
 doc/icons/BasicDoc.vue                        |  2 +-
 doc/icons/ColorDoc.vue                        |  2 +-
 doc/icons/ConstantsDoc.vue                    |  2 +-
 doc/icons/DownloadDoc.vue                     |  2 +-
 doc/icons/ImportDoc.vue                       |  2 +-
 doc/icons/SizeDoc.vue                         |  2 +-
 doc/icons/SpinDoc.vue                         |  2 +-
 doc/image/ImportDoc.vue                       |  2 +-
 doc/inlinemessage/ImportDoc.vue               |  2 +-
 doc/inplace/ImportDoc.vue                     |  2 +-
 doc/inputmask/AccessibilityDoc.vue            |  2 +-
 doc/inputmask/ImportDoc.vue                   |  2 +-
 doc/inputnumber/AccessibilityDoc.vue          |  2 +-
 doc/inputnumber/ImportDoc.vue                 |  2 +-
 doc/inputswitch/AccessibilityDoc.vue          |  2 +-
 doc/inputswitch/ImportDoc.vue                 |  2 +-
 doc/inputtext/AccessibilityDoc.vue            |  2 +-
 doc/inputtext/ImportDoc.vue                   |  2 +-
 doc/installation/DownloadDoc.vue              |  2 +-
 doc/installation/StylesDoc.vue                |  2 +-
 doc/knob/AccessibilityDoc.vue                 |  2 +-
 doc/knob/ImportDoc.vue                        |  2 +-
 doc/listbox/AccessibilityDoc.vue              |  2 +-
 doc/listbox/ImportDoc.vue                     |  2 +-
 doc/locale/ImportDoc.vue                      |  2 +-
 doc/locale/SetLocaleDoc.vue                   |  4 ++--
 doc/megamenu/ImportDoc.vue                    |  2 +-
 doc/menu/ImportDoc.vue                        |  2 +-
 doc/menubar/ImportDoc.vue                     |  2 +-
 doc/message/ImportDoc.vue                     |  2 +-
 doc/multiselect/AccessibilityDoc.vue          | 10 ++++----
 doc/multiselect/ImportDoc.vue                 |  2 +-
 doc/orderlist/AccessibilityDoc.vue            |  2 +-
 doc/orderlist/ImportDoc.vue                   |  2 +-
 doc/organizationchart/ImportDoc.vue           |  2 +-
 doc/overlaypanel/ImportDoc.vue                |  2 +-
 doc/paginator/ImportDoc.vue                   |  2 +-
 doc/panel/ImportDoc.vue                       |  2 +-
 doc/panelmenu/ImportDoc.vue                   |  2 +-
 doc/password/AccessibilityDoc.vue             |  2 +-
 doc/password/ImportDoc.vue                    |  2 +-
 doc/picklist/AccessibilityDoc.vue             |  2 +-
 doc/picklist/ImportDoc.vue                    |  2 +-
 doc/progressbar/AccessibilityDoc.vue          | 24 +++++++++++++------
 doc/progressbar/ImportDoc.vue                 |  2 +-
 doc/progressspinner/AccessibilityDoc.vue      | 18 ++++++++++----
 doc/progressspinner/ImportDoc.vue             |  2 +-
 doc/radiobutton/AccessibilityDoc.vue          |  2 +-
 doc/radiobutton/ImportDoc.vue                 |  2 +-
 doc/rating/ImportDoc.vue                      |  2 +-
 doc/ripple/ConfigurationDoc.vue               |  2 +-
 doc/ripple/ImportDoc.vue                      |  4 ++--
 doc/scrollpanel/ImportDoc.vue                 |  2 +-
 doc/scrolltop/ImportDoc.vue                   |  2 +-
 doc/selectbutton/ImportDoc.vue                |  2 +-
 doc/sidebar/AccessibilityDoc.vue              |  2 +-
 doc/sidebar/ImportDoc.vue                     |  2 +-
 doc/skeleton/ImportDoc.vue                    |  2 +-
 doc/slider/AccessibilityDoc.vue               |  2 +-
 doc/slider/ImportDoc.vue                      |  2 +-
 doc/speeddial/AccessibilityDoc.vue            |  2 +-
 doc/speeddial/ImportDoc.vue                   |  2 +-
 doc/splitbutton/AccessibilityDoc.vue          |  2 +-
 doc/splitbutton/ImportDoc.vue                 |  2 +-
 doc/splitter/ImportDoc.vue                    |  2 +-
 doc/steps/ImportDoc.vue                       |  2 +-
 doc/styleclass/ImportDoc.vue                  |  2 +-
 doc/tabmenu/ImportDoc.vue                     |  2 +-
 doc/tabview/ImportDoc.vue                     |  2 +-
 doc/tag/ImportDoc.vue                         |  2 +-
 doc/terminal/ImportDoc.vue                    |  2 +-
 doc/textarea/AccessibilityDoc.vue             |  2 +-
 doc/textarea/ImportDoc.vue                    |  2 +-
 doc/theming/PrimeFlexDoc.vue                  |  2 +-
 doc/theming/ScaleDoc.vue                      |  2 +-
 doc/theming/ScopedStylingDoc.vue              |  4 ++--
 doc/theming/ThemesDoc.vue                     |  2 +-
 doc/tieredmenu/ImportDoc.vue                  |  2 +-
 doc/timeline/ImportDoc.vue                    |  2 +-
 doc/toast/ImportDoc.vue                       |  2 +-
 doc/toast/ToastServiceDoc.vue                 |  2 +-
 doc/togglebutton/AccessibilityDoc.vue         |  2 +-
 doc/togglebutton/ImportDoc.vue                |  2 +-
 doc/toolbar/ImportDoc.vue                     |  2 +-
 doc/tooltip/ImportDoc.vue                     |  2 +-
 doc/tree/ImportDoc.vue                        |  2 +-
 doc/treeselect/AccessibilityDoc.vue           |  2 +-
 doc/treeselect/CheckboxDoc.vue                |  2 +-
 doc/treeselect/ImportDoc.vue                  |  2 +-
 doc/treeselect/MultipleDoc.vue                |  2 +-
 doc/treetable/ImportDoc.vue                   |  2 +-
 .../selection/CheckboxRowSelectionDoc.vue     |  2 +-
 doc/tristatecheckbox/AccessibilityDoc.vue     |  4 ++--
 doc/tristatecheckbox/ImportDoc.vue            |  2 +-
 doc/virtualscroller/ImportDoc.vue             |  2 +-
 layouts/doc/DocSectionCode.vue                | 13 +++++++++-
 159 files changed, 226 insertions(+), 185 deletions(-)

diff --git a/doc/accordion/ImportDoc.vue b/doc/accordion/ImportDoc.vue
index 299b471dc..b3c594852 100644
--- a/doc/accordion/ImportDoc.vue
+++ b/doc/accordion/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/autocomplete/AccessibilityDoc.vue b/doc/autocomplete/AccessibilityDoc.vue
index 7205c7f5f..3aed121d3 100644
--- a/doc/autocomplete/AccessibilityDoc.vue
+++ b/doc/autocomplete/AccessibilityDoc.vue
@@ -12,7 +12,7 @@
             element.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Closed State Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/autocomplete/ImportDoc.vue b/doc/autocomplete/ImportDoc.vue
index b0d21f464..da4aaaecd 100644
--- a/doc/autocomplete/ImportDoc.vue
+++ b/doc/autocomplete/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/avatar/ImportDoc.vue b/doc/avatar/ImportDoc.vue
index 0c463e36b..d4fa8459c 100644
--- a/doc/avatar/ImportDoc.vue
+++ b/doc/avatar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/badge/ImportDoc.vue b/doc/badge/ImportDoc.vue
index 78529f84f..4d919da39 100644
--- a/doc/badge/ImportDoc.vue
+++ b/doc/badge/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/blockui/ImportDoc.vue b/doc/blockui/ImportDoc.vue
index a78a44b04..1e5db4e96 100644
--- a/doc/blockui/ImportDoc.vue
+++ b/doc/blockui/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/breadcrumb/ImportDoc.vue b/doc/breadcrumb/ImportDoc.vue
index c47ec26c5..3709f4708 100644
--- a/doc/breadcrumb/ImportDoc.vue
+++ b/doc/breadcrumb/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/button/AccessibilityDoc.vue b/doc/button/AccessibilityDoc.vue
index 8fa038352..d8e3069c8 100644
--- a/doc/button/AccessibilityDoc.vue
+++ b/doc/button/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/button/ImportDoc.vue b/doc/button/ImportDoc.vue
index 6ab244b38..d24c325a0 100644
--- a/doc/button/ImportDoc.vue
+++ b/doc/button/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/calendar/AccessibilityDoc.vue b/doc/calendar/AccessibilityDoc.vue
index fb299a7f6..cff031a6b 100644
--- a/doc/calendar/AccessibilityDoc.vue
+++ b/doc/calendar/AccessibilityDoc.vue
@@ -28,7 +28,7 @@
 
         <p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Choose Date Button Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/calendar/ImportDoc.vue b/doc/calendar/ImportDoc.vue
index 3d66f7f3f..e09fe06ac 100644
--- a/doc/calendar/ImportDoc.vue
+++ b/doc/calendar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/card/AccessibilityDoc.vue b/doc/card/AccessibilityDoc.vue
index 3aa68e0fb..fe2da1bcb 100644
--- a/doc/card/AccessibilityDoc.vue
+++ b/doc/card/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Component does not include any interactive elements.</p>
diff --git a/doc/card/ImportDoc.vue b/doc/card/ImportDoc.vue
index 0f1715403..2b9306e5c 100644
--- a/doc/card/ImportDoc.vue
+++ b/doc/card/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/carousel/ImportDoc.vue b/doc/carousel/ImportDoc.vue
index 866134bdd..de6243c08 100644
--- a/doc/carousel/ImportDoc.vue
+++ b/doc/carousel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cascadeselect/AccessibilityDoc.vue b/doc/cascadeselect/AccessibilityDoc.vue
index 1822dc832..172c1cd91 100644
--- a/doc/cascadeselect/AccessibilityDoc.vue
+++ b/doc/cascadeselect/AccessibilityDoc.vue
@@ -10,7 +10,7 @@
             <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Closed State Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/cascadeselect/ImportDoc.vue b/doc/cascadeselect/ImportDoc.vue
index f096c578a..1a56ac31f 100644
--- a/doc/cascadeselect/ImportDoc.vue
+++ b/doc/cascadeselect/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chart/AccessibilityDoc.vue b/doc/chart/AccessibilityDoc.vue
index 51e81ec23..7435c5d43 100644
--- a/doc/chart/AccessibilityDoc.vue
+++ b/doc/chart/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
     </DocSectionText>
 </template>
 
diff --git a/doc/chart/ChartJSDoc.vue b/doc/chart/ChartJSDoc.vue
index cc5df06b3..d655538e3 100644
--- a/doc/chart/ChartJSDoc.vue
+++ b/doc/chart/ChartJSDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Chart component uses <a href="https://chartjs.org/">Chart.JS</a> underneath so it needs to be installed as a dependency.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chart/ImportDoc.vue b/doc/chart/ImportDoc.vue
index b0d0702d9..13a592f96 100644
--- a/doc/chart/ImportDoc.vue
+++ b/doc/chart/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/checkbox/AccessibilityDoc.vue b/doc/checkbox/AccessibilityDoc.vue
index 248d8720b..20cf16f0e 100644
--- a/doc/checkbox/AccessibilityDoc.vue
+++ b/doc/checkbox/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-labelledby</i>, <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/checkbox/ImportDoc.vue b/doc/checkbox/ImportDoc.vue
index 653bd1efd..1d3b42ade 100644
--- a/doc/checkbox/ImportDoc.vue
+++ b/doc/checkbox/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chip/ImportDoc.vue b/doc/chip/ImportDoc.vue
index a09193d40..4e3ccad58 100644
--- a/doc/chip/ImportDoc.vue
+++ b/doc/chip/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chips/AccessibilityDoc.vue b/doc/chips/AccessibilityDoc.vue
index 7ae68a46a..7ce48f87a 100644
--- a/doc/chips/AccessibilityDoc.vue
+++ b/doc/chips/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Input Field Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/chips/ImportDoc.vue b/doc/chips/ImportDoc.vue
index 9e9c79298..36b6ad9ce 100644
--- a/doc/chips/ImportDoc.vue
+++ b/doc/chips/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/colorpicker/ImportDoc.vue b/doc/colorpicker/ImportDoc.vue
index f6c39b57b..823f8e293 100644
--- a/doc/colorpicker/ImportDoc.vue
+++ b/doc/colorpicker/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/colors/OverviewDoc.vue b/doc/colors/OverviewDoc.vue
index 5102e12ac..f55a1cf23 100644
--- a/doc/colors/OverviewDoc.vue
+++ b/doc/colors/OverviewDoc.vue
@@ -63,7 +63,7 @@
         <div :style="{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Highlighted Item</div>
         <div :style="{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
     </div>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/ImportDoc.vue b/doc/configuration/ImportDoc.vue
index 77595ce84..20e3eaa38 100644
--- a/doc/configuration/ImportDoc.vue
+++ b/doc/configuration/ImportDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Configuration is managed by the <i>PrimeVue</i> instance imported from <i>primevue/config</i>.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/InputStyleDoc.vue b/doc/configuration/InputStyleDoc.vue
index b5fb528b5..a3013426f 100644
--- a/doc/configuration/InputStyleDoc.vue
+++ b/doc/configuration/InputStyleDoc.vue
@@ -7,7 +7,7 @@
             PrimeVue configuration as well.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/NuxtIntegrationDoc.vue b/doc/configuration/NuxtIntegrationDoc.vue
index ae8ec87d0..bc18732bc 100644
--- a/doc/configuration/NuxtIntegrationDoc.vue
+++ b/doc/configuration/NuxtIntegrationDoc.vue
@@ -5,12 +5,12 @@
         <h6>nuxt.config.js</h6>
         <p>Open the nuxt configuration file and add the css dependencies.</p>
 
-        <DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 
         <h6>primevue.js</h6>
         <p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
 
-        <DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/configuration/PropCasesDoc.vue b/doc/configuration/PropCasesDoc.vue
index fe1bf4443..d5f2b8ff6 100644
--- a/doc/configuration/PropCasesDoc.vue
+++ b/doc/configuration/PropCasesDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/configuration/RippleDoc.vue b/doc/configuration/RippleDoc.vue
index 559d6ab7b..d76bcdc21 100644
--- a/doc/configuration/RippleDoc.vue
+++ b/doc/configuration/RippleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/configuration/ZIndexDoc.vue b/doc/configuration/ZIndexDoc.vue
index 8c975c51e..e953f48db 100644
--- a/doc/configuration/ZIndexDoc.vue
+++ b/doc/configuration/ZIndexDoc.vue
@@ -6,7 +6,7 @@
             default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/confirmdialog/AccessibilityDoc.vue b/doc/confirmdialog/AccessibilityDoc.vue
index cc23e4304..e6bb57f79 100644
--- a/doc/confirmdialog/AccessibilityDoc.vue
+++ b/doc/confirmdialog/AccessibilityDoc.vue
@@ -10,8 +10,8 @@
             When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
             trigger and the dialog is defined.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
-        <DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Overlay Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index 5af6de9da..e5f11c2c2 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/confirmdialog/ImportDoc.vue b/doc/confirmdialog/ImportDoc.vue
index d579635b4..e6f9ef7c9 100644
--- a/doc/confirmdialog/ImportDoc.vue
+++ b/doc/confirmdialog/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/confirmpopup/AccessibilityDoc.vue b/doc/confirmpopup/AccessibilityDoc.vue
index a9292f6ca..f1575093c 100644
--- a/doc/confirmpopup/AccessibilityDoc.vue
+++ b/doc/confirmpopup/AccessibilityDoc.vue
@@ -9,8 +9,8 @@
             When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
             trigger and the dialog is defined.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
-        <DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Overlay Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/confirmpopup/ConfirmationServiceDoc.vue b/doc/confirmpopup/ConfirmationServiceDoc.vue
index 5af6de9da..e5f11c2c2 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/confirmpopup/ImportDoc.vue b/doc/confirmpopup/ImportDoc.vue
index e9cebd4f6..8e3fbad77 100644
--- a/doc/confirmpopup/ImportDoc.vue
+++ b/doc/confirmpopup/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/contextmenu/ImportDoc.vue b/doc/contextmenu/ImportDoc.vue
index 0e61774c1..91f7bb8aa 100644
--- a/doc/contextmenu/ImportDoc.vue
+++ b/doc/contextmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/datatable/ImportDoc.vue b/doc/datatable/ImportDoc.vue
index 39e6aea00..86a17c2f9 100644
--- a/doc/datatable/ImportDoc.vue
+++ b/doc/datatable/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dataview/ImportDoc.vue b/doc/dataview/ImportDoc.vue
index 730747ff5..307f8e6dd 100644
--- a/doc/dataview/ImportDoc.vue
+++ b/doc/dataview/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dataview/PrimeFlexDoc.vue b/doc/dataview/PrimeFlexDoc.vue
index 345910702..94f85a516 100644
--- a/doc/dataview/PrimeFlexDoc.vue
+++ b/doc/dataview/PrimeFlexDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.</p>
     </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/deferredcontent/AccessibilityDoc.vue b/doc/deferredcontent/AccessibilityDoc.vue
index a75610a28..18e23d3cb 100644
--- a/doc/deferredcontent/AccessibilityDoc.vue
+++ b/doc/deferredcontent/AccessibilityDoc.vue
@@ -5,14 +5,24 @@
             DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
             have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
         </p>
-        <pre v-code><code>
-&lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
-    Content
-&lt;/DeferredContent&gt;
-
-</code></pre>
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Component does not include any interactive elements.</p>
     </DocSectionText>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down>
+    Content
+</DeferredContent>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/deferredcontent/ImportDoc.vue b/doc/deferredcontent/ImportDoc.vue
index 918591c8a..41cc9f442 100644
--- a/doc/deferredcontent/ImportDoc.vue
+++ b/doc/deferredcontent/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dialog/AccessibilityDoc.vue b/doc/dialog/AccessibilityDoc.vue
index 07176e502..ae95f7906 100644
--- a/doc/dialog/AccessibilityDoc.vue
+++ b/doc/dialog/AccessibilityDoc.vue
@@ -11,7 +11,7 @@
             override the default <i>aria-label</i>.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Overlay Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/dialog/ImportDoc.vue b/doc/dialog/ImportDoc.vue
index f02afc2f2..51ac1668b 100644
--- a/doc/dialog/ImportDoc.vue
+++ b/doc/dialog/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/divider/ImportDoc.vue b/doc/divider/ImportDoc.vue
index d991a5175..3cdf0f21d 100644
--- a/doc/divider/ImportDoc.vue
+++ b/doc/divider/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dock/ImportDoc.vue b/doc/dock/ImportDoc.vue
index 74d5187ae..e9f230544 100644
--- a/doc/dock/ImportDoc.vue
+++ b/doc/dock/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dropdown/AccessibilityDoc.vue b/doc/dropdown/AccessibilityDoc.vue
index 010b5241f..e2573e379 100644
--- a/doc/dropdown/AccessibilityDoc.vue
+++ b/doc/dropdown/AccessibilityDoc.vue
@@ -13,7 +13,7 @@
 
         <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Closed State Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/dropdown/ImportDoc.vue b/doc/dropdown/ImportDoc.vue
index 606f2f33b..c899bc2a0 100644
--- a/doc/dropdown/ImportDoc.vue
+++ b/doc/dropdown/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/CustomizingDialogDoc.vue b/doc/dynamicdialog/CustomizingDialogDoc.vue
index c473dbf02..c995541ed 100644
--- a/doc/dynamicdialog/CustomizingDialogDoc.vue
+++ b/doc/dynamicdialog/CustomizingDialogDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>DynamicDialog uses the Dialog component internally, visit <NuxtLink to="/dialog">dialog</NuxtLink> for more information.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index c7425052a..d173b992f 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/ImportDoc.vue b/doc/dynamicdialog/ImportDoc.vue
index 04124a3dc..a52145700 100644
--- a/doc/dynamicdialog/ImportDoc.vue
+++ b/doc/dynamicdialog/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/editor/ImportDoc.vue b/doc/editor/ImportDoc.vue
index ee1b56d1c..25ad028b4 100644
--- a/doc/editor/ImportDoc.vue
+++ b/doc/editor/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/editor/QuillDoc.vue b/doc/editor/QuillDoc.vue
index 0bcb3a62c..1b2ce3fd0 100644
--- a/doc/editor/QuillDoc.vue
+++ b/doc/editor/QuillDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/fieldset/ImportDoc.vue b/doc/fieldset/ImportDoc.vue
index fc4025a8e..6976d5ba4 100644
--- a/doc/fieldset/ImportDoc.vue
+++ b/doc/fieldset/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/fileupload/AccessibilityDoc.vue b/doc/fileupload/AccessibilityDoc.vue
index 4dd3cd224..ea7335051 100644
--- a/doc/fileupload/AccessibilityDoc.vue
+++ b/doc/fileupload/AccessibilityDoc.vue
@@ -4,6 +4,6 @@
         <p>FileUpload uses a hidden native <i>input</i> element with <i>type="file"</i> for screen readers.</p>
 
         <h3>Keyboard Support</h3>
-        <p>Interactive elements of the uploader are buttons, visit the <Link href="/button#accessibility">Button</Link> accessibility section for more information.</p>
+        <p>Interactive elements of the uploader are buttons, visit the <NuxtLink to="/button/#accessibility">Button</NuxtLink> accessibility section for more information.</p>
     </DocSectionText>
 </template>
diff --git a/doc/fileupload/ImportDoc.vue b/doc/fileupload/ImportDoc.vue
index 0d0c56735..8206e27e0 100644
--- a/doc/fileupload/ImportDoc.vue
+++ b/doc/fileupload/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/filterservice/CustomConstraintDoc.vue b/doc/filterservice/CustomConstraintDoc.vue
index 98494aac8..a5e0478ee 100644
--- a/doc/filterservice/CustomConstraintDoc.vue
+++ b/doc/filterservice/CustomConstraintDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>FilterService can be extended by adding new constraints using the register function.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/filterservice/ImportDoc.vue b/doc/filterservice/ImportDoc.vue
index a1bbac57b..ae4b39a9a 100644
--- a/doc/filterservice/ImportDoc.vue
+++ b/doc/filterservice/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/filterservice/UsageDoc.vue b/doc/filterservice/UsageDoc.vue
index d92cda730..92e467c07 100644
--- a/doc/filterservice/UsageDoc.vue
+++ b/doc/filterservice/UsageDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Filters are accessed with <i>FilterService.filters</i>.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/focustrap/ImportDoc.vue b/doc/focustrap/ImportDoc.vue
index 72b73b745..50a43a30e 100644
--- a/doc/focustrap/ImportDoc.vue
+++ b/doc/focustrap/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/galleria/ImportDoc.vue b/doc/galleria/ImportDoc.vue
index add5c93b7..6642f7b01 100644
--- a/doc/galleria/ImportDoc.vue
+++ b/doc/galleria/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/BasicDoc.vue b/doc/icons/BasicDoc.vue
index 673524234..c8ed64815 100644
--- a/doc/icons/BasicDoc.vue
+++ b/doc/icons/BasicDoc.vue
@@ -8,7 +8,7 @@
         <span class="pi pi-search"></span>
         <span class="pi pi-user"></span>
     </div>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/ColorDoc.vue b/doc/icons/ColorDoc.vue
index 25faab8e5..48fbf8a62 100644
--- a/doc/icons/ColorDoc.vue
+++ b/doc/icons/ColorDoc.vue
@@ -8,7 +8,7 @@
         <i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
         <i class="pi pi-user" style="color: #708090"></i>
     </div>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/ConstantsDoc.vue b/doc/icons/ConstantsDoc.vue
index 02beb6539..25c48147a 100644
--- a/doc/icons/ConstantsDoc.vue
+++ b/doc/icons/ConstantsDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <Menu :model="items" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/DownloadDoc.vue b/doc/icons/DownloadDoc.vue
index 2c8b4d439..d9dba02ab 100644
--- a/doc/icons/DownloadDoc.vue
+++ b/doc/icons/DownloadDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/ImportDoc.vue b/doc/icons/ImportDoc.vue
index e2428506d..06213184b 100644
--- a/doc/icons/ImportDoc.vue
+++ b/doc/icons/ImportDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>CSS file of the icon library needs to be imported in your application.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/SizeDoc.vue b/doc/icons/SizeDoc.vue
index 35d32059d..27ba95494 100644
--- a/doc/icons/SizeDoc.vue
+++ b/doc/icons/SizeDoc.vue
@@ -8,7 +8,7 @@
         <i class="pi pi-search" style="font-size: 2rem"></i>
         <i class="pi pi-user" style="font-size: 2.5rem"></i>
     </div>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/SpinDoc.vue b/doc/icons/SpinDoc.vue
index 8735dc750..698b8e02d 100644
--- a/doc/icons/SpinDoc.vue
+++ b/doc/icons/SpinDoc.vue
@@ -6,7 +6,7 @@
         <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
         <i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
     </div>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/image/ImportDoc.vue b/doc/image/ImportDoc.vue
index d9cc0d4e2..ed5d8b2df 100644
--- a/doc/image/ImportDoc.vue
+++ b/doc/image/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inlinemessage/ImportDoc.vue b/doc/inlinemessage/ImportDoc.vue
index 8e986b2d8..a23e6446a 100644
--- a/doc/inlinemessage/ImportDoc.vue
+++ b/doc/inlinemessage/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inplace/ImportDoc.vue b/doc/inplace/ImportDoc.vue
index 196141a2b..b623ad48f 100644
--- a/doc/inplace/ImportDoc.vue
+++ b/doc/inplace/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputmask/AccessibilityDoc.vue b/doc/inputmask/AccessibilityDoc.vue
index a07807c89..2128e3620 100644
--- a/doc/inputmask/AccessibilityDoc.vue
+++ b/doc/inputmask/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/inputmask/ImportDoc.vue b/doc/inputmask/ImportDoc.vue
index 7fbb3d3ae..690d5af1e 100644
--- a/doc/inputmask/ImportDoc.vue
+++ b/doc/inputmask/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputnumber/AccessibilityDoc.vue b/doc/inputnumber/AccessibilityDoc.vue
index 2517cba77..aed9e34ba 100644
--- a/doc/inputnumber/AccessibilityDoc.vue
+++ b/doc/inputnumber/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/inputnumber/ImportDoc.vue b/doc/inputnumber/ImportDoc.vue
index 0fd7e85a3..b7469b046 100644
--- a/doc/inputnumber/ImportDoc.vue
+++ b/doc/inputnumber/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputswitch/AccessibilityDoc.vue b/doc/inputswitch/AccessibilityDoc.vue
index 02a4226aa..3ebfe393b 100644
--- a/doc/inputswitch/AccessibilityDoc.vue
+++ b/doc/inputswitch/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/inputswitch/ImportDoc.vue b/doc/inputswitch/ImportDoc.vue
index eb49a2849..bd0eed0b4 100644
--- a/doc/inputswitch/ImportDoc.vue
+++ b/doc/inputswitch/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputtext/AccessibilityDoc.vue b/doc/inputtext/AccessibilityDoc.vue
index 6678dbfaa..8c36acf55 100644
--- a/doc/inputtext/AccessibilityDoc.vue
+++ b/doc/inputtext/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/inputtext/ImportDoc.vue b/doc/inputtext/ImportDoc.vue
index 4aa814416..bb916c5b2 100644
--- a/doc/inputtext/ImportDoc.vue
+++ b/doc/inputtext/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/installation/DownloadDoc.vue b/doc/installation/DownloadDoc.vue
index 46eaa016f..2eff0f6dd 100644
--- a/doc/installation/DownloadDoc.vue
+++ b/doc/installation/DownloadDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>PrimeVue is available for download at <a href="https://www.npmjs.com/package/primevue">npm</a>.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/installation/StylesDoc.vue b/doc/installation/StylesDoc.vue
index e2fb2940a..918f23dcf 100644
--- a/doc/installation/StylesDoc.vue
+++ b/doc/installation/StylesDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/knob/AccessibilityDoc.vue b/doc/knob/AccessibilityDoc.vue
index 0b65c7277..cbcc88b21 100644
--- a/doc/knob/AccessibilityDoc.vue
+++ b/doc/knob/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/knob/ImportDoc.vue b/doc/knob/ImportDoc.vue
index af02e0237..a078ff520 100644
--- a/doc/knob/ImportDoc.vue
+++ b/doc/knob/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/listbox/AccessibilityDoc.vue b/doc/listbox/AccessibilityDoc.vue
index 905f957c4..528eea360 100644
--- a/doc/listbox/AccessibilityDoc.vue
+++ b/doc/listbox/AccessibilityDoc.vue
@@ -7,7 +7,7 @@
         </p>
         <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/listbox/ImportDoc.vue b/doc/listbox/ImportDoc.vue
index 5baa7b504..35ab19842 100644
--- a/doc/listbox/ImportDoc.vue
+++ b/doc/listbox/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/locale/ImportDoc.vue b/doc/locale/ImportDoc.vue
index 825754891..6f78781ef 100644
--- a/doc/locale/ImportDoc.vue
+++ b/doc/locale/ImportDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/locale/SetLocaleDoc.vue b/doc/locale/SetLocaleDoc.vue
index 15bf70920..f48d01f38 100644
--- a/doc/locale/SetLocaleDoc.vue
+++ b/doc/locale/SetLocaleDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>Second parameter of the use function can be used to initiate the locale during PrimeVue installation.</p>
 
-        <DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 
         <p>The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language application and need to change the language dynamically.</p>
 
-        <DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/megamenu/ImportDoc.vue b/doc/megamenu/ImportDoc.vue
index 060919fdb..cd8e0819c 100644
--- a/doc/megamenu/ImportDoc.vue
+++ b/doc/megamenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/menu/ImportDoc.vue b/doc/menu/ImportDoc.vue
index c8a1a8b99..07349493b 100644
--- a/doc/menu/ImportDoc.vue
+++ b/doc/menu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/menubar/ImportDoc.vue b/doc/menubar/ImportDoc.vue
index e1abda34f..ee28d6089 100644
--- a/doc/menubar/ImportDoc.vue
+++ b/doc/menubar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/message/ImportDoc.vue b/doc/message/ImportDoc.vue
index 6670f1de1..c0420ae9a 100644
--- a/doc/message/ImportDoc.vue
+++ b/doc/message/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/multiselect/AccessibilityDoc.vue b/doc/multiselect/AccessibilityDoc.vue
index 4ceb846dd..76b864138 100644
--- a/doc/multiselect/AccessibilityDoc.vue
+++ b/doc/multiselect/AccessibilityDoc.vue
@@ -16,7 +16,7 @@
 
         <p>Close button uses <i>close</i> key of the <i>aria</i> property from the <NuxtLink to="/locale">locale</NuxtLink> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Closed State Keyboard Support</h3>
         <div class="doc-tablewrapper">
@@ -252,10 +252,10 @@ export default {
         return {
             code: {
                 basic: `
-    <span id="dd1"></span>Options</span>
-    <MultiSelect aria-labelledby="dd1" />
-    
-    <MultiSelect aria-label="Options" />`
+<span id="dd1"></span>Options</span>
+<MultiSelect aria-labelledby="dd1" />
+
+<MultiSelect aria-label="Options" />`
             }
         };
     }
diff --git a/doc/multiselect/ImportDoc.vue b/doc/multiselect/ImportDoc.vue
index 3cf7488c6..1b25891e3 100644
--- a/doc/multiselect/ImportDoc.vue
+++ b/doc/multiselect/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/orderlist/AccessibilityDoc.vue b/doc/orderlist/AccessibilityDoc.vue
index 5e88f9a2f..96ae40094 100644
--- a/doc/orderlist/AccessibilityDoc.vue
+++ b/doc/orderlist/AccessibilityDoc.vue
@@ -11,7 +11,7 @@
             the default <i>aria-label</i> attributes.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>ListBox Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/orderlist/ImportDoc.vue b/doc/orderlist/ImportDoc.vue
index 8b5fa0e6e..6267ebca0 100644
--- a/doc/orderlist/ImportDoc.vue
+++ b/doc/orderlist/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/organizationchart/ImportDoc.vue b/doc/organizationchart/ImportDoc.vue
index 27647fa41..fb8468286 100644
--- a/doc/organizationchart/ImportDoc.vue
+++ b/doc/organizationchart/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/overlaypanel/ImportDoc.vue b/doc/overlaypanel/ImportDoc.vue
index d506fe410..1c118329b 100644
--- a/doc/overlaypanel/ImportDoc.vue
+++ b/doc/overlaypanel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/paginator/ImportDoc.vue b/doc/paginator/ImportDoc.vue
index bbfcadb12..5fe8dca87 100644
--- a/doc/paginator/ImportDoc.vue
+++ b/doc/paginator/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/panel/ImportDoc.vue b/doc/panel/ImportDoc.vue
index 5259e6458..5fcd14f28 100644
--- a/doc/panel/ImportDoc.vue
+++ b/doc/panel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/panelmenu/ImportDoc.vue b/doc/panelmenu/ImportDoc.vue
index d71e331bd..eb3bb5937 100644
--- a/doc/panelmenu/ImportDoc.vue
+++ b/doc/panelmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/password/AccessibilityDoc.vue b/doc/password/AccessibilityDoc.vue
index 39e673595..473beb1a4 100644
--- a/doc/password/AccessibilityDoc.vue
+++ b/doc/password/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             using a section that has <i>aria-live</i> while typing.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/password/ImportDoc.vue b/doc/password/ImportDoc.vue
index 240fdcabc..4973a1cd4 100644
--- a/doc/password/ImportDoc.vue
+++ b/doc/password/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/picklist/AccessibilityDoc.vue b/doc/picklist/AccessibilityDoc.vue
index c655d1fda..5d5ba9d65 100644
--- a/doc/picklist/AccessibilityDoc.vue
+++ b/doc/picklist/AccessibilityDoc.vue
@@ -12,7 +12,7 @@
             <i>moveToSourceProps</i> and <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>ListBox Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/picklist/ImportDoc.vue b/doc/picklist/ImportDoc.vue
index 311d125cc..a2bdb5530 100644
--- a/doc/picklist/ImportDoc.vue
+++ b/doc/picklist/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/progressbar/AccessibilityDoc.vue b/doc/progressbar/AccessibilityDoc.vue
index 18fe1e901..f6b0fd5b0 100644
--- a/doc/progressbar/AccessibilityDoc.vue
+++ b/doc/progressbar/AccessibilityDoc.vue
@@ -6,15 +6,25 @@
             <i>aria-label</i> props.
         </p>
 
-        <pre v-code><code>
-&lt;span id="label_status /"&gt;
-&lt;ProgressBar aria-labelledby="label_status /"&gt;
-
-&lt;ProgressBar aria-label="Status /"&gt;
-
-</code></pre>
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Not applicable.</p>
     </DocSectionText>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<span id="label_status" />
+<ProgressBar aria-labelledby="label_status" />
+
+<ProgressBar aria-label="Status" />`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/progressbar/ImportDoc.vue b/doc/progressbar/ImportDoc.vue
index fa5a16159..0e50f3c08 100644
--- a/doc/progressbar/ImportDoc.vue
+++ b/doc/progressbar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/progressspinner/AccessibilityDoc.vue b/doc/progressspinner/AccessibilityDoc.vue
index d36da397e..927259d77 100644
--- a/doc/progressspinner/AccessibilityDoc.vue
+++ b/doc/progressspinner/AccessibilityDoc.vue
@@ -2,12 +2,22 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>ProgressSpinner components uses <i>progressbar</i> role. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
-        <pre v-code><code>
-&lt;ProgressSpinner aria-label="Loading" /&gt;
-
-</code></pre>
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Component does not include any interactive elements.</p>
     </DocSectionText>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressSpinner aria-label="Loading" />`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/progressspinner/ImportDoc.vue b/doc/progressspinner/ImportDoc.vue
index bd54168be..ddcc0a5fb 100644
--- a/doc/progressspinner/ImportDoc.vue
+++ b/doc/progressspinner/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/radiobutton/AccessibilityDoc.vue b/doc/radiobutton/AccessibilityDoc.vue
index 2f9a99a90..75fd377e6 100644
--- a/doc/radiobutton/AccessibilityDoc.vue
+++ b/doc/radiobutton/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-labelledby</i>, <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/radiobutton/ImportDoc.vue b/doc/radiobutton/ImportDoc.vue
index 29637defe..02170d754 100644
--- a/doc/radiobutton/ImportDoc.vue
+++ b/doc/radiobutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/rating/ImportDoc.vue b/doc/rating/ImportDoc.vue
index 55103788f..7cf90416f 100644
--- a/doc/rating/ImportDoc.vue
+++ b/doc/rating/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/ripple/ConfigurationDoc.vue b/doc/ripple/ConfigurationDoc.vue
index 1440eaa07..7ce984e6f 100644
--- a/doc/ripple/ConfigurationDoc.vue
+++ b/doc/ripple/ConfigurationDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>To start with, Ripple needs to be enabled globally. See the <nuxt-link to="/ripple">Configuration API</nuxt-link> for details.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/ripple/ImportDoc.vue b/doc/ripple/ImportDoc.vue
index aac1427b4..9037e59a0 100644
--- a/doc/ripple/ImportDoc.vue
+++ b/doc/ripple/ImportDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
 
-        <DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 
         <p>Ripple describes how to use it with your own components and standard elements that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
 
-        <DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/scrollpanel/ImportDoc.vue b/doc/scrollpanel/ImportDoc.vue
index 302a87631..bfdd70b54 100644
--- a/doc/scrollpanel/ImportDoc.vue
+++ b/doc/scrollpanel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/scrolltop/ImportDoc.vue b/doc/scrolltop/ImportDoc.vue
index e62f8437b..74fad89b5 100644
--- a/doc/scrolltop/ImportDoc.vue
+++ b/doc/scrolltop/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/selectbutton/ImportDoc.vue b/doc/selectbutton/ImportDoc.vue
index c864944e7..c5137c847 100644
--- a/doc/selectbutton/ImportDoc.vue
+++ b/doc/selectbutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/sidebar/AccessibilityDoc.vue b/doc/sidebar/AccessibilityDoc.vue
index a45caaa3c..84a8d7a2a 100644
--- a/doc/sidebar/AccessibilityDoc.vue
+++ b/doc/sidebar/AccessibilityDoc.vue
@@ -8,7 +8,7 @@
 
         <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Overlay Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/sidebar/ImportDoc.vue b/doc/sidebar/ImportDoc.vue
index 6bc5ddcf6..c77a386e4 100644
--- a/doc/sidebar/ImportDoc.vue
+++ b/doc/sidebar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/skeleton/ImportDoc.vue b/doc/skeleton/ImportDoc.vue
index 869a49a43..2d320d675 100644
--- a/doc/skeleton/ImportDoc.vue
+++ b/doc/skeleton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/slider/AccessibilityDoc.vue b/doc/slider/AccessibilityDoc.vue
index f1879b0c5..305823b63 100644
--- a/doc/slider/AccessibilityDoc.vue
+++ b/doc/slider/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             using <i>aria-labelledby</i> and <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/slider/ImportDoc.vue b/doc/slider/ImportDoc.vue
index 10b24aa86..f79be9df2 100644
--- a/doc/slider/ImportDoc.vue
+++ b/doc/slider/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/speeddial/AccessibilityDoc.vue b/doc/speeddial/AccessibilityDoc.vue
index 0824d9531..816f0eb94 100644
--- a/doc/speeddial/AccessibilityDoc.vue
+++ b/doc/speeddial/AccessibilityDoc.vue
@@ -8,7 +8,7 @@
 
         <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the button.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Menu Button Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/speeddial/ImportDoc.vue b/doc/speeddial/ImportDoc.vue
index c6f406174..1a2b08e43 100644
--- a/doc/speeddial/ImportDoc.vue
+++ b/doc/speeddial/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/splitbutton/AccessibilityDoc.vue b/doc/splitbutton/AccessibilityDoc.vue
index fbde35661..d77fa734c 100644
--- a/doc/splitbutton/AccessibilityDoc.vue
+++ b/doc/splitbutton/AccessibilityDoc.vue
@@ -8,7 +8,7 @@
 
         <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the dropdown button.</p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
         <h3>Main Button Keyboard Support</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">
diff --git a/doc/splitbutton/ImportDoc.vue b/doc/splitbutton/ImportDoc.vue
index 93ea0d200..634c2f3ef 100644
--- a/doc/splitbutton/ImportDoc.vue
+++ b/doc/splitbutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/splitter/ImportDoc.vue b/doc/splitter/ImportDoc.vue
index c4c554cd6..ba83331b9 100644
--- a/doc/splitter/ImportDoc.vue
+++ b/doc/splitter/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/steps/ImportDoc.vue b/doc/steps/ImportDoc.vue
index a210afa3d..84ea854bd 100644
--- a/doc/steps/ImportDoc.vue
+++ b/doc/steps/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/styleclass/ImportDoc.vue b/doc/styleclass/ImportDoc.vue
index f120d0c5f..4516522fd 100644
--- a/doc/styleclass/ImportDoc.vue
+++ b/doc/styleclass/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tabmenu/ImportDoc.vue b/doc/tabmenu/ImportDoc.vue
index cd356ce8c..ff9dd3572 100644
--- a/doc/tabmenu/ImportDoc.vue
+++ b/doc/tabmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tabview/ImportDoc.vue b/doc/tabview/ImportDoc.vue
index 6b13ce389..c90e378e5 100644
--- a/doc/tabview/ImportDoc.vue
+++ b/doc/tabview/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tag/ImportDoc.vue b/doc/tag/ImportDoc.vue
index 8ad519f89..142a96e46 100644
--- a/doc/tag/ImportDoc.vue
+++ b/doc/tag/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/terminal/ImportDoc.vue b/doc/terminal/ImportDoc.vue
index 9605d251e..797be8a05 100644
--- a/doc/terminal/ImportDoc.vue
+++ b/doc/terminal/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/textarea/AccessibilityDoc.vue b/doc/textarea/AccessibilityDoc.vue
index 86ffa609e..ad9f05280 100644
--- a/doc/textarea/AccessibilityDoc.vue
+++ b/doc/textarea/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/textarea/ImportDoc.vue b/doc/textarea/ImportDoc.vue
index 501699cdf..8d8a5d3ef 100644
--- a/doc/textarea/ImportDoc.vue
+++ b/doc/textarea/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/PrimeFlexDoc.vue b/doc/theming/PrimeFlexDoc.vue
index 95597b983..65fdb2a28 100644
--- a/doc/theming/PrimeFlexDoc.vue
+++ b/doc/theming/PrimeFlexDoc.vue
@@ -13,7 +13,7 @@
         <Button type="button" label="Button 2" class="p-button-secondary mb-3 md:mb-0"></Button>
         <Button type="button" label="Button 3" class="p-button-help"></Button>
     </div>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/ScaleDoc.vue b/doc/theming/ScaleDoc.vue
index c6f5b279f..018843b6d 100644
--- a/doc/theming/ScaleDoc.vue
+++ b/doc/theming/ScaleDoc.vue
@@ -5,7 +5,7 @@
             Code below sets the scale of the components based on <i>16px</i>. If you reqire bigger or smaller components, just change this variable and components will scale accordingly.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/ScopedStylingDoc.vue b/doc/theming/ScopedStylingDoc.vue
index 9a9bdc8e3..a973b4fb2 100644
--- a/doc/theming/ScopedStylingDoc.vue
+++ b/doc/theming/ScopedStylingDoc.vue
@@ -13,8 +13,8 @@
             </p>
         </Panel>
     </div>
-    <DocSectionCode :code="code1" hideToggleCode import hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/ThemesDoc.vue b/doc/theming/ThemesDoc.vue
index 6c29e994a..de81a436c 100644
--- a/doc/theming/ThemesDoc.vue
+++ b/doc/theming/ThemesDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>PrimeVue ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz codeClassName="h-20rem overflow-auto" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz codeClassName="h-20rem overflow-auto" />
 </template>
 
 <script>
diff --git a/doc/tieredmenu/ImportDoc.vue b/doc/tieredmenu/ImportDoc.vue
index 547ba6fbf..3dfc9c36c 100644
--- a/doc/tieredmenu/ImportDoc.vue
+++ b/doc/tieredmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/timeline/ImportDoc.vue b/doc/timeline/ImportDoc.vue
index feee83b2c..54b0e10e4 100644
--- a/doc/timeline/ImportDoc.vue
+++ b/doc/timeline/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/toast/ImportDoc.vue b/doc/toast/ImportDoc.vue
index a838f3c6a..79187ed63 100644
--- a/doc/toast/ImportDoc.vue
+++ b/doc/toast/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index 2d738f50f..06b2c3c61 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application instance is created.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/togglebutton/AccessibilityDoc.vue b/doc/togglebutton/AccessibilityDoc.vue
index 3fe1cc9c3..5b60891f2 100644
--- a/doc/togglebutton/AccessibilityDoc.vue
+++ b/doc/togglebutton/AccessibilityDoc.vue
@@ -7,7 +7,7 @@
             that does not change related to state.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
diff --git a/doc/togglebutton/ImportDoc.vue b/doc/togglebutton/ImportDoc.vue
index 5c08e4c28..a535d1525 100644
--- a/doc/togglebutton/ImportDoc.vue
+++ b/doc/togglebutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/toolbar/ImportDoc.vue b/doc/toolbar/ImportDoc.vue
index bd6970a1e..aa2c68fba 100644
--- a/doc/toolbar/ImportDoc.vue
+++ b/doc/toolbar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tooltip/ImportDoc.vue b/doc/tooltip/ImportDoc.vue
index fb9b2ed34..81a535934 100644
--- a/doc/tooltip/ImportDoc.vue
+++ b/doc/tooltip/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tree/ImportDoc.vue b/doc/tree/ImportDoc.vue
index a17098b61..d9e6ec192 100644
--- a/doc/tree/ImportDoc.vue
+++ b/doc/tree/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/treeselect/AccessibilityDoc.vue b/doc/treeselect/AccessibilityDoc.vue
index 3e691824a..9119535f0 100644
--- a/doc/treeselect/AccessibilityDoc.vue
+++ b/doc/treeselect/AccessibilityDoc.vue
@@ -11,7 +11,7 @@
             are used instead for readers and keyboard support. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each
             treeitem.
         </p>
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Closed State Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/treeselect/CheckboxDoc.vue b/doc/treeselect/CheckboxDoc.vue
index d79f2e75d..7b343c1fb 100644
--- a/doc/treeselect/CheckboxDoc.vue
+++ b/doc/treeselect/CheckboxDoc.vue
@@ -6,7 +6,7 @@
             selection.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="activeNodes" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+    <DocSectionCode :code="activeNodes" hideToggleCode importCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Items" class="md:w-20rem w-full" />
     </div>
diff --git a/doc/treeselect/ImportDoc.vue b/doc/treeselect/ImportDoc.vue
index 02e175623..ccffcb56b 100644
--- a/doc/treeselect/ImportDoc.vue
+++ b/doc/treeselect/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/treeselect/MultipleDoc.vue b/doc/treeselect/MultipleDoc.vue
index 6484971b4..96f8f0151 100644
--- a/doc/treeselect/MultipleDoc.vue
+++ b/doc/treeselect/MultipleDoc.vue
@@ -6,7 +6,7 @@
         </p>
         <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
     </DocSectionText>
-    <DocSectionCode :code="activeNodes" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+    <DocSectionCode :code="activeNodes" hideToggleCode importCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Items" class="md:w-20rem w-full" />
     </div>
diff --git a/doc/treetable/ImportDoc.vue b/doc/treetable/ImportDoc.vue
index cf78341a2..97ef31218 100644
--- a/doc/treetable/ImportDoc.vue
+++ b/doc/treetable/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
index 12fe72da9..6bcd249dd 100644
--- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -3,7 +3,7 @@
         <p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
         <p>In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.</p>
     </DocSectionText>
-    <DocSectionCode :code="introCode" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="introCode" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/tristatecheckbox/AccessibilityDoc.vue b/doc/tristatecheckbox/AccessibilityDoc.vue
index 8396c24f7..7b80e8d81 100644
--- a/doc/tristatecheckbox/AccessibilityDoc.vue
+++ b/doc/tristatecheckbox/AccessibilityDoc.vue
@@ -4,9 +4,9 @@
         <p>
             TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with <i>aria-live</i> attribute
             that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i> property from the
-            <router-link to="/locale">locale</router-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
+            <NuxtLink to="/locale">locale</NuxtLink> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
         </p>
-        <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/tristatecheckbox/ImportDoc.vue b/doc/tristatecheckbox/ImportDoc.vue
index 1f4edff78..41eb9a191 100644
--- a/doc/tristatecheckbox/ImportDoc.vue
+++ b/doc/tristatecheckbox/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/virtualscroller/ImportDoc.vue b/doc/virtualscroller/ImportDoc.vue
index ef3c7b43f..04ff0feae 100644
--- a/doc/virtualscroller/ImportDoc.vue
+++ b/doc/virtualscroller/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
diff --git a/layouts/doc/DocSectionCode.vue b/layouts/doc/DocSectionCode.vue
index 89be6a894..26d6094db 100644
--- a/layouts/doc/DocSectionCode.vue
+++ b/layouts/doc/DocSectionCode.vue
@@ -72,7 +72,14 @@
             ></Button>
         </div>
 
-        <template v-if="codeMode === 'basic'">
+        <template v-if="codeMode === 'basic' && importCode">
+            <pre v-code.script><code>
+{{ code.basic }}
+
+</code></pre>
+        </template>
+
+        <template v-if="codeMode === 'basic' && !importCode">
             <pre v-code><code>
 {{ code.basic }}
 
@@ -139,6 +146,10 @@ export default {
         extFiles: {
             type: null,
             default: null
+        },
+        importCode: {
+            type: Boolean,
+            default: false
         }
     },
     data() {