diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index f0411d7f2..b560a5221 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -18,16 +18,6 @@
                 </button>
             </template>
 
-            <template v-if="!hideCodeSandbox">
-                <button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
-                    <svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
-                        <path
-                            d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
-                        />
-                    </svg>
-                </button>
-            </template>
-
             <template v-if="!hideStackBlitz">
                 <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
                     <svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
@@ -72,7 +62,7 @@
 </template>
 
 <script>
-import { useCodeSandbox, useStackBlitz } from './codeeditor';
+import { useStackBlitz } from './codeeditor';
 
 export default {
     inheritAttrs: false,
@@ -91,7 +81,7 @@ export default {
         },
         hideCodeSandbox: {
             type: Boolean,
-            default: false
+            default: true
         },
         hideStackBlitz: {
             type: Boolean,
@@ -142,9 +132,6 @@ export default {
         async copyCode() {
             await navigator.clipboard.writeText(this.code[this.codeLang]);
         },
-        showCodesandbox() {
-            useCodeSandbox(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
-        },
         showStackblitz() {
             useStackBlitz(this.codeLang, this.code[this.codeLang === 'data' ? 'options' : this.codeLang], this.service, this.code.pages, this.dependencies, this.component, this.extFiles);
         }
diff --git a/doc/accordion/ImportDoc.vue b/doc/accordion/ImportDoc.vue
index 2f839980f..bf8c22fd3 100644
--- a/doc/accordion/ImportDoc.vue
+++ b/doc/accordion/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/animateonscroll/ImportDoc.vue b/doc/animateonscroll/ImportDoc.vue
index ec1b5620a..036587607 100644
--- a/doc/animateonscroll/ImportDoc.vue
+++ b/doc/animateonscroll/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -10,7 +10,7 @@ export default {
             code: {
                 basic: `
 import AnimateOnScroll from 'primevue/animateonscroll';
-                
+
 app.directive('animateonscroll', AnimateOnScroll);
 `
             }
diff --git a/doc/autocomplete/AccessibilityDoc.vue b/doc/autocomplete/AccessibilityDoc.vue
index 28257f832..2171f52e5 100644
--- a/doc/autocomplete/AccessibilityDoc.vue
+++ b/doc/autocomplete/AccessibilityDoc.vue
@@ -12,7 +12,7 @@
             element.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 60f864b82..5b15f713b 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/autoimport/OverviewDoc.vue b/doc/autoimport/OverviewDoc.vue
index da7dfc596..8019a8c7a 100644
--- a/doc/autoimport/OverviewDoc.vue
+++ b/doc/autoimport/OverviewDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/autoimport/UnpluginDoc.vue b/doc/autoimport/UnpluginDoc.vue
index ed7a99885..b4e64aa15 100644
--- a/doc/autoimport/UnpluginDoc.vue
+++ b/doc/autoimport/UnpluginDoc.vue
@@ -4,14 +4,14 @@
             The <a href="https://github.com/unplugin/unplugin-vue-components" target="_blank" rel="noopener noreferrer">unplugin-vue-components</a> library can automatically import and register PrimeVue components with the built-in resolver. Let's
             begin with installing the library.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>Next step would be adding the <i>PrimeVueResolver</i> at vite.config using the <i>Components</i> plugin.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
         <p>
             That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the
             <a href="https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#configuration" target="_blank" rel="noopener noreferrer">official documentation</a>.
         </p>
-        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/avatar/ImportDoc.vue b/doc/avatar/ImportDoc.vue
index a33086bfe..efe8f6619 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/badge/ImportDoc.vue b/doc/badge/ImportDoc.vue
index ea98142d1..c1d89f28c 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/blockui/ImportDoc.vue b/doc/blockui/ImportDoc.vue
index a84efc319..07a04631d 100644
--- a/doc/blockui/ImportDoc.vue
+++ b/doc/blockui/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/breadcrumb/ImportDoc.vue b/doc/breadcrumb/ImportDoc.vue
index 1d98d9796..201dc0bbf 100644
--- a/doc/breadcrumb/ImportDoc.vue
+++ b/doc/breadcrumb/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/breadcrumb/RouterDoc.vue b/doc/breadcrumb/RouterDoc.vue
index c242a6da8..dcb6ac50d 100644
--- a/doc/breadcrumb/RouterDoc.vue
+++ b/doc/breadcrumb/RouterDoc.vue
@@ -17,7 +17,7 @@
             </template>
         </Breadcrumb>
     </div>
-    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" hideStackBlitz />
 </template>
 
 <script>
@@ -73,8 +73,8 @@ export default {
                 route: '/introduction'
             },
             items: [
-                { label: 'Components' }, 
-                { label: 'Form' }, 
+                { label: 'Components' },
+                { label: 'Form' },
                 { label: 'InputText', route: '/inputtext' }
             ]
         }
@@ -109,8 +109,8 @@ const home = ref({
     route: '/introduction'
 });
 const items = ref([
-    { label: 'Components' }, 
-    { label: 'Form' }, 
+    { label: 'Components' },
+    { label: 'Form' },
     { label: 'InputText', route: '/inputtext' }
 ]);
 <\/script>
diff --git a/doc/button/AccessibilityDoc.vue b/doc/button/AccessibilityDoc.vue
index a30e28e1a..c3f9a4efb 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 e78448a6d..9518ba9ba 100644
--- a/doc/button/ImportDoc.vue
+++ b/doc/button/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/calendar/AccessibilityDoc.vue b/doc/calendar/AccessibilityDoc.vue
index 54d1cd345..a1449d556 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 8561631cf..8e80ca9eb 100644
--- a/doc/calendar/ImportDoc.vue
+++ b/doc/calendar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/card/AccessibilityDoc.vue b/doc/card/AccessibilityDoc.vue
index 513400c3a..1792991fc 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 4837420d5..853997255 100644
--- a/doc/card/ImportDoc.vue
+++ b/doc/card/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/carousel/ImportDoc.vue b/doc/carousel/ImportDoc.vue
index 31ce36cd1..406de0295 100644
--- a/doc/carousel/ImportDoc.vue
+++ b/doc/carousel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cascadeselect/AccessibilityDoc.vue b/doc/cascadeselect/AccessibilityDoc.vue
index 9083174dc..5625edb0b 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 3b078fb3b..de8dc8ffa 100644
--- a/doc/cascadeselect/ImportDoc.vue
+++ b/doc/cascadeselect/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cdn/ComponentDoc.vue b/doc/cdn/ComponentDoc.vue
index 479acad80..f6ce855e6 100644
--- a/doc/cdn/ComponentDoc.vue
+++ b/doc/cdn/ComponentDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Include the component to use with a script tag.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cdn/CreateAppDoc.vue b/doc/cdn/CreateAppDoc.vue
index 00c9cfa58..e749b626a 100644
--- a/doc/cdn/CreateAppDoc.vue
+++ b/doc/cdn/CreateAppDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Create an app container element and setup the application using <i>createApp</i>.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cdn/ExampleDoc.vue b/doc/cdn/ExampleDoc.vue
index 961799ca3..6ea82ace1 100644
--- a/doc/cdn/ExampleDoc.vue
+++ b/doc/cdn/ExampleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A complete example using a PrimeVue DatePicker. You can also view this sample live at <a href="https://stackblitz.com/edit/web-platform-xceybs?file=index.html" target="_blank" rel="noopener noreferrer">Stackblitz</a>.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cdn/PluginDoc.vue b/doc/cdn/PluginDoc.vue
index ab0a8ebff..8c0a7bfe1 100644
--- a/doc/cdn/PluginDoc.vue
+++ b/doc/cdn/PluginDoc.vue
@@ -5,7 +5,7 @@
             application.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cdn/ScriptDoc.vue b/doc/cdn/ScriptDoc.vue
index 289e1ed06..d388f40e7 100644
--- a/doc/cdn/ScriptDoc.vue
+++ b/doc/cdn/ScriptDoc.vue
@@ -6,7 +6,7 @@
             <a href="https://cdnjs.com" target="_blank" rel="noopener noreferrer">cdnjs</a> can also be used.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/cdn/ThemingDoc.vue b/doc/cdn/ThemingDoc.vue
index 408aa97cf..1139aaf4a 100644
--- a/doc/cdn/ThemingDoc.vue
+++ b/doc/cdn/ThemingDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Include the theme file with a link element, see <NuxtLink to="/theming/#themes">themes</NuxtLink> section for the complete list of available themes to choose from.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chart/AccessibilityDoc.vue b/doc/chart/AccessibilityDoc.vue
index 1d070f8fa..eb352a2a3 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
     </DocSectionText>
 </template>
 
diff --git a/doc/chart/ChartJSDoc.vue b/doc/chart/ChartJSDoc.vue
index 90fe0a951..6f1d2f184 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chart/ImportDoc.vue b/doc/chart/ImportDoc.vue
index 45149eca6..7d2246d36 100644
--- a/doc/chart/ImportDoc.vue
+++ b/doc/chart/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/checkbox/AccessibilityDoc.vue b/doc/checkbox/AccessibilityDoc.vue
index 211deacb1..85e63a2bd 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 f66e200b5..26691ee9a 100644
--- a/doc/checkbox/ImportDoc.vue
+++ b/doc/checkbox/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chip/ImportDoc.vue b/doc/chip/ImportDoc.vue
index 60dd18517..a451d2c60 100644
--- a/doc/chip/ImportDoc.vue
+++ b/doc/chip/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/chips/AccessibilityDoc.vue b/doc/chips/AccessibilityDoc.vue
index 34189f29b..2e04cdeac 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 bd72e5f07..9af9410ec 100644
--- a/doc/chips/ImportDoc.vue
+++ b/doc/chips/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/colorpicker/ImportDoc.vue b/doc/colorpicker/ImportDoc.vue
index 1957bb6a8..7429452a6 100644
--- a/doc/colorpicker/ImportDoc.vue
+++ b/doc/colorpicker/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/colors/OverviewDoc.vue b/doc/colors/OverviewDoc.vue
index 621fa530d..ee5870bda 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/ImportDoc.vue b/doc/configuration/ImportDoc.vue
index cc700f5c4..249876e76 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/InputStyleDoc.vue b/doc/configuration/InputStyleDoc.vue
index 4ffe9817b..80c9b5c19 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/PTDoc.vue b/doc/configuration/PTDoc.vue
index 689d35b82..5a56f3e91 100644
--- a/doc/configuration/PTDoc.vue
+++ b/doc/configuration/PTDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Defines the shared pass through properties per component type. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -15,12 +15,12 @@ import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { 
+app.use(PrimeVue, {
     pt: {
         slider: {
             handle: { class: 'bg-primary' }
         }
-    } 
+    }
 });
 `
             }
diff --git a/doc/configuration/PTOptionsDoc.vue b/doc/configuration/PTOptionsDoc.vue
index 75e0a0117..fa51559fd 100644
--- a/doc/configuration/PTOptionsDoc.vue
+++ b/doc/configuration/PTOptionsDoc.vue
@@ -5,7 +5,7 @@
             to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and <i>false</i> for <i>mergeProps</i>. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -22,7 +22,7 @@ app.use(PrimeVue, {
     ptOptions: {
         mergeSections: true,
         mergeProps: false
-    } 
+    }
 });
 `
             }
diff --git a/doc/configuration/RippleDoc.vue b/doc/configuration/RippleDoc.vue
index 9725971de..965877893 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 importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/configuration/UnstyledDoc.vue b/doc/configuration/UnstyledDoc.vue
index 3a2e24933..c795cd06f 100644
--- a/doc/configuration/UnstyledDoc.vue
+++ b/doc/configuration/UnstyledDoc.vue
@@ -5,7 +5,7 @@
             <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/configuration/ZIndexDoc.vue b/doc/configuration/ZIndexDoc.vue
index 9bd86e2f5..ad2e1ff39 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/csp/NonceDoc.vue b/doc/configuration/csp/NonceDoc.vue
index ad594d13b..b5d739f0d 100644
--- a/doc/configuration/csp/NonceDoc.vue
+++ b/doc/configuration/csp/NonceDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">nonce</a> value to use on dynamically generated style elements in core.</p>
 
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/configuration/locale/ImportDoc.vue b/doc/configuration/locale/ImportDoc.vue
index 6f78781ef..c6e1c3886 100644
--- a/doc/configuration/locale/ImportDoc.vue
+++ b/doc/configuration/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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/configuration/locale/SetLocaleDoc.vue b/doc/configuration/locale/SetLocaleDoc.vue
index cce74b3e0..2aa2e7e3e 100644
--- a/doc/configuration/locale/SetLocaleDoc.vue
+++ b/doc/configuration/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 importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode 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 importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/confirmdialog/AccessibilityDoc.vue b/doc/confirmdialog/AccessibilityDoc.vue
index 40ba80f6d..ebdb428f9 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
-        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code2" hideToggleCode 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 e5a8935e2..7f5eeee0e 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
     <div class="doc-section-description">
         <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
     </div>
-    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/confirmdialog/ImportDoc.vue b/doc/confirmdialog/ImportDoc.vue
index cc4e72fea..85c50e88e 100644
--- a/doc/confirmdialog/ImportDoc.vue
+++ b/doc/confirmdialog/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/confirmpopup/AccessibilityDoc.vue b/doc/confirmpopup/AccessibilityDoc.vue
index 0ded5e1ed..de059239d 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, ConfirmPopup 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
-        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code2" hideToggleCode 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 557dadcbc..ed87bc88a 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
     <div class="doc-section-description">
         <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
     </div>
-    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/confirmpopup/ImportDoc.vue b/doc/confirmpopup/ImportDoc.vue
index cd1f9cbf4..efdcb08f7 100644
--- a/doc/confirmpopup/ImportDoc.vue
+++ b/doc/confirmpopup/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/contextmenu/ImportDoc.vue b/doc/contextmenu/ImportDoc.vue
index 03bfd8ed0..61db50a6d 100644
--- a/doc/contextmenu/ImportDoc.vue
+++ b/doc/contextmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index be58280e6..03d5577b8 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -30,7 +30,7 @@
             </template>
         </ContextMenu>
     </div>
-    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/csslayer/BootstrapDoc.vue b/doc/csslayer/BootstrapDoc.vue
index f7a72559f..792b3f45e 100644
--- a/doc/csslayer/BootstrapDoc.vue
+++ b/doc/csslayer/BootstrapDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.</p>
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/csslayer/NormalizeDoc.vue b/doc/csslayer/NormalizeDoc.vue
index 383808906..644230f57 100644
--- a/doc/csslayer/NormalizeDoc.vue
+++ b/doc/csslayer/NormalizeDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.</p>
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/csslayer/ResetDoc.vue b/doc/csslayer/ResetDoc.vue
index 25bf46f4e..40e8385c8 100644
--- a/doc/csslayer/ResetDoc.vue
+++ b/doc/csslayer/ResetDoc.vue
@@ -5,7 +5,7 @@
             override the PrimeVue components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice is
             wrapping your CSS in a layer like <i>reset</i> and make sure <i>primevue</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeVue components.
         </p>
-        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
         <p>If you are using Nuxt, use the built-in <i>cssLayerOrder</i> property of the PrimeVue nuxt module instead.</p>
     </DocSectionText>
 </template>
diff --git a/doc/csslayer/SpecificityDoc.vue b/doc/csslayer/SpecificityDoc.vue
index c955972fe..e0ab7f535 100644
--- a/doc/csslayer/SpecificityDoc.vue
+++ b/doc/csslayer/SpecificityDoc.vue
@@ -14,7 +14,7 @@
         <div class="card flex justify-content-center">
             <InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
         </div>
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
         <p>Layers also make it possible to use CSS Modules, view the <NuxtLink to="/theming/#cssmodules">CSS Modules</NuxtLink> guide for examples.</p>
     </DocSectionText>
 </template>
diff --git a/doc/csslayer/TailwindDoc.vue b/doc/csslayer/TailwindDoc.vue
index 355af39b5..21ff2bc95 100644
--- a/doc/csslayer/TailwindDoc.vue
+++ b/doc/csslayer/TailwindDoc.vue
@@ -4,7 +4,7 @@
             Tailwind CSS includes a reset utility in base called <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a>. If you are using this feature, wrap the base and utilities in separate layers
             and make sure primevue layer comes after the base.
         </p>
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/customicons/FontAwesomeDoc.vue b/doc/customicons/FontAwesomeDoc.vue
index b4afeb510..2d545a42d 100644
--- a/doc/customicons/FontAwesomeDoc.vue
+++ b/doc/customicons/FontAwesomeDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/customicons/ImageDoc.vue b/doc/customicons/ImageDoc.vue
index 388f21f8e..a47665f56 100644
--- a/doc/customicons/ImageDoc.vue
+++ b/doc/customicons/ImageDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Any type of image can be used as an icon.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/customicons/MaterialDoc.vue b/doc/customicons/MaterialDoc.vue
index 5fb4e1cbb..16edc6015 100644
--- a/doc/customicons/MaterialDoc.vue
+++ b/doc/customicons/MaterialDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/customicons/SVGDoc.vue b/doc/customicons/SVGDoc.vue
index ae394a08c..13b4557f7 100644
--- a/doc/customicons/SVGDoc.vue
+++ b/doc/customicons/SVGDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Inline SVGs are embedded inside the dom.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/datatable/ImportDoc.vue b/doc/datatable/ImportDoc.vue
index d8cb701e2..f1800e604 100644
--- a/doc/datatable/ImportDoc.vue
+++ b/doc/datatable/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dataview/ImportDoc.vue b/doc/dataview/ImportDoc.vue
index cb88470bf..84539ad17 100644
--- a/doc/dataview/ImportDoc.vue
+++ b/doc/dataview/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/deferredcontent/AccessibilityDoc.vue b/doc/deferredcontent/AccessibilityDoc.vue
index 112efe708..79ccb4967 100644
--- a/doc/deferredcontent/AccessibilityDoc.vue
+++ b/doc/deferredcontent/AccessibilityDoc.vue
@@ -5,7 +5,7 @@
             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>
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Component does not include any interactive elements.</p>
diff --git a/doc/deferredcontent/ImportDoc.vue b/doc/deferredcontent/ImportDoc.vue
index cc9046b0c..b80368549 100644
--- a/doc/deferredcontent/ImportDoc.vue
+++ b/doc/deferredcontent/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dialog/AccessibilityDoc.vue b/doc/dialog/AccessibilityDoc.vue
index b6782fa20..ef9b0ca3e 100644
--- a/doc/dialog/AccessibilityDoc.vue
+++ b/doc/dialog/AccessibilityDoc.vue
@@ -11,7 +11,7 @@
             element and override the default <i>aria-label</i>.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 2896cc972..9ba13f80c 100644
--- a/doc/dialog/ImportDoc.vue
+++ b/doc/dialog/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/divider/ImportDoc.vue b/doc/divider/ImportDoc.vue
index 8199ce49f..ed986827d 100644
--- a/doc/divider/ImportDoc.vue
+++ b/doc/divider/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dock/ImportDoc.vue b/doc/dock/ImportDoc.vue
index 8956bb04d..6f75f4c52 100644
--- a/doc/dock/ImportDoc.vue
+++ b/doc/dock/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dropdown/AccessibilityDoc.vue b/doc/dropdown/AccessibilityDoc.vue
index 4316ccd53..93d97de4a 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 7d6d94424..0a05279a1 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/CloseDialogDoc.vue b/doc/dynamicdialog/CloseDialogDoc.vue
index c4908a75f..372e5dec2 100644
--- a/doc/dynamicdialog/CloseDialogDoc.vue
+++ b/doc/dynamicdialog/CloseDialogDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>close</i> function is available through a <i>dialogRef</i> that is injected to the component loaded by the dialog.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/CustomizationDoc.vue b/doc/dynamicdialog/CustomizationDoc.vue
index 420aa3af7..47a159ad5 100644
--- a/doc/dynamicdialog/CustomizationDoc.vue
+++ b/doc/dynamicdialog/CustomizationDoc.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 about the available props.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index 503254006..94c5564ac 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p>
-        <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
         <p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
         <p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p>
-        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/dynamicdialog/EventsDoc.vue b/doc/dynamicdialog/EventsDoc.vue
index 59dc572f9..dfad1d978 100644
--- a/doc/dynamicdialog/EventsDoc.vue
+++ b/doc/dynamicdialog/EventsDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>emits</i> object defines callbacks to handle events emitted by the component within the Dialog.</p>
 
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/dynamicdialog/ImportDoc.vue b/doc/dynamicdialog/ImportDoc.vue
index 6c1e66a18..e7e2d515d 100644
--- a/doc/dynamicdialog/ImportDoc.vue
+++ b/doc/dynamicdialog/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/dynamicdialog/OpenDialogDoc.vue b/doc/dynamicdialog/OpenDialogDoc.vue
index 882da2f51..503078c33 100644
--- a/doc/dynamicdialog/OpenDialogDoc.vue
+++ b/doc/dynamicdialog/OpenDialogDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
         <p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/dynamicdialog/PassingDataDoc.vue b/doc/dynamicdialog/PassingDataDoc.vue
index 8a70cd898..642c7e5b1 100644
--- a/doc/dynamicdialog/PassingDataDoc.vue
+++ b/doc/dynamicdialog/PassingDataDoc.vue
@@ -2,12 +2,12 @@
     <DocSectionText v-bind="$attrs">
         <p>Use the <i>data</i> property to pass parameters when opening a Dialog, the internal component can later access this data using <i>dialogRef</i>.</p>
 
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
 
         <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback.</p>
-        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
index 747dd696d..f8174c51f 100644
--- a/doc/dynamicdialog/pt/PTDoc.vue
+++ b/doc/dynamicdialog/pt/PTDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/editor/ImportDoc.vue b/doc/editor/ImportDoc.vue
index 8a776cd52..d4c3c4d74 100644
--- a/doc/editor/ImportDoc.vue
+++ b/doc/editor/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/editor/QuillDoc.vue b/doc/editor/QuillDoc.vue
index ebb74cfd9..b76a4c4fa 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/fieldset/ImportDoc.vue b/doc/fieldset/ImportDoc.vue
index 25872c23e..a375a6171 100644
--- a/doc/fieldset/ImportDoc.vue
+++ b/doc/fieldset/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/fileupload/ImportDoc.vue b/doc/fileupload/ImportDoc.vue
index 40cdfddf5..adf897abe 100644
--- a/doc/fileupload/ImportDoc.vue
+++ b/doc/fileupload/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/filterservice/CustomConstraintDoc.vue b/doc/filterservice/CustomConstraintDoc.vue
index a5e0478ee..8f190271f 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -19,7 +19,7 @@ FilterService.register('isPrimeNumber', (value, filter): boolean => {
     if (value === undefined || value === null) {
         return false;
     }
-    
+
     return value.toString() === filter.toString();
 });
 
diff --git a/doc/filterservice/ImportDoc.vue b/doc/filterservice/ImportDoc.vue
index 726c2577a..5cc223791 100644
--- a/doc/filterservice/ImportDoc.vue
+++ b/doc/filterservice/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/filterservice/UsageDoc.vue b/doc/filterservice/UsageDoc.vue
index 92e467c07..1c7e975be 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/focustrap/ImportDoc.vue b/doc/focustrap/ImportDoc.vue
index b748259cd..7f3241190 100644
--- a/doc/focustrap/ImportDoc.vue
+++ b/doc/focustrap/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/galleria/ImportDoc.vue b/doc/galleria/ImportDoc.vue
index ecc1620aa..30b4d7ce0 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/BasicDoc.vue b/doc/icons/BasicDoc.vue
index 0b217e07f..6661cfe6f 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/ColorDoc.vue b/doc/icons/ColorDoc.vue
index 46bf73376..e14ea2a06 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/ConstantsDoc.vue b/doc/icons/ConstantsDoc.vue
index 25c48147a..77ef70649 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/DownloadDoc.vue b/doc/icons/DownloadDoc.vue
index e6f22d7a5..1f4138a25 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/ImportDoc.vue b/doc/icons/ImportDoc.vue
index bb90535c0..e8195d598 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 <i>styles.scss</i> of your application.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/SizeDoc.vue b/doc/icons/SizeDoc.vue
index e1d88f5ea..0dd8b5a60 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/icons/SpinDoc.vue b/doc/icons/SpinDoc.vue
index 6c4e686b8..d25a255ce 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/image/ImportDoc.vue b/doc/image/ImportDoc.vue
index 05627211e..d8edd4cd3 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inlinemessage/ImportDoc.vue b/doc/inlinemessage/ImportDoc.vue
index e9dac9dcd..12c2dd63c 100644
--- a/doc/inlinemessage/ImportDoc.vue
+++ b/doc/inlinemessage/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inplace/ImportDoc.vue b/doc/inplace/ImportDoc.vue
index e350b493f..2bac32b80 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputgroup/ImportDoc.vue b/doc/inputgroup/ImportDoc.vue
index a360d0dc4..34b5654a9 100644
--- a/doc/inputgroup/ImportDoc.vue
+++ b/doc/inputgroup/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputmask/AccessibilityDoc.vue b/doc/inputmask/AccessibilityDoc.vue
index 8151c7a03..b7bb6740c 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 a1de97e22..a804ea8b4 100644
--- a/doc/inputmask/ImportDoc.vue
+++ b/doc/inputmask/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputnumber/AccessibilityDoc.vue b/doc/inputnumber/AccessibilityDoc.vue
index ee18eeb3f..a798bc152 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 8f5ae5270..b66202310 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputswitch/AccessibilityDoc.vue b/doc/inputswitch/AccessibilityDoc.vue
index 1ee413ae5..a7df07ae1 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 e955216a4..d4ce239e7 100644
--- a/doc/inputswitch/ImportDoc.vue
+++ b/doc/inputswitch/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/inputtext/AccessibilityDoc.vue b/doc/inputtext/AccessibilityDoc.vue
index e1abdc2e3..f983c8af6 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 1f5748f9b..c17eaa393 100644
--- a/doc/inputtext/ImportDoc.vue
+++ b/doc/inputtext/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/knob/AccessibilityDoc.vue b/doc/knob/AccessibilityDoc.vue
index aa1812120..bb91d3b2e 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 5224140d4..0e19e0664 100644
--- a/doc/knob/ImportDoc.vue
+++ b/doc/knob/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/listbox/AccessibilityDoc.vue b/doc/listbox/AccessibilityDoc.vue
index 5010d0b5f..775219328 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 5f6086a0f..66f60f8af 100644
--- a/doc/listbox/ImportDoc.vue
+++ b/doc/listbox/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/megamenu/CommandDoc.vue b/doc/megamenu/CommandDoc.vue
index 9d30ee141..32c099f53 100644
--- a/doc/megamenu/CommandDoc.vue
+++ b/doc/megamenu/CommandDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>command</i> property of a menuitem defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/megamenu/ImportDoc.vue b/doc/megamenu/ImportDoc.vue
index 1d6de5f2b..0dd5cf79f 100644
--- a/doc/megamenu/ImportDoc.vue
+++ b/doc/megamenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
index c95160f37..958cab815 100644
--- a/doc/megamenu/RouterDoc.vue
+++ b/doc/megamenu/RouterDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/menu/ImportDoc.vue b/doc/menu/ImportDoc.vue
index 4f4330da5..7728b4830 100644
--- a/doc/menu/ImportDoc.vue
+++ b/doc/menu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index 0f6b6c172..3d9d2f7b0 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -18,7 +18,7 @@
             </template>
         </Menu>
     </div>
-    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/menubar/ImportDoc.vue b/doc/menubar/ImportDoc.vue
index 9c343cde5..03e41bb8c 100644
--- a/doc/menubar/ImportDoc.vue
+++ b/doc/menubar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index 83dbc1dc8..6f18c15f3 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -19,7 +19,7 @@
             </template>
         </Menubar>
     </div>
-    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/message/ImportDoc.vue b/doc/message/ImportDoc.vue
index 71ebec070..642a1d845 100644
--- a/doc/message/ImportDoc.vue
+++ b/doc/message/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/metergroup/ImportDoc.vue b/doc/metergroup/ImportDoc.vue
index 6000b25b8..0994d4f81 100644
--- a/doc/metergroup/ImportDoc.vue
+++ b/doc/metergroup/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/multiselect/AccessibilityDoc.vue b/doc/multiselect/AccessibilityDoc.vue
index b670728b2..3d4a1bade 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="/configuration/#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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
 
         <h3>Closed State Keyboard Support</h3>
         <div class="doc-tablewrapper">
diff --git a/doc/multiselect/ImportDoc.vue b/doc/multiselect/ImportDoc.vue
index 3782eb272..d83e23c70 100644
--- a/doc/multiselect/ImportDoc.vue
+++ b/doc/multiselect/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/nuxt/DownloadDoc.vue b/doc/nuxt/DownloadDoc.vue
index f657b1dbb..485f86b3e 100644
--- a/doc/nuxt/DownloadDoc.vue
+++ b/doc/nuxt/DownloadDoc.vue
@@ -5,7 +5,7 @@
             <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/nuxt/ModuleSetupDoc.vue b/doc/nuxt/ModuleSetupDoc.vue
index 335548c4b..b31762566 100644
--- a/doc/nuxt/ModuleSetupDoc.vue
+++ b/doc/nuxt/ModuleSetupDoc.vue
@@ -4,7 +4,7 @@
             In <i>nuxt.config</i> file, add the <i>nuxt-primevue</i> to the modules section and define <i>primevue</i> object for the configuration of the module. View the <NuxtLink to="/nuxt/#configuration">module configuration</NuxtLink> section
             for the available list of options.
         </p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/nuxt/StyleDoc.vue b/doc/nuxt/StyleDoc.vue
index ea959e1ae..1745b56fc 100644
--- a/doc/nuxt/StyleDoc.vue
+++ b/doc/nuxt/StyleDoc.vue
@@ -4,7 +4,7 @@
             Module is used to configure the PrimeVue options, register components, directives and composables. CSS configuration of the styled mode is not included at the moment due to the upcoming enhancements like moving theming to core with CSS
             variables. In styled mode, the theme can be defined at Nuxt configuration with the <i>css</i> property. Note that this only applies to styled mode, in unstyled mode a theme file is not required as styling is done externally.
         </p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
         <p>
             Until the new styled mode implementation is ready, dynamic theming at runtime is currently done by switching theme css files. Visit the <NuxtLink to="/theming/#switchthemes">Switch Themes</NuxtLink>
             section at styled mode for an example.
diff --git a/doc/nuxt/StyledModeDoc.vue b/doc/nuxt/StyledModeDoc.vue
index e8e9ec3a3..d27d5ef1f 100644
--- a/doc/nuxt/StyledModeDoc.vue
+++ b/doc/nuxt/StyledModeDoc.vue
@@ -5,18 +5,18 @@
             <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
         </p>
         <p>You may use the <i>app.vue</i> file to import a theme using a script.</p>
-        <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
         <p>The style section may also be used with <i>@import</i>.</p>
-        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
         <p>Another alternative would be the <i>css</i> option in <i>nuxt.config</i>.</p>
-        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
         <p>
             The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
             Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
             styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more information.
         </p>
-        <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/nuxt/UnstyledModeDoc.vue b/doc/nuxt/UnstyledModeDoc.vue
index ef86ca63c..aac6d8d13 100644
--- a/doc/nuxt/UnstyledModeDoc.vue
+++ b/doc/nuxt/UnstyledModeDoc.vue
@@ -4,9 +4,9 @@
             Unstyled mode is disabled by default for all components. Set <i>unstyled</i> as true to enable it globally using a module configuration. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and
             examples.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/nuxt/">Tailwind CSS Presets</a> project to get you started.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -38,7 +38,7 @@ export default defineNuxtConfig({
     ],
     primevue: {
         unstyled: true,
-        importPT: { from: path.resolve(__dirname, './presets/lara/') }      //import and apply preset   
+        importPT: { from: path.resolve(__dirname, './presets/lara/') }      //import and apply preset
     }
 })
 `
diff --git a/doc/nuxt/UsageDoc.vue b/doc/nuxt/UsageDoc.vue
index b6d2625ef..7d7d86008 100644
--- a/doc/nuxt/UsageDoc.vue
+++ b/doc/nuxt/UsageDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/nuxt/configuration/CSSLayerOrderDoc.vue b/doc/nuxt/configuration/CSSLayerOrderDoc.vue
index b0870a689..52396b4ba 100644
--- a/doc/nuxt/configuration/CSSLayerOrderDoc.vue
+++ b/doc/nuxt/configuration/CSSLayerOrderDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for detailed information.</p>
     </DocSectionText>
-    <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+    <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
 </template>
 
 <script>
@@ -12,7 +12,7 @@ export default {
         return {
             code1: {
                 basic: `
-primevue: { 
+primevue: {
     cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities'
 }
 `
diff --git a/doc/nuxt/configuration/ComponentsDoc.vue b/doc/nuxt/configuration/ComponentsDoc.vue
index 32201b5f1..890c9f13d 100644
--- a/doc/nuxt/configuration/ComponentsDoc.vue
+++ b/doc/nuxt/configuration/ComponentsDoc.vue
@@ -1,16 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>The components to import and register are defined with the <i>include</i> option using a string array. When the value is ignored or set using the <i>*</i> alias, all of the components are registered.</p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
         <p>In case all components are imported, particular components can still be excluded with the <i>exclude</i> option.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
         <p>Use the <i>prefix</i> option to give a prefix to the registered component names.</p>
-        <DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
         <p>
             Component registration can be customized further by implementing the <i>name</i> function that gets an object representing the import metadata. <i>name</i> is the label of the component, <i>as</i> is the default export name and
             <i>from</i> is the import path.
         </p>
-        <DocSectionCode :code="code4" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code4" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/nuxt/configuration/ComposablesDoc.vue b/doc/nuxt/configuration/ComposablesDoc.vue
index 1dadbb90f..185244ad4 100644
--- a/doc/nuxt/configuration/ComposablesDoc.vue
+++ b/doc/nuxt/configuration/ComposablesDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Determines the composables to use, when default value is ignored or set as <i>*</i> all composables are imported.</p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -11,7 +11,7 @@ export default {
         return {
             code1: {
                 basic: `
-primevue: { 
+primevue: {
     composables: {
         include: ['useStyle']
     }
diff --git a/doc/nuxt/configuration/DirectivesDoc.vue b/doc/nuxt/configuration/DirectivesDoc.vue
index 47aa23112..d1b26b9f7 100644
--- a/doc/nuxt/configuration/DirectivesDoc.vue
+++ b/doc/nuxt/configuration/DirectivesDoc.vue
@@ -1,10 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>The names of the directives to import and register are provided using the <i>include</i> property. When the value is ignored or set using the <i>*</i> alias, all of the directives are registered.</p>
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
         <p>Similar to components, certain directives can be excluded and name registration can be customized.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/nuxt/configuration/ImportPTDoc.vue b/doc/nuxt/configuration/ImportPTDoc.vue
index ae2588dd8..c86f265cc 100644
--- a/doc/nuxt/configuration/ImportPTDoc.vue
+++ b/doc/nuxt/configuration/ImportPTDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>Configures the global pass through import path.</p>
 
-        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
         <p>The path may also be a location within your application.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -15,14 +15,14 @@ export default {
         return {
             code1: {
                 basic: `
-primevue: { 
+primevue: {
     importPT: { as: 'Tailwind', from: 'primevue/passthrough/tailwind' },
 }
 `
             },
             code2: {
                 basic: `
-primevue: { 
+primevue: {
     importPT: { as: 'MyCustomPreset', from: path.resolve(__dirname, './assets/presets/mypreset.js')}
 }
 `
diff --git a/doc/nuxt/configuration/OptionsDoc.vue b/doc/nuxt/configuration/OptionsDoc.vue
index 9fdefd82e..d94830269 100644
--- a/doc/nuxt/configuration/OptionsDoc.vue
+++ b/doc/nuxt/configuration/OptionsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Main configuration settings of PrimeVue, refer to the <PrimeVueNuxtLink to="/configuration">configuration</PrimeVueNuxtLink> documentation for details. Defaults to an empty object.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/nuxt/configuration/UsePrimeVueDoc.vue b/doc/nuxt/configuration/UsePrimeVueDoc.vue
index a40cdf3ee..25205cc10 100644
--- a/doc/nuxt/configuration/UsePrimeVueDoc.vue
+++ b/doc/nuxt/configuration/UsePrimeVueDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Whether to install the PrimeVue plugin, defaults to <i>true</i>. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
 </template>
 
 <script>
@@ -11,8 +11,8 @@ export default {
         return {
             code: {
                 basic: `
-primevue: { 
-    usePrimeVue: true 
+primevue: {
+    usePrimeVue: true
 }
 `
             }
diff --git a/doc/orderlist/AccessibilityDoc.vue b/doc/orderlist/AccessibilityDoc.vue
index 518fd2476..7c673f846 100644
--- a/doc/orderlist/AccessibilityDoc.vue
+++ b/doc/orderlist/AccessibilityDoc.vue
@@ -11,7 +11,7 @@
             like overriding the default <i>aria-label</i> attributes.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 b3193fbab..ec94ed990 100644
--- a/doc/orderlist/ImportDoc.vue
+++ b/doc/orderlist/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/organizationchart/ImportDoc.vue b/doc/organizationchart/ImportDoc.vue
index 582561191..d611547e8 100644
--- a/doc/organizationchart/ImportDoc.vue
+++ b/doc/organizationchart/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/overlaypanel/ImportDoc.vue b/doc/overlaypanel/ImportDoc.vue
index 7420d57f8..a6338d195 100644
--- a/doc/overlaypanel/ImportDoc.vue
+++ b/doc/overlaypanel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/paginator/ImportDoc.vue b/doc/paginator/ImportDoc.vue
index 3a8f18438..b9f43af30 100644
--- a/doc/paginator/ImportDoc.vue
+++ b/doc/paginator/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/panel/ImportDoc.vue b/doc/panel/ImportDoc.vue
index 3000244fb..418371d7c 100644
--- a/doc/panel/ImportDoc.vue
+++ b/doc/panel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/panelmenu/ImportDoc.vue b/doc/panelmenu/ImportDoc.vue
index 06491688c..fbe84cdde 100644
--- a/doc/panelmenu/ImportDoc.vue
+++ b/doc/panelmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/panelmenu/RouterDoc.vue b/doc/panelmenu/RouterDoc.vue
index 1c82ec15c..40aa3da97 100644
--- a/doc/panelmenu/RouterDoc.vue
+++ b/doc/panelmenu/RouterDoc.vue
@@ -19,7 +19,7 @@
             </template>
         </PanelMenu>
     </div>
-    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/passthrough/CustomCSSDoc.vue b/doc/passthrough/CustomCSSDoc.vue
index d994dff02..5a0c46f75 100644
--- a/doc/passthrough/CustomCSSDoc.vue
+++ b/doc/passthrough/CustomCSSDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
 
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -19,7 +19,7 @@ import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { 
+app.use(PrimeVue, {
     pt: {
         global: {
             css: \`
@@ -48,7 +48,7 @@ app.use(PrimeVue, {
                 }
             \`
         }
-    } 
+    }
 });
 `
             }
diff --git a/doc/passthrough/GlobalDoc.vue b/doc/passthrough/GlobalDoc.vue
index 5586a892b..ca6f26f1e 100644
--- a/doc/passthrough/GlobalDoc.vue
+++ b/doc/passthrough/GlobalDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
 
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -19,7 +19,7 @@ import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { 
+app.use(PrimeVue, {
     pt: {
         panel: {
             header: {
@@ -27,11 +27,11 @@ app.use(PrimeVue, {
             }
         },
         autocomplete: {
-            input: { 
+            input: {
                 root: 'w-16rem' // OR { class: 'w-16rem' }
             }
         }
-    } 
+    }
 });
 `
             }
diff --git a/doc/passthrough/LifecycleDoc.vue b/doc/passthrough/LifecycleDoc.vue
index e19353600..e8df7690a 100644
--- a/doc/passthrough/LifecycleDoc.vue
+++ b/doc/passthrough/LifecycleDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
 
-    <DocSectionCode :code="code" hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/passthrough/UsePassThroughDoc.vue b/doc/passthrough/UsePassThroughDoc.vue
index facdad134..a313cbf0c 100644
--- a/doc/passthrough/UsePassThroughDoc.vue
+++ b/doc/passthrough/UsePassThroughDoc.vue
@@ -1,15 +1,15 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the merge strategy.</p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>
             The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and
             <i>false</i> for <i>mergeProps</i>.
         </p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -56,7 +56,7 @@ const CustomPreset = usePassThrough(
     { mergeSections: true, mergeProps: false }
 );
 
-// Output: 
+// Output:
 // panel.header.class => 'my_panel_header'
 // panel.title.class => Tailwind.panel.title.class
 `
@@ -73,7 +73,7 @@ const CustomPreset = usePassThrough(
     { mergeSections: true, mergeProps: true }
 );
 
-// Output: 
+// Output:
 // panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
 // panel.title.class => Tailwind.panel.title.class
 `
@@ -90,7 +90,7 @@ const CustomPreset = usePassThrough(
     { mergeSections: false, mergeProps: true }
 );
 
-// Output: 
+// Output:
 // panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
 // panel.title.class => undefined
 `
@@ -107,7 +107,7 @@ const CustomPreset = usePassThrough(
     { mergeSections: false, mergeProps: false }
 );
 
-// Output: 
+// Output:
 // panel.header.class => 'my_panel_header'
 // panel.title.class => undefined
 `
diff --git a/doc/password/AccessibilityDoc.vue b/doc/password/AccessibilityDoc.vue
index bf9114076..bc5782f5d 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 104120513..6ca42fcd6 100644
--- a/doc/password/ImportDoc.vue
+++ b/doc/password/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/picklist/AccessibilityDoc.vue b/doc/picklist/AccessibilityDoc.vue
index 4e60518d5..4e91a91c8 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 6dd73da57..979990d91 100644
--- a/doc/picklist/ImportDoc.vue
+++ b/doc/picklist/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/progressbar/AccessibilityDoc.vue b/doc/progressbar/AccessibilityDoc.vue
index 44d1ae9b9..3bec619c1 100644
--- a/doc/progressbar/AccessibilityDoc.vue
+++ b/doc/progressbar/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-label</i> props.
         </p>
 
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Not applicable.</p>
diff --git a/doc/progressbar/ImportDoc.vue b/doc/progressbar/ImportDoc.vue
index 2c89d48dd..557d425d5 100644
--- a/doc/progressbar/ImportDoc.vue
+++ b/doc/progressbar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/progressspinner/AccessibilityDoc.vue b/doc/progressspinner/AccessibilityDoc.vue
index e1b4f8c4f..83aa25230 100644
--- a/doc/progressspinner/AccessibilityDoc.vue
+++ b/doc/progressspinner/AccessibilityDoc.vue
@@ -2,7 +2,7 @@
     <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>
-        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
 
         <h3>Keyboard Support</h3>
         <p>Component does not include any interactive elements.</p>
diff --git a/doc/progressspinner/ImportDoc.vue b/doc/progressspinner/ImportDoc.vue
index 50a0bdfc0..53b051d06 100644
--- a/doc/progressspinner/ImportDoc.vue
+++ b/doc/progressspinner/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/radiobutton/AccessibilityDoc.vue b/doc/radiobutton/AccessibilityDoc.vue
index 3759d6e37..74c3e5c04 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 8fad70341..1cea94b37 100644
--- a/doc/radiobutton/ImportDoc.vue
+++ b/doc/radiobutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/rating/ImportDoc.vue b/doc/rating/ImportDoc.vue
index e9d7e6efe..2070a2b4a 100644
--- a/doc/rating/ImportDoc.vue
+++ b/doc/rating/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/ripple/ConfigurationDoc.vue b/doc/ripple/ConfigurationDoc.vue
index 5b8133ec8..67d2b8b50 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 <NuxtLink to="/configuration/#ripple">Configuration API</NuxtLink> for details.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/ripple/ImportDoc.vue b/doc/ripple/ImportDoc.vue
index 38ede2bbf..db3da431d 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 importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode 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 importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/scrollpanel/ImportDoc.vue b/doc/scrollpanel/ImportDoc.vue
index 9d3e2580b..08dcfd182 100644
--- a/doc/scrollpanel/ImportDoc.vue
+++ b/doc/scrollpanel/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/scrolltop/ImportDoc.vue b/doc/scrolltop/ImportDoc.vue
index 7e0adf387..5429340a9 100644
--- a/doc/scrolltop/ImportDoc.vue
+++ b/doc/scrolltop/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/selectbutton/ImportDoc.vue b/doc/selectbutton/ImportDoc.vue
index 58c1f7400..4920f1520 100644
--- a/doc/selectbutton/ImportDoc.vue
+++ b/doc/selectbutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/sidebar/AccessibilityDoc.vue b/doc/sidebar/AccessibilityDoc.vue
index 17290d15c..8fbffc814 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 f2f11f2f3..0c809aef7 100644
--- a/doc/sidebar/ImportDoc.vue
+++ b/doc/sidebar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/skeleton/ImportDoc.vue b/doc/skeleton/ImportDoc.vue
index 2abc2e092..ffed605b6 100644
--- a/doc/skeleton/ImportDoc.vue
+++ b/doc/skeleton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/slider/AccessibilityDoc.vue b/doc/slider/AccessibilityDoc.vue
index f2db9d61f..8bdd89cb0 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 b4f62b270..edde33fc8 100644
--- a/doc/slider/ImportDoc.vue
+++ b/doc/slider/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/speeddial/AccessibilityDoc.vue b/doc/speeddial/AccessibilityDoc.vue
index 508764f29..1657bdf68 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 de1cf46a3..84b262c2b 100644
--- a/doc/speeddial/ImportDoc.vue
+++ b/doc/speeddial/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/splitbutton/AccessibilityDoc.vue b/doc/splitbutton/AccessibilityDoc.vue
index 3cc923994..f17b9c73d 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 eacd92de6..4eb903ebf 100644
--- a/doc/splitbutton/ImportDoc.vue
+++ b/doc/splitbutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/splitter/ImportDoc.vue b/doc/splitter/ImportDoc.vue
index 14a91a062..785566b50 100644
--- a/doc/splitter/ImportDoc.vue
+++ b/doc/splitter/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/steps/ImportDoc.vue b/doc/steps/ImportDoc.vue
index b683ec33d..292965415 100644
--- a/doc/steps/ImportDoc.vue
+++ b/doc/steps/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/styleclass/ImportDoc.vue b/doc/styleclass/ImportDoc.vue
index 2dd972ada..71d567546 100644
--- a/doc/styleclass/ImportDoc.vue
+++ b/doc/styleclass/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -10,7 +10,7 @@ export default {
             code: {
                 basic: `
 import StyleClass from 'primevue/styleclass';
-                
+
 app.directive('styleclass', StyleClass);
 `
             }
diff --git a/doc/tabmenu/ImportDoc.vue b/doc/tabmenu/ImportDoc.vue
index b18850310..db8558892 100644
--- a/doc/tabmenu/ImportDoc.vue
+++ b/doc/tabmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tabview/ImportDoc.vue b/doc/tabview/ImportDoc.vue
index bdde53eec..501773bd2 100644
--- a/doc/tabview/ImportDoc.vue
+++ b/doc/tabview/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tag/ImportDoc.vue b/doc/tag/ImportDoc.vue
index fff521637..0c02a8505 100644
--- a/doc/tag/ImportDoc.vue
+++ b/doc/tag/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/terminal/ImportDoc.vue b/doc/terminal/ImportDoc.vue
index 6cd9c5e72..ab88b96a2 100644
--- a/doc/terminal/ImportDoc.vue
+++ b/doc/terminal/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/textarea/AccessibilityDoc.vue b/doc/textarea/AccessibilityDoc.vue
index 92d34c324..6554e58cd 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 1e2257ccd..4759484fb 100644
--- a/doc/textarea/ImportDoc.vue
+++ b/doc/textarea/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/BuiltInThemesDoc.vue b/doc/theming/BuiltInThemesDoc.vue
index 794a234fc..583f586d7 100644
--- a/doc/theming/BuiltInThemesDoc.vue
+++ b/doc/theming/BuiltInThemesDoc.vue
@@ -5,7 +5,7 @@
             <span class="border-round inline-flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center bg-primary"><span class="pi pi-palette"></span></span> at the topbar to switch themes.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz scrollable />
 </template>
 
 <script>
diff --git a/doc/theming/CSSModulesDoc.vue b/doc/theming/CSSModulesDoc.vue
index ffba8a6e1..63e029a47 100644
--- a/doc/theming/CSSModulesDoc.vue
+++ b/doc/theming/CSSModulesDoc.vue
@@ -7,8 +7,8 @@
         <div class="card flex justify-content-center">
             <InputText :class="$style.myinput" placeholder="Search" />
         </div>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
         <p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
         <div class="video-container">
             <iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
diff --git a/doc/theming/CustomThemeDoc.vue b/doc/theming/CustomThemeDoc.vue
index 705a95afa..1661235a8 100644
--- a/doc/theming/CustomThemeDoc.vue
+++ b/doc/theming/CustomThemeDoc.vue
@@ -22,12 +22,12 @@
 
         <h3>Compile SCSS Manually</h3>
         <p>Once your theme is ready run the following command to compile it. Note that <a href="https://www.npmjs.com/package/sass">sass</a> command should be available in your terminal.</p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>
             Then copy and import the theme.css file in your application. For example, in a Vite based template like <a href="https://github.com/vuejs/create-vue">create-vue</a>, you may place theme.css under assets folder and then import it an
             <i>main.js</i>.
         </p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
 
         <h3>Build Time Compilation</h3>
         <p>
diff --git a/doc/theming/PrimeFlexDoc.vue b/doc/theming/PrimeFlexDoc.vue
index c10b9aba8..ce2fd35a8 100644
--- a/doc/theming/PrimeFlexDoc.vue
+++ b/doc/theming/PrimeFlexDoc.vue
@@ -13,7 +13,7 @@
         <Button type="button" label="Button 2" severity="secondary"></Button>
         <Button type="button" label="Button 3" severity="help"></Button>
     </div>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/ScaleDoc.vue b/doc/theming/ScaleDoc.vue
index b7a3d45f9..046f035f1 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 require bigger or smaller components, just change this variable and components will scale accordingly.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/ScopedCSSDoc.vue b/doc/theming/ScopedCSSDoc.vue
index 5cb2421cc..f375fc853 100644
--- a/doc/theming/ScopedCSSDoc.vue
+++ b/doc/theming/ScopedCSSDoc.vue
@@ -10,8 +10,8 @@
             </p>
         </Panel>
     </div>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
index 165fe94b6..5c868020b 100644
--- a/doc/theming/SwitchThemesDoc.vue
+++ b/doc/theming/SwitchThemesDoc.vue
@@ -8,17 +8,17 @@
             by copying them from PrimeVue <i>resources/themes</i> folder. Second part is making the theme.css accessible via a link element so that the id of the link can be provided as the 3rd parameter to the <i>changeTheme</i> function.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
     <div class="doc-section-description">
         <p>In a Vite based project like <a href="https://github.com/vuejs/create-vue">create-vue</a>, the link can be placed at index.html.</p>
     </div>
-    <DocSectionCode :code="code4" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code4" hideToggleCode hideStackBlitz />
     <div class="doc-section-description">
         <p><a href="https://nuxtjs.org/">Nuxt</a> applications can configure the link element using <i>nuxt.config.js</i>.</p>
     </div>
-    <DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tieredmenu/ImportDoc.vue b/doc/tieredmenu/ImportDoc.vue
index 543685554..44f0298aa 100644
--- a/doc/tieredmenu/ImportDoc.vue
+++ b/doc/tieredmenu/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index d40c8bf66..90edd40d4 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -19,7 +19,7 @@
             </template>
         </TieredMenu>
     </div>
-    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
+    <DocSectionCode :code="code" hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/timeline/ImportDoc.vue b/doc/timeline/ImportDoc.vue
index 62ef958f6..0bc532b09 100644
--- a/doc/timeline/ImportDoc.vue
+++ b/doc/timeline/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/toast/ImportDoc.vue b/doc/toast/ImportDoc.vue
index f0ab4ccb9..554940f0b 100644
--- a/doc/toast/ImportDoc.vue
+++ b/doc/toast/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index e9f344c42..9b4c2e04a 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>Toast component is controlled via the <i>ToastService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
     <div class="doc-section-description">
         <p>The service is available with the <i>useToast</i> function for Composition API or using the <i>$toast</i> property of the application for Options API.</p>
     </div>
-    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/togglebutton/AccessibilityDoc.vue b/doc/togglebutton/AccessibilityDoc.vue
index 87e645b4e..275d36350 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 0bc9c7ed7..c4aede4dd 100644
--- a/doc/togglebutton/ImportDoc.vue
+++ b/doc/togglebutton/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/toolbar/ImportDoc.vue b/doc/toolbar/ImportDoc.vue
index ba5d2f39b..963fcbf0d 100644
--- a/doc/toolbar/ImportDoc.vue
+++ b/doc/toolbar/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tooltip/ImportDoc.vue b/doc/tooltip/ImportDoc.vue
index 556bb7e4a..d46f41a90 100644
--- a/doc/tooltip/ImportDoc.vue
+++ b/doc/tooltip/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tree/ImportDoc.vue b/doc/tree/ImportDoc.vue
index d61d04a30..0d82a40de 100644
--- a/doc/tree/ImportDoc.vue
+++ b/doc/tree/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/treeselect/AccessibilityDoc.vue b/doc/treeselect/AccessibilityDoc.vue
index d6da4dc05..5aadb8456 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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 fcdbc64e6..1e80925ef 100644
--- a/doc/treeselect/CheckboxDoc.vue
+++ b/doc/treeselect/CheckboxDoc.vue
@@ -6,7 +6,7 @@
             selection.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="activeNodes" hideToggleCode importCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+    <DocSectionCode :code="activeNodes" hideToggleCode importCode 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 cd18f5ae8..14ccf5097 100644
--- a/doc/treeselect/ImportDoc.vue
+++ b/doc/treeselect/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/treeselect/MultipleDoc.vue b/doc/treeselect/MultipleDoc.vue
index 8dda84c2c..c0634902f 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 importCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+    <DocSectionCode :code="activeNodes" hideToggleCode importCode 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 fbba9dd6c..709138a2a 100644
--- a/doc/treetable/ImportDoc.vue
+++ b/doc/treetable/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
index 97bd77089..49fcf3042 100644
--- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -5,7 +5,7 @@
             In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) 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 importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="introCode" hideToggleCode importCode 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 acbb68b9a..425d9a531 100644
--- a/doc/tristatecheckbox/AccessibilityDoc.vue
+++ b/doc/tristatecheckbox/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             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
             <NuxtLink to="/configuration/#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 hideCodeSandbox hideStackBlitz v-bind="$attrs" />
+        <DocSectionCode :code="code" hideToggleCode 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 b886b01b9..f35d92028 100644
--- a/doc/tristatecheckbox/ImportDoc.vue
+++ b/doc/tristatecheckbox/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/unocss/SetupDoc.vue b/doc/unocss/SetupDoc.vue
index c530acb9f..9cc6c3330 100644
--- a/doc/unocss/SetupDoc.vue
+++ b/doc/unocss/SetupDoc.vue
@@ -8,7 +8,7 @@
             UnoCSS adds the utilities on demand so it needs to be aware of PrimeVue components path otherwise the classes used will not be included in the page, sample below configures UnoCSS with Vite. For other environments like Nuxt, visit the
             <a href="https://unocss.dev/integrations/">integrations documentation</a>.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/unstyled/SetupDoc.vue b/doc/unstyled/SetupDoc.vue
index 512457a7a..c03070630 100644
--- a/doc/unstyled/SetupDoc.vue
+++ b/doc/unstyled/SetupDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeVue installation.</p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p>
         <div class="card flex justify-content-center">
             <Button label="Check" icon="pi pi-check" unstyled />
         </div>
-        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/unstyled/ThemeDoc.vue b/doc/unstyled/ThemeDoc.vue
index c8492860e..ce667f186 100644
--- a/doc/unstyled/ThemeDoc.vue
+++ b/doc/unstyled/ThemeDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
 
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
@@ -19,12 +19,12 @@ import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { 
+app.use(PrimeVue, {
     pt: {
         button: {
             root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
             label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
-            icon: 'text-white text-2xl' 
+            icon: 'text-white text-2xl'
         },
         panel: {
             header: 'bg-primary border-primary',
@@ -32,7 +32,7 @@ app.use(PrimeVue, {
             title: 'bg-primary text-xl',
             toggler: 'bg-primary hover:bg-primary-reverse'
         }
-    } 
+    }
 });
 `
             }
diff --git a/doc/virtualscroller/ImportDoc.vue b/doc/virtualscroller/ImportDoc.vue
index 88b9b3465..69dfeb1ee 100644
--- a/doc/virtualscroller/ImportDoc.vue
+++ b/doc/virtualscroller/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/vite/DownloadDoc.vue b/doc/vite/DownloadDoc.vue
index 31b02b26f..d9fb3b453 100644
--- a/doc/vite/DownloadDoc.vue
+++ b/doc/vite/DownloadDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/vite/PluginDoc.vue b/doc/vite/PluginDoc.vue
index ea56afbd8..84fdc2d39 100644
--- a/doc/vite/PluginDoc.vue
+++ b/doc/vite/PluginDoc.vue
@@ -5,7 +5,7 @@
             application.
         </p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/vite/StyledModeDoc.vue b/doc/vite/StyledModeDoc.vue
index 626f32642..19e9a5943 100644
--- a/doc/vite/StyledModeDoc.vue
+++ b/doc/vite/StyledModeDoc.vue
@@ -4,13 +4,13 @@
             Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
             <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>
             The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
             Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more
             information.
         </p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/vite/UnstyledModeDoc.vue b/doc/vite/UnstyledModeDoc.vue
index 240c65242..c82feb73b 100644
--- a/doc/vite/UnstyledModeDoc.vue
+++ b/doc/vite/UnstyledModeDoc.vue
@@ -4,9 +4,9 @@
             Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
             information and examples.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -20,8 +20,8 @@ import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { 
-    unstyled: true 
+app.use(PrimeVue, {
+    unstyled: true
 });
 `
             },
@@ -29,12 +29,12 @@ app.use(PrimeVue, {
                 basic: `
 import { createApp } from 'vue';
 import PrimeVue from 'primevue/config';
-import Lara from '@/presets/lara';      //import preset        
+import Lara from '@/presets/lara';      //import preset
 
 const app = createApp(App);
 app.use(PrimeVue, {
     unstyled: true,
-    pt: Lara                            //apply preset        
+    pt: Lara                            //apply preset
 });
 `
             }