diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss
index c2fc6eefa..c5eaa8286 100644
--- a/assets/styles/layout/_code.scss
+++ b/assets/styles/layout/_code.scss
@@ -26,7 +26,7 @@ pre[class*="language-"] {
     position: relative;
     margin: .5em 0;
     overflow: visible;
-    padding: 1px;
+    padding: 0;
 }
 
 pre[class*="language-"] > code {
@@ -402,7 +402,8 @@ pre[class*="language-"] {
         margin: 0;
         color: var(--surface-900);
         font-size: 14px;
-        border-radius: 10px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
     }
     }
 
diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index d558d1447..837ce668c 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -205,6 +205,13 @@
     }
 }
 
+.doc-section-buttons {
+    gap: .75rem;
+    padding: .75rem 0 0;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
 .doc-section-code-tooltip .p-tooltip-text {
     padding: 0.5rem;
     font-size: 11px;
@@ -229,7 +236,7 @@
     }
 
     pre {
-        margin: 0 0 1.5rem 0;
+        margin: 0;
     }
 }
 
diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index d8d436aa6..05e914dea 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="!embedded" class="relative doc-section-code">
-        <div class="flex surface-card align-items-center justify-content-end absolute z-1" :style="{ right: '.75rem', top: '.75rem', gap: '.75rem' }">
+    <div v-if="!embedded" class="surface-card" style="border-radius: 10px">
+        <div class="flex doc-section-buttons surface-card align-items-center justify-content-end sticky z-1 top-0">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
                     :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' }]"
@@ -76,40 +76,33 @@
             ></Button>
         </div>
 
-        <template v-if="codeMode === 'basic' && importCode">
-            <pre v-code.script><code>
-{{ code.basic }}
-
+        <div class="relative doc-section-code overflow-auto" style="max-height: 40rem">
+            <template v-if="codeMode === 'basic' && importCode">
+                <pre v-code.script><code>{{ code.basic }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode === 'basic' && !importCode">
-            <pre v-code><code>
-{{ code.basic }}
+            </template>
 
+            <template v-if="codeMode === 'basic' && !importCode">
+                <pre v-code><code>{{ code.basic }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'options'">
-            <pre v-code><code>
-{{ code.options }}
+            </template>
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'options'">
+                <pre v-code><code>{{ code.options }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
-            <pre v-code><code>
-{{ code.composition }}
+            </template>
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
+                <pre v-code><code>{{ code.composition }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'data'">
-            <pre v-code.json><code>
-{{ code.data }}
+            </template>
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'data'">
+                <pre v-code.json><code>{{ code.data }}
 </code></pre>
-        </template>
+            </template>
+        </div>
+        <div class="h-1rem"></div>
     </div>
     <div v-else id="embed"></div>
 </template>
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 33530df7c..c403cf875 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -14,6 +14,7 @@
             :aria-haspopup="true"
             :placeholder="placeholder"
             :required="required"
+            :disabled="disabled"
             @input="onInput"
             @focus="onFocus"
             @blur="onBlur"
diff --git a/doc/accordion/BasicDoc.vue b/doc/accordion/BasicDoc.vue
index 503b82883..f4c408ce9 100644
--- a/doc/accordion/BasicDoc.vue
+++ b/doc/accordion/BasicDoc.vue
@@ -32,8 +32,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Accordion :activeIndex="0">
+                basic: `<Accordion :activeIndex="0">
     <AccordionTab header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -54,8 +53,7 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
@@ -82,8 +80,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
diff --git a/doc/accordion/ControlledDoc.vue b/doc/accordion/ControlledDoc.vue
index 4ef93f09e..93f204d50 100644
--- a/doc/accordion/ControlledDoc.vue
+++ b/doc/accordion/ControlledDoc.vue
@@ -39,8 +39,7 @@ export default {
         return {
             active: 0,
             code: {
-                basic: `
-<div class="pb-3">
+                basic: `<div class="pb-3">
     <Button @click="active = 0" text label="Activate 1st" />
     <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
     <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
@@ -66,8 +65,7 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="pb-3">
             <Button @click="active = 0" text label="Activate 1st" />
@@ -107,8 +105,7 @@ export default {
         }
     }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="pb-3">
             <Button @click="active = 0" text label="Activate 1st" />
diff --git a/doc/accordion/DisabledDoc.vue b/doc/accordion/DisabledDoc.vue
index bef341147..a26c73321 100644
--- a/doc/accordion/DisabledDoc.vue
+++ b/doc/accordion/DisabledDoc.vue
@@ -33,8 +33,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Accordion :multiple="true" :activeIndex="[0]">
+                basic: `<Accordion :multiple="true" :activeIndex="[0]">
     <AccordionTab header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -56,8 +55,7 @@ export default {
     </AccordionTab>
     <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
@@ -85,8 +83,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
diff --git a/doc/accordion/DynamicDoc.vue b/doc/accordion/DynamicDoc.vue
index fdf8601c7..7ca3862fb 100644
--- a/doc/accordion/DynamicDoc.vue
+++ b/doc/accordion/DynamicDoc.vue
@@ -22,14 +22,12 @@ export default {
                 { title: 'Title 3', content: 'Content 3' }
             ],
             code: {
-                basic: `
-<Accordion :activeIndex="0">
+                basic: `<Accordion :activeIndex="0">
     <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
diff --git a/doc/accordion/MultipleDoc.vue b/doc/accordion/MultipleDoc.vue
index b45e90cff..5f156cd36 100644
--- a/doc/accordion/MultipleDoc.vue
+++ b/doc/accordion/MultipleDoc.vue
@@ -32,8 +32,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Accordion :multiple="true" :activeIndex="[0]">
+                basic: `<Accordion :multiple="true" :activeIndex="[0]">
     <AccordionTab header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -54,8 +53,7 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
@@ -82,8 +80,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
diff --git a/doc/accordion/TemplateDoc.vue b/doc/accordion/TemplateDoc.vue
index 7b1d2340b..86d90d5f1 100644
--- a/doc/accordion/TemplateDoc.vue
+++ b/doc/accordion/TemplateDoc.vue
@@ -45,8 +45,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Accordion class="accordion-custom" :activeIndex="0">
+                basic: `<Accordion class="accordion-custom" :activeIndex="0">
     <AccordionTab>
         <template #header>
             <i class="pi pi-calendar"></i>
@@ -79,8 +78,7 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Accordion class="accordion-custom" :activeIndex="0">
             <AccordionTab>
@@ -135,8 +133,7 @@ export default {
     margin: 0;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion class="accordion-custom" :activeIndex="0">
             <AccordionTab>
diff --git a/doc/accordion/pt/PTDoc.vue b/doc/accordion/pt/PTDoc.vue
index 58f860ab2..a46546f82 100644
--- a/doc/accordion/pt/PTDoc.vue
+++ b/doc/accordion/pt/PTDoc.vue
@@ -28,8 +28,7 @@ export default {
                 content: `Tab ${i + 1} Content`
             })),
             code: {
-                basic: `
-<Accordion :activeIndex="0">
+                basic: `<Accordion :activeIndex="0">
     <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
         :pt="{
             headerAction: ({ props, parent }) => ({
@@ -39,8 +38,7 @@ export default {
         <p>{{ tab.content }}</p>
     </AccordionTab>
 </Accordion>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
@@ -76,8 +74,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
diff --git a/doc/accordion/theming/TailwindDoc.vue b/doc/accordion/theming/TailwindDoc.vue
index f5b84594b..af897f78b 100644
--- a/doc/accordion/theming/TailwindDoc.vue
+++ b/doc/accordion/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export const TRANSITIONS = {
+                basic: `export const TRANSITIONS = {
     toggleable: {
         enterFromClass: 'max-h-0',
         enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
@@ -63,8 +62,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
diff --git a/doc/autocomplete/AccessibilityDoc.vue b/doc/autocomplete/AccessibilityDoc.vue
index 3aed121d3..e3e8fe45a 100644
--- a/doc/autocomplete/AccessibilityDoc.vue
+++ b/doc/autocomplete/AccessibilityDoc.vue
@@ -161,8 +161,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="ac1">;Username</label>
+                basic: `<label for="ac1">;Username</label>
 <AutoComplete inputId="ac1" />
 
 <span id="ac2">Email</span>
diff --git a/doc/autocomplete/BasicDoc.vue b/doc/autocomplete/BasicDoc.vue
index 0f405724c..94418b9ca 100644
--- a/doc/autocomplete/BasicDoc.vue
+++ b/doc/autocomplete/BasicDoc.vue
@@ -15,10 +15,8 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
-                options: `
-<template>
+                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
@@ -39,8 +37,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/autocomplete/DisabledDoc.vue b/doc/autocomplete/DisabledDoc.vue
index b5ec9650a..3e4bc7839 100644
--- a/doc/autocomplete/DisabledDoc.vue
+++ b/doc/autocomplete/DisabledDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<AutoComplete disabled placeholder="Disabled" />`,
-                options: `
-<template>
+                basic: `<AutoComplete disabled placeholder="Disabled" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>
diff --git a/doc/autocomplete/DropdownDoc.vue b/doc/autocomplete/DropdownDoc.vue
index 1d4c63ac7..6ce0c6b32 100644
--- a/doc/autocomplete/DropdownDoc.vue
+++ b/doc/autocomplete/DropdownDoc.vue
@@ -18,10 +18,8 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `
-<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
-                options: `
-<template>
+                basic: `<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
     </div>
@@ -44,8 +42,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/autocomplete/FloatLabelDoc.vue b/doc/autocomplete/FloatLabelDoc.vue
index fa0821dde..b1e573097 100644
--- a/doc/autocomplete/FloatLabelDoc.vue
+++ b/doc/autocomplete/FloatLabelDoc.vue
@@ -18,13 +18,11 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
     <label for="ac">Float Label</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
@@ -48,8 +46,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
diff --git a/doc/autocomplete/ForceSelectionDoc.vue b/doc/autocomplete/ForceSelectionDoc.vue
index 96e769ebf..560822eeb 100644
--- a/doc/autocomplete/ForceSelectionDoc.vue
+++ b/doc/autocomplete/ForceSelectionDoc.vue
@@ -18,10 +18,8 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
-                options: `
-<template>
+                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
     </div>
@@ -42,8 +40,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
     </div>
diff --git a/doc/autocomplete/GroupDoc.vue b/doc/autocomplete/GroupDoc.vue
index 810732874..4ba7b03a9 100644
--- a/doc/autocomplete/GroupDoc.vue
+++ b/doc/autocomplete/GroupDoc.vue
@@ -57,8 +57,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+                basic: `<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center country-item">
             <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -66,8 +65,7 @@ export default {
         </div>
     </template>
 </AutoComplete>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
             <template #optiongroup="slotProps">
@@ -141,8 +139,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
             <template #optiongroup="slotProps">
diff --git a/doc/autocomplete/InvalidDoc.vue b/doc/autocomplete/InvalidDoc.vue
index 4f24ec053..b5c06f5db 100644
--- a/doc/autocomplete/InvalidDoc.vue
+++ b/doc/autocomplete/InvalidDoc.vue
@@ -15,10 +15,8 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
     </div>
@@ -39,8 +37,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
     </div>
diff --git a/doc/autocomplete/MultipleDoc.vue b/doc/autocomplete/MultipleDoc.vue
index 34d4853a6..5f5745696 100644
--- a/doc/autocomplete/MultipleDoc.vue
+++ b/doc/autocomplete/MultipleDoc.vue
@@ -15,10 +15,8 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `
-<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
-                options: `
-<template>
+                basic: `<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
+                options: `<template>
     <div class="card p-fluid">
         <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
     </div>
@@ -39,8 +37,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/autocomplete/ObjectsDoc.vue b/doc/autocomplete/ObjectsDoc.vue
index 0a2e2ecdc..d27920a2d 100644
--- a/doc/autocomplete/ObjectsDoc.vue
+++ b/doc/autocomplete/ObjectsDoc.vue
@@ -21,10 +21,8 @@ export default {
             selectedCountry: null,
             filteredCountries: null,
             code: {
-                basic: `
-<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
-                options: `
-<template>
+                basic: `<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
@@ -59,8 +57,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
diff --git a/doc/autocomplete/TemplateDoc.vue b/doc/autocomplete/TemplateDoc.vue
index 4724bc025..3d0808c58 100644
--- a/doc/autocomplete/TemplateDoc.vue
+++ b/doc/autocomplete/TemplateDoc.vue
@@ -27,8 +27,7 @@ export default {
             countries: null,
             filteredCountries: null,
             code: {
-                basic: `
-<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+                basic: `<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
     <template #option="slotProps">
         <div class="flex align-options-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -36,8 +35,7 @@ export default {
         </div>
     </template>
 </AutoComplete>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
             <template #option="slotProps">
@@ -79,8 +77,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
             <template #option="slotProps">
diff --git a/doc/autocomplete/VirtualScrollDoc.vue b/doc/autocomplete/VirtualScrollDoc.vue
index 876443903..2afdb9666 100644
--- a/doc/autocomplete/VirtualScrollDoc.vue
+++ b/doc/autocomplete/VirtualScrollDoc.vue
@@ -19,11 +19,9 @@ export default {
             selectedItem: null,
             filteredItems: null,
             code: {
-                basic: `
-<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
+                basic: `<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
     :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
     </div>
@@ -57,8 +55,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
     </div>
diff --git a/doc/autocomplete/form/VeeValidateDoc.vue b/doc/autocomplete/form/VeeValidateDoc.vue
index 2d8aa9651..88c1cadf2 100644
--- a/doc/autocomplete/form/VeeValidateDoc.vue
+++ b/doc/autocomplete/form/VeeValidateDoc.vue
@@ -44,8 +44,7 @@ export default {
         return {
             items: [],
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
@@ -55,8 +54,7 @@ export default {
         </form>
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
@@ -107,8 +105,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
diff --git a/doc/autocomplete/pt/PTDoc.vue b/doc/autocomplete/pt/PTDoc.vue
index ab62970d0..75cdf32fc 100644
--- a/doc/autocomplete/pt/PTDoc.vue
+++ b/doc/autocomplete/pt/PTDoc.vue
@@ -23,8 +23,7 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `
-<AutoComplete
+                basic: `<AutoComplete
     v-model="value"
     :suggestions="items"
     @complete="search"
@@ -35,8 +34,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete
             v-model="value"
@@ -67,8 +65,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AutoComplete
             v-model="value"
diff --git a/doc/autocomplete/theming/TailwindDoc.vue b/doc/autocomplete/theming/TailwindDoc.vue
index 28bbfcfb4..fd1225170 100644
--- a/doc/autocomplete/theming/TailwindDoc.vue
+++ b/doc/autocomplete/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -92,8 +92,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/avatar/AvatarGroupDoc.vue b/doc/avatar/AvatarGroupDoc.vue
index e9fe57b5c..c68d03e1f 100644
--- a/doc/avatar/AvatarGroupDoc.vue
+++ b/doc/avatar/AvatarGroupDoc.vue
@@ -20,8 +20,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<AvatarGroup>
+                basic: `<AvatarGroup>
     <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
     <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
     <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
@@ -29,8 +28,7 @@ export default {
     <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
     <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
 </AvatarGroup>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <AvatarGroup>
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
@@ -46,8 +44,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <AvatarGroup>
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
diff --git a/doc/avatar/IconDoc.vue b/doc/avatar/IconDoc.vue
index 17a60f2a9..f74ffede7 100644
--- a/doc/avatar/IconDoc.vue
+++ b/doc/avatar/IconDoc.vue
@@ -32,8 +32,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                basic: `<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
 <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
 <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
 
@@ -42,8 +41,7 @@ export default {
 <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
 
 <Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
@@ -71,8 +69,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
diff --git a/doc/avatar/ImageDoc.vue b/doc/avatar/ImageDoc.vue
index c2f86b95c..f793c6482 100644
--- a/doc/avatar/ImageDoc.vue
+++ b/doc/avatar/ImageDoc.vue
@@ -30,16 +30,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                basic: `<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
 <Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
 <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
 
 <Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
 
 <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
@@ -65,8 +63,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
diff --git a/doc/avatar/LabelDoc.vue b/doc/avatar/LabelDoc.vue
index 28f2c8292..eba743307 100644
--- a/doc/avatar/LabelDoc.vue
+++ b/doc/avatar/LabelDoc.vue
@@ -32,8 +32,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Avatar label="P" class="mr-2" size="xlarge" />
+                basic: `<Avatar label="P" class="mr-2" size="xlarge" />
 <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
 <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
 
@@ -42,8 +41,7 @@ export default {
 <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
 
 <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="flex flex-wrap gap-5">
         <div class="flex-auto">
             <h5>Label</h5>
@@ -69,8 +67,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="flex flex-wrap gap-5">
         <div class="flex-auto">
             <h5>Label</h5>
diff --git a/doc/avatar/pt/PTDoc.vue b/doc/avatar/pt/PTDoc.vue
index 02a16e813..1b6af57e1 100644
--- a/doc/avatar/pt/PTDoc.vue
+++ b/doc/avatar/pt/PTDoc.vue
@@ -11,22 +11,19 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+                basic: `<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
     :pt="{
         image: { class: 'w-4rem h-4rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
         :pt="{
             image: { class: 'w-4rem h-4rem' }
         }"
     />
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
         :pt="{
             image: { class: 'w-4rem h-4rem' }
diff --git a/doc/avatar/theming/TailwindDoc.vue b/doc/avatar/theming/TailwindDoc.vue
index 9b13a52f1..b069450f8 100644
--- a/doc/avatar/theming/TailwindDoc.vue
+++ b/doc/avatar/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -45,8 +45,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div>
diff --git a/doc/badge/BasicDoc.vue b/doc/badge/BasicDoc.vue
index e21b04f08..ec8013738 100644
--- a/doc/badge/BasicDoc.vue
+++ b/doc/badge/BasicDoc.vue
@@ -14,8 +14,7 @@ export default {
         return {
             code: {
                 basic: `<Badge value="2"></Badge>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Badge value="2"></Badge>
     </div>
@@ -24,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Badge value="2"></Badge>
     </div>
diff --git a/doc/badge/ButtonDoc.vue b/doc/badge/ButtonDoc.vue
index a0e00bc5e..439b6f42b 100644
--- a/doc/badge/ButtonDoc.vue
+++ b/doc/badge/ButtonDoc.vue
@@ -14,11 +14,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button type="button" label="Emails" badge="8" />
+                basic: `<Button type="button" label="Emails" badge="8" />
 <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
@@ -28,8 +26,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
diff --git a/doc/badge/PositionDoc.vue b/doc/badge/PositionDoc.vue
index 68a00a14a..63509d794 100644
--- a/doc/badge/PositionDoc.vue
+++ b/doc/badge/PositionDoc.vue
@@ -15,12 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
+                basic: `<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
 <i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
 <i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-4">
         <i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
         <i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
@@ -31,8 +29,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-4">
         <i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
         <i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
diff --git a/doc/badge/SeverityDoc.vue b/doc/badge/SeverityDoc.vue
index 6a8d2870c..36d6f9849 100644
--- a/doc/badge/SeverityDoc.vue
+++ b/doc/badge/SeverityDoc.vue
@@ -17,14 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Badge value="2"></Badge>
+                basic: `<Badge value="2"></Badge>
 <Badge value="8" severity="success"></Badge>
 <Badge value="4" severity="info"></Badge>
 <Badge value="12" severity="warning"></Badge>
 <Badge value="3" severity="danger"></Badge>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="8" severity="success"></Badge>
@@ -37,8 +35,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="8" severity="success"></Badge>
diff --git a/doc/badge/SizeDoc.vue b/doc/badge/SizeDoc.vue
index 1e6079b4f..81985fbfc 100644
--- a/doc/badge/SizeDoc.vue
+++ b/doc/badge/SizeDoc.vue
@@ -15,12 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Badge value="6" size="xlarge" severity="success"></Badge>
+                basic: `<Badge value="6" size="xlarge" severity="success"></Badge>
 <Badge value="4" size="large" severity="warning"></Badge>
 <Badge value="2"></Badge>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
         <Badge value="6" size="xlarge" severity="success"></Badge>
         <Badge value="4" size="large" severity="warning"></Badge>
@@ -31,8 +29,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
         <Badge value="6" size="xlarge" severity="success"></Badge>
         <Badge value="4" size="large" severity="warning"></Badge>
diff --git a/doc/badge/pt/PTDoc.vue b/doc/badge/pt/PTDoc.vue
index ebdb96083..f13b7fce4 100644
--- a/doc/badge/pt/PTDoc.vue
+++ b/doc/badge/pt/PTDoc.vue
@@ -44,8 +44,7 @@ export default {
     }"
     class="pi pi-calendar text-4xl"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center align-items-center gap-2">
         // component
         <Badge
@@ -67,8 +66,7 @@ export default {
         />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center align-items-center gap-2">
         // component
         <Badge
diff --git a/doc/badge/theming/TailwindDoc.vue b/doc/badge/theming/TailwindDoc.vue
index de64320fd..f67c1287d 100644
--- a/doc/badge/theming/TailwindDoc.vue
+++ b/doc/badge/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -65,8 +65,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="8" severity="success"></Badge>
diff --git a/doc/blockui/BasicDoc.vue b/doc/blockui/BasicDoc.vue
index 976d8996f..0b4ccd1e8 100644
--- a/doc/blockui/BasicDoc.vue
+++ b/doc/blockui/BasicDoc.vue
@@ -25,8 +25,7 @@ export default {
         return {
             blocked: false,
             code: {
-                basic: `
-<div class="mb-3">
+                basic: `<div class="mb-3">
     <Button label="Block" @click="blocked = true" class="mr-2"></Button>
     <Button label="Unblock" @click="blocked = false"></Button>
 </div>
@@ -38,8 +37,7 @@ export default {
         </p>
     </Panel>
 </BlockUI>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
@@ -65,8 +63,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
diff --git a/doc/blockui/DocumentDoc.vue b/doc/blockui/DocumentDoc.vue
index 8ebf22fd0..b0a96cdcd 100644
--- a/doc/blockui/DocumentDoc.vue
+++ b/doc/blockui/DocumentDoc.vue
@@ -15,11 +15,9 @@ export default {
         return {
             blocked: false,
             code: {
-                basic: `
-<BlockUI :blocked="blocked" fullScreen />
+                basic: `<BlockUI :blocked="blocked" fullScreen />
 <Button label="Block" @click="blocked = true" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <BlockUI :blocked="blocked" fullScreen />
         <Button label="Block" @click="blockDocument" />
@@ -44,8 +42,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <BlockUI :blocked="blocked" fullScreen />
         <Button label="Block" @click="blockDocument" />
diff --git a/doc/blockui/pt/PTDoc.vue b/doc/blockui/pt/PTDoc.vue
index 07f74e1f2..7aef09e8b 100644
--- a/doc/blockui/pt/PTDoc.vue
+++ b/doc/blockui/pt/PTDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             blocked: false,
             code: {
-                basic: `
-<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+                basic: `<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </BlockUI>`,
-                options: `
-<template>
+                options: `<template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
         <p class="m-0">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -37,8 +35,7 @@ export default {
         </p>
     </BlockUI>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
         <p class="m-0">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/doc/blockui/theming/TailwindDoc.vue b/doc/blockui/theming/TailwindDoc.vue
index e448de6ae..a01dde7c2 100644
--- a/doc/blockui/theming/TailwindDoc.vue
+++ b/doc/blockui/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -25,8 +25,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
diff --git a/doc/breadcrumb/BasicDoc.vue b/doc/breadcrumb/BasicDoc.vue
index 7f0cda45d..3db9bf87b 100644
--- a/doc/breadcrumb/BasicDoc.vue
+++ b/doc/breadcrumb/BasicDoc.vue
@@ -18,10 +18,8 @@ export default {
             },
             items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
-                basic: `
-<Breadcrumb :home="home" :model="items" />`,
-                options: `
-<template>
+                basic: `<Breadcrumb :home="home" :model="items" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
@@ -46,8 +44,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
diff --git a/doc/breadcrumb/TemplateDoc.vue b/doc/breadcrumb/TemplateDoc.vue
index d2271f7c7..fcdac89f9 100644
--- a/doc/breadcrumb/TemplateDoc.vue
+++ b/doc/breadcrumb/TemplateDoc.vue
@@ -21,16 +21,14 @@ export default {
             home: { icon: 'pi pi-home', url: 'https://primevue.org/' },
             items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }],
             code: {
-                basic: `
-<Breadcrumb :home="home" :model="items">
+                basic: `<Breadcrumb :home="home" :model="items">
     <template #item="item">
         <a :class="item.class">
             <span :class="item.icon"></span>
         </a>
     </template>
 </Breadcrumb>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{item}">
@@ -52,8 +50,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{item}">
diff --git a/doc/breadcrumb/pt/PTDoc.vue b/doc/breadcrumb/pt/PTDoc.vue
index ad55160ea..f3324a932 100644
--- a/doc/breadcrumb/pt/PTDoc.vue
+++ b/doc/breadcrumb/pt/PTDoc.vue
@@ -25,8 +25,7 @@ export default {
             },
             items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
-                basic: `
-<Breadcrumb :home="home" :model="items"
+                basic: `<Breadcrumb :home="home" :model="items"
     :pt="{
         root: { class: 'surface-ground' },
         label: ({ props }) => ({
@@ -34,8 +33,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items"
             :pt="{
@@ -67,8 +65,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items"
             :pt="{
diff --git a/doc/breadcrumb/theming/TailwindDoc.vue b/doc/breadcrumb/theming/TailwindDoc.vue
index 316f0547d..cd354fd57 100644
--- a/doc/breadcrumb/theming/TailwindDoc.vue
+++ b/doc/breadcrumb/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -38,8 +38,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
diff --git a/doc/button/AccessibilityDoc.vue b/doc/button/AccessibilityDoc.vue
index d8e3069c8..99f9ee19a 100644
--- a/doc/button/AccessibilityDoc.vue
+++ b/doc/button/AccessibilityDoc.vue
@@ -40,8 +40,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button icon="pi pi-check" aria-label="Submit" />
+                basic: `<Button icon="pi pi-check" aria-label="Submit" />
 
 <Button icon="pi pi-check" label="Submit" />
 
diff --git a/doc/button/BadgesDoc.vue b/doc/button/BadgesDoc.vue
index c17f6ff03..4c0ad28e2 100644
--- a/doc/button/BadgesDoc.vue
+++ b/doc/button/BadgesDoc.vue
@@ -14,11 +14,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button type="button" label="Emails" badge="8" />
+                basic: `<Button type="button" label="Emails" badge="8" />
 <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
@@ -27,8 +25,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
diff --git a/doc/button/BasicDoc.vue b/doc/button/BasicDoc.vue
index 88d32158c..d26c760b5 100644
--- a/doc/button/BasicDoc.vue
+++ b/doc/button/BasicDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Submit" />`,
-                options: `
-<template>
+                basic: `<Button label="Submit" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" />
     </div>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" />
     </div>
diff --git a/doc/button/ButtonSetDoc.vue b/doc/button/ButtonSetDoc.vue
index 8036272c1..ed4fd24f3 100644
--- a/doc/button/ButtonSetDoc.vue
+++ b/doc/button/ButtonSetDoc.vue
@@ -17,14 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span class="p-buttonset">
+                basic: `<span class="p-buttonset">
     <Button label="Save" icon="pi pi-check" />
     <Button label="Delete" icon="pi pi-trash" />
     <Button label="Cancel" icon="pi pi-times" />
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />
@@ -36,8 +34,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />
diff --git a/doc/button/DisabledDoc.vue b/doc/button/DisabledDoc.vue
index daf94fcb7..e29159b57 100644
--- a/doc/button/DisabledDoc.vue
+++ b/doc/button/DisabledDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Submit" disabled />`,
-                options: `
-<template>
+                basic: `<Button label="Submit" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" disabled />
     </div>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" disabled />
     </div>
diff --git a/doc/button/IconOnlyDoc.vue b/doc/button/IconOnlyDoc.vue
index 6f651d07d..9bf81c341 100644
--- a/doc/button/IconOnlyDoc.vue
+++ b/doc/button/IconOnlyDoc.vue
@@ -61,8 +61,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button icon="pi pi-check" aria-label="Filter" />
+                basic: `<Button icon="pi pi-check" aria-label="Filter" />
 <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
 <Button icon="pi pi-search" severity="success" aria-label="Search" />
 <Button icon="pi pi-user" severity="info" aria-label="User" />
@@ -101,8 +100,7 @@ export default {
 <Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
 <Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
 <Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
             <Button icon="pi pi-check" aria-label="Filter" />
@@ -158,8 +156,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
             <Button icon="pi pi-check" aria-label="Filter" />
diff --git a/doc/button/IconsDoc.vue b/doc/button/IconsDoc.vue
index d2fdbfb80..a04da1e30 100644
--- a/doc/button/IconsDoc.vue
+++ b/doc/button/IconsDoc.vue
@@ -15,12 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button icon="pi pi-check" aria-label="Submit" />
+                basic: `<Button icon="pi pi-check" aria-label="Submit" />
 <Button label="Submit" icon="pi pi-check" />
 <Button label="Submit" icon="pi pi-check" iconPos="right" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
         <Button icon="pi pi-check" aria-label="Submit" />
         <Button label="Submit" icon="pi pi-check" />
@@ -30,8 +28,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
         <Button icon="pi pi-check" aria-label="Submit" />
         <Button label="Submit" icon="pi pi-check" />
diff --git a/doc/button/LinkDoc.vue b/doc/button/LinkDoc.vue
index bb29e24af..86fbd2154 100644
--- a/doc/button/LinkDoc.vue
+++ b/doc/button/LinkDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Link" link />`,
-                options: `
-<template>
+                basic: `<Button label="Link" link />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Link" link />
     </div>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Link" link />
     </div>
diff --git a/doc/button/LoadingDoc.vue b/doc/button/LoadingDoc.vue
index 93f2a3878..895bfa429 100644
--- a/doc/button/LoadingDoc.vue
+++ b/doc/button/LoadingDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             loading: false,
             code: {
-                basic: `
-<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
-                options: `
-<template>
+                basic: `<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
     </div>
@@ -40,8 +38,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
     </div>
diff --git a/doc/button/OutlinedDoc.vue b/doc/button/OutlinedDoc.vue
index b437c8a49..9a4236037 100644
--- a/doc/button/OutlinedDoc.vue
+++ b/doc/button/OutlinedDoc.vue
@@ -19,16 +19,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Primary" outlined />
+                basic: `<Button label="Primary" outlined />
 <Button label="Secondary" severity="secondary" outlined />
 <Button label="Success" severity="success" outlined />
 <Button label="Info" severity="info" outlined />
 <Button label="Warning" severity="warning" outlined />
 <Button label="Help" severity="help" outlined />
 <Button label="Danger" severity="danger" outlined />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" outlined />
         <Button label="Secondary" severity="secondary" outlined />
@@ -42,8 +40,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" outlined />
         <Button label="Secondary" severity="secondary" outlined />
diff --git a/doc/button/RaisedDoc.vue b/doc/button/RaisedDoc.vue
index a6e87230b..4838d83b6 100644
--- a/doc/button/RaisedDoc.vue
+++ b/doc/button/RaisedDoc.vue
@@ -19,16 +19,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Primary" raised />
+                basic: `<Button label="Primary" raised />
 <Button label="Secondary" severity="secondary" raised />
 <Button label="Success" severity="success" raised />
 <Button label="Info" severity="info" raised />
 <Button label="Warning" severity="warning" raised />
 <Button label="Help" severity="help" raised />
 <Button label="Danger" severity="danger" raised />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" raised />
         <Button label="Secondary" severity="secondary" raised />
@@ -42,8 +40,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" raised />
         <Button label="Secondary" severity="secondary" raised />
diff --git a/doc/button/RaisedTextDoc.vue b/doc/button/RaisedTextDoc.vue
index 0643cfade..6220fe4e9 100644
--- a/doc/button/RaisedTextDoc.vue
+++ b/doc/button/RaisedTextDoc.vue
@@ -20,8 +20,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Primary" text raised />
+                basic: `<Button label="Primary" text raised />
 <Button label="Secondary" severity="secondary" text raised />
 <Button label="Success" severity="success" text raised />
 <Button label="Info" severity="info" text raised />
@@ -29,8 +28,7 @@ export default {
 <Button label="Help" severity="help" text raised />
 <Button label="Danger" severity="danger" text raised />
 <Button label="Plain" plain text raised />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text raised />
         <Button label="Secondary" severity="secondary" text raised />
@@ -45,8 +43,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text raised />
         <Button label="Secondary" severity="secondary" text raised />
diff --git a/doc/button/RoundedDoc.vue b/doc/button/RoundedDoc.vue
index 0cccd2082..26e3e56f8 100644
--- a/doc/button/RoundedDoc.vue
+++ b/doc/button/RoundedDoc.vue
@@ -19,16 +19,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Primary" rounded />
+                basic: `<Button label="Primary" rounded />
 <Button label="Secondary" severity="secondary" rounded />
 <Button label="Success" severity="success" rounded />
 <Button label="Info" severity="info" rounded />
 <Button label="Warning" severity="warning" rounded />
 <Button label="Help" severity="help" rounded />
 <Button label="Danger" severity="danger" rounded />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" rounded />
         <Button label="Secondary" severity="secondary" rounded />
@@ -42,8 +40,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" rounded />
         <Button label="Secondary" severity="secondary" rounded />
diff --git a/doc/button/SeverityDoc.vue b/doc/button/SeverityDoc.vue
index a650dddf8..4344da36f 100644
--- a/doc/button/SeverityDoc.vue
+++ b/doc/button/SeverityDoc.vue
@@ -19,16 +19,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Primary" />
+                basic: `<Button label="Primary" />
 <Button label="Secondary" severity="secondary" />
 <Button label="Success" severity="success" />
 <Button label="Info" severity="info" />
 <Button label="Warning" severity="warning" />
 <Button label="Help" severity="help" />
 <Button label="Danger" severity="danger" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
@@ -42,8 +40,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
diff --git a/doc/button/SizesDoc.vue b/doc/button/SizesDoc.vue
index c60b69aef..970b2f74d 100644
--- a/doc/button/SizesDoc.vue
+++ b/doc/button/SizesDoc.vue
@@ -15,12 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Small" icon="pi pi-check" size="small" />
+                basic: `<Button label="Small" icon="pi pi-check" size="small" />
 <Button label="Normal" icon="pi pi-check" />
 <Button label="Large" icon="pi pi-check" size="large" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <Button label="Small" icon="pi pi-check" size="small" />
         <Button label="Normal" icon="pi pi-check" />
@@ -30,8 +28,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <Button label="Small" icon="pi pi-check" size="small" />
         <Button label="Normal" icon="pi pi-check" />
diff --git a/doc/button/TemplateDoc.vue b/doc/button/TemplateDoc.vue
index 67c3a8bf2..8adee911a 100644
--- a/doc/button/TemplateDoc.vue
+++ b/doc/button/TemplateDoc.vue
@@ -15,12 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
+                basic: `<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
     <img alt="logo" src="/images/logo.svg" class="h-2rem" />
 </Button>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-light.svg" class="h-2rem" />
@@ -30,8 +28,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-light.svg" class="h-2rem" />
diff --git a/doc/button/TextDoc.vue b/doc/button/TextDoc.vue
index fd4d8d29e..276a87241 100644
--- a/doc/button/TextDoc.vue
+++ b/doc/button/TextDoc.vue
@@ -20,8 +20,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Primary" text />
+                basic: `<Button label="Primary" text />
 <Button label="Secondary" severity="secondary" text />
 <Button label="Success" severity="success" text />
 <Button label="Info" severity="info" text />
@@ -29,8 +28,7 @@ export default {
 <Button label="Help" severity="help" text />
 <Button label="Danger" severity="danger" text />
 <Button label="Plain" plain text />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text />
         <Button label="Secondary" severity="secondary" text />
@@ -45,8 +43,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text />
         <Button label="Secondary" severity="secondary" text />
diff --git a/doc/button/pt/PTDoc.vue b/doc/button/pt/PTDoc.vue
index 4b9384fcc..4802d7b19 100644
--- a/doc/button/pt/PTDoc.vue
+++ b/doc/button/pt/PTDoc.vue
@@ -11,14 +11,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Submit" icon="pi pi-check"
+                basic: `<Button label="Submit" icon="pi pi-check"
     :pt="{ 
         root: { class: 'bg-indigo-600 border-indigo-600' } 
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3 justify-content-center">
         <Button label="Submit" icon="pi pi-check"
             :pt="{ 
@@ -27,8 +25,7 @@ export default {
         />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3 justify-content-center">
         <Button label="Submit" icon="pi pi-check"
             :pt="{ 
diff --git a/doc/button/theming/TailwindDoc.vue b/doc/button/theming/TailwindDoc.vue
index 7b611e544..9c961b0fd 100644
--- a/doc/button/theming/TailwindDoc.vue
+++ b/doc/button/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -94,8 +94,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center flex-wrap gap-3">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
diff --git a/doc/calendar/AccessibilityDoc.vue b/doc/calendar/AccessibilityDoc.vue
index 0ce8c9ca4..60115d4db 100644
--- a/doc/calendar/AccessibilityDoc.vue
+++ b/doc/calendar/AccessibilityDoc.vue
@@ -191,8 +191,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="date1">Date</label>
+                basic: `<label for="date1">Date</label>
 <Calendar inputId="date1" />
 
 <span id="date2">Date</span>
diff --git a/doc/calendar/BasicDoc.vue b/doc/calendar/BasicDoc.vue
index af940fd2b..9afd581c6 100644
--- a/doc/calendar/BasicDoc.vue
+++ b/doc/calendar/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" />
     </div>
diff --git a/doc/calendar/ButtonBarDoc.vue b/doc/calendar/ButtonBarDoc.vue
index 09f9394f8..5706ba882 100644
--- a/doc/calendar/ButtonBarDoc.vue
+++ b/doc/calendar/ButtonBarDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" showButtonBar />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" showButtonBar />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showButtonBar />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showButtonBar />
     </div>
diff --git a/doc/calendar/DateTemplateDoc.vue b/doc/calendar/DateTemplateDoc.vue
index a5c517709..de89c003f 100644
--- a/doc/calendar/DateTemplateDoc.vue
+++ b/doc/calendar/DateTemplateDoc.vue
@@ -19,15 +19,13 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date">
+                basic: `<Calendar v-model="date">
     <template #date="slotProps">
         <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
         <template v-else>{{ slotProps.date.day }}</template>
     </template>
 </Calendar>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date">
             <template #date="slotProps">
@@ -47,8 +45,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date">
             <template #date="slotProps">
diff --git a/doc/calendar/DisabledDoc.vue b/doc/calendar/DisabledDoc.vue
index 2f7576808..66ccdedd1 100644
--- a/doc/calendar/DisabledDoc.vue
+++ b/doc/calendar/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" disabled />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" disabled />
     </div>
diff --git a/doc/calendar/FloatLabelDoc.vue b/doc/calendar/FloatLabelDoc.vue
index 53b680e90..441adc905 100644
--- a/doc/calendar/FloatLabelDoc.vue
+++ b/doc/calendar/FloatLabelDoc.vue
@@ -17,13 +17,11 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <Calendar v-model="date" inputId="birth_date" />
     <label for="birth_date">Birth Date</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Calendar v-model="date" inputId="birth_date" />
@@ -41,8 +39,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Calendar v-model="date" inputId="birth_date" />
diff --git a/doc/calendar/FormatDoc.vue b/doc/calendar/FormatDoc.vue
index 6f9e804a7..3e11fd99d 100644
--- a/doc/calendar/FormatDoc.vue
+++ b/doc/calendar/FormatDoc.vue
@@ -33,10 +33,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" dateFormat="dd/mm/yy" />
     </div>
@@ -51,8 +49,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" dateFormat="dd/mm/yy" />
     </div>
diff --git a/doc/calendar/IconDoc.vue b/doc/calendar/IconDoc.vue
index cf63943f6..82bfb10fc 100644
--- a/doc/calendar/IconDoc.vue
+++ b/doc/calendar/IconDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" showIcon />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" showIcon />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showIcon />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showIcon />
     </div>
diff --git a/doc/calendar/InlineDoc.vue b/doc/calendar/InlineDoc.vue
index 5e0b079bb..51ceb4c85 100644
--- a/doc/calendar/InlineDoc.vue
+++ b/doc/calendar/InlineDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" inline showWeek />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" inline showWeek />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" inline showWeek />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" inline showWeek />
     </div>
diff --git a/doc/calendar/InvalidDoc.vue b/doc/calendar/InvalidDoc.vue
index d1faeb76a..c697172a0 100644
--- a/doc/calendar/InvalidDoc.vue
+++ b/doc/calendar/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" class="p-invalid" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" class="p-invalid" />
     </div>
diff --git a/doc/calendar/MinMaxDoc.vue b/doc/calendar/MinMaxDoc.vue
index 496f60e83..35e606be4 100644
--- a/doc/calendar/MinMaxDoc.vue
+++ b/doc/calendar/MinMaxDoc.vue
@@ -16,10 +16,8 @@ export default {
             minDate: null,
             maxDate: null,
             code: {
-                basic: `
-<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
diff --git a/doc/calendar/MonthPickerDoc.vue b/doc/calendar/MonthPickerDoc.vue
index 9ca78a949..255e3ff90 100644
--- a/doc/calendar/MonthPickerDoc.vue
+++ b/doc/calendar/MonthPickerDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="month" dateFormat="mm/yy" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="month" dateFormat="mm/yy" />
     </div>
diff --git a/doc/calendar/MultipleDoc.vue b/doc/calendar/MultipleDoc.vue
index 89fa42fbd..a0e28e96d 100644
--- a/doc/calendar/MultipleDoc.vue
+++ b/doc/calendar/MultipleDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             dates: null,
             code: {
-                basic: `
-<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
diff --git a/doc/calendar/MultipleMonthsDoc.vue b/doc/calendar/MultipleMonthsDoc.vue
index 3a61aaa35..6c6d75730 100644
--- a/doc/calendar/MultipleMonthsDoc.vue
+++ b/doc/calendar/MultipleMonthsDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" :numberOfMonths="2" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" :numberOfMonths="2" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :numberOfMonths="2" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :numberOfMonths="2" />
     </div>
diff --git a/doc/calendar/RangeDoc.vue b/doc/calendar/RangeDoc.vue
index f9e95f0f3..b321346f1 100644
--- a/doc/calendar/RangeDoc.vue
+++ b/doc/calendar/RangeDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             dates: null,
             code: {
-                basic: `
-<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
diff --git a/doc/calendar/TimeDoc.vue b/doc/calendar/TimeDoc.vue
index f126e6d7e..44b647016 100644
--- a/doc/calendar/TimeDoc.vue
+++ b/doc/calendar/TimeDoc.vue
@@ -27,12 +27,10 @@ export default {
             datetime24h: null,
             time: null,
             code: {
-                basic: `
-<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
+                basic: `<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
 <Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
 <Calendar id="calendar-timeonly" v-model="time" timeOnly />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
@@ -60,8 +58,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
diff --git a/doc/calendar/TouchUIDoc.vue b/doc/calendar/TouchUIDoc.vue
index 5a2f33473..ba7ab3cc3 100644
--- a/doc/calendar/TouchUIDoc.vue
+++ b/doc/calendar/TouchUIDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" touchUI />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" touchUI />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" touchUI />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" touchUI />
     </div>
diff --git a/doc/calendar/YearPickerDoc.vue b/doc/calendar/YearPickerDoc.vue
index f65a3442e..e5347efe7 100644
--- a/doc/calendar/YearPickerDoc.vue
+++ b/doc/calendar/YearPickerDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar v-model="date" view="year" dateFormat="yy" />`,
-                options: `
-<template>
+                basic: `<Calendar v-model="date" view="year" dateFormat="yy" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="year" dateFormat="yy" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="year" dateFormat="yy" />
     </div>
diff --git a/doc/calendar/form/VeeValidateDoc.vue b/doc/calendar/form/VeeValidateDoc.vue
index ef63e0f46..a270c0d0c 100644
--- a/doc/calendar/form/VeeValidateDoc.vue
+++ b/doc/calendar/form/VeeValidateDoc.vue
@@ -43,8 +43,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
@@ -55,8 +54,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
@@ -97,8 +95,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
diff --git a/doc/calendar/pt/PTDoc.vue b/doc/calendar/pt/PTDoc.vue
index 539915e3a..00159f28d 100644
--- a/doc/calendar/pt/PTDoc.vue
+++ b/doc/calendar/pt/PTDoc.vue
@@ -21,8 +21,7 @@ export default {
         return {
             date: null,
             code: {
-                basic: `
-<Calendar
+                basic: `<Calendar
     v-model="date"
     showIcon
     :pt="{
@@ -32,8 +31,7 @@ export default {
         }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Calendar
             v-model="date"
@@ -57,8 +55,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Calendar
             v-model="date"
diff --git a/doc/calendar/theming/TailwindDoc.vue b/doc/calendar/theming/TailwindDoc.vue
index 42d967bed..9f7ea2214 100644
--- a/doc/calendar/theming/TailwindDoc.vue
+++ b/doc/calendar/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -151,8 +151,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Calendar v-model="date" />
     </div>
diff --git a/doc/card/AccessibilityDoc.vue b/doc/card/AccessibilityDoc.vue
index fe2da1bcb..7879d7407 100644
--- a/doc/card/AccessibilityDoc.vue
+++ b/doc/card/AccessibilityDoc.vue
@@ -18,8 +18,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Card role="region">
+                basic: `<Card role="region">
     Content
 </Card>`
             }
diff --git a/doc/card/AdvancedDoc.vue b/doc/card/AdvancedDoc.vue
index 068ceaea6..66989f86b 100644
--- a/doc/card/AdvancedDoc.vue
+++ b/doc/card/AdvancedDoc.vue
@@ -29,8 +29,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Card style="width: 25em">
+                basic: `<Card style="width: 25em">
     <template #header>
         <img alt="user header" src="/images/usercard.png" />
     </template>
@@ -47,8 +46,7 @@ export default {
         <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
     </template>
 </Card>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex align-items-center justify-content-center">
         <Card style="width: 25em">
             <template #header>
@@ -72,8 +70,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex align-items-center justify-content-center">
         <Card style="width: 25em">
             <template #header>
diff --git a/doc/card/pt/PTDoc.vue b/doc/card/pt/PTDoc.vue
index ed10bb1b4..08529ebe3 100644
--- a/doc/card/pt/PTDoc.vue
+++ b/doc/card/pt/PTDoc.vue
@@ -19,8 +19,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
+                basic: `<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
     <template #title> Simple Card </template>
     <template #content>
         <p>
@@ -29,8 +28,7 @@ export default {
         </p>
     </template>
 </Card>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
             <template #title> Simple Card </template>
@@ -43,8 +41,7 @@ export default {
         </Card>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
             <template #title> Simple Card </template>
diff --git a/doc/card/theming/TailwindDoc.vue b/doc/card/theming/TailwindDoc.vue
index 0d1eb6125..52e7d1ec7 100644
--- a/doc/card/theming/TailwindDoc.vue
+++ b/doc/card/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -39,8 +39,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex items-center justify-center">
         <Card style="width: 25em">
             <template #header>
diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index de5c310df..857a0548d 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -51,8 +51,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+                basic: `<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -70,8 +69,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -142,8 +140,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index 8594ff9dd..8a079db23 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -52,8 +52,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
+                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -72,8 +71,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
@@ -145,8 +143,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
diff --git a/doc/carousel/NumScrollDoc.vue b/doc/carousel/NumScrollDoc.vue
index 7ee516a6d..317b0c489 100644
--- a/doc/carousel/NumScrollDoc.vue
+++ b/doc/carousel/NumScrollDoc.vue
@@ -52,8 +52,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -72,8 +71,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -145,8 +143,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index 0616e66c1..0924d37bd 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -55,8 +55,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -75,8 +74,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -148,8 +146,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index f9a7f62e4..66c88d0d3 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -52,8 +52,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
+                basic: `<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
     :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
@@ -73,8 +72,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
             :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
@@ -147,8 +145,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
             :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
diff --git a/doc/carousel/pt/PTDoc.vue b/doc/carousel/pt/PTDoc.vue
index 32be965ab..7dadf9d31 100644
--- a/doc/carousel/pt/PTDoc.vue
+++ b/doc/carousel/pt/PTDoc.vue
@@ -56,8 +56,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Carousel
+                basic: `<Carousel
     :value="products"
     :numVisible="3"
     :numScroll="3"
@@ -83,8 +82,7 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Carousel
             :value="products"
@@ -163,8 +161,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel
             :value="products"
diff --git a/doc/carousel/theming/TailwindDoc.vue b/doc/carousel/theming/TailwindDoc.vue
index bc821512b..ef711e139 100644
--- a/doc/carousel/theming/TailwindDoc.vue
+++ b/doc/carousel/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded :service="['ProductService']" />
     </DocSectionText>
 </template>
@@ -70,8 +70,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/cascadeselect/AccessibilityDoc.vue b/doc/cascadeselect/AccessibilityDoc.vue
index 172c1cd91..9cf5dc53c 100644
--- a/doc/cascadeselect/AccessibilityDoc.vue
+++ b/doc/cascadeselect/AccessibilityDoc.vue
@@ -123,8 +123,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="dd1"></span>Options</span>
+                basic: `<span id="dd1"></span>Options</span>
 <CascadeSelect aria-labelledby="dd1" />
 
 <CascadeSelect aria-label="Options" />`
diff --git a/doc/cascadeselect/BasicDoc.vue b/doc/cascadeselect/BasicDoc.vue
index 4f7119050..1e0b87e1f 100644
--- a/doc/cascadeselect/BasicDoc.vue
+++ b/doc/cascadeselect/BasicDoc.vue
@@ -91,11 +91,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                basic: `<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@@ -185,8 +183,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/cascadeselect/DisabledDoc.vue b/doc/cascadeselect/DisabledDoc.vue
index 2062ca28e..a7b224959 100644
--- a/doc/cascadeselect/DisabledDoc.vue
+++ b/doc/cascadeselect/DisabledDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />`,
-                options: `
-<template>
+                basic: `<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
     </div>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
     </div>
diff --git a/doc/cascadeselect/FloatLabelDoc.vue b/doc/cascadeselect/FloatLabelDoc.vue
index 6ceff09a6..5f5045b5a 100644
--- a/doc/cascadeselect/FloatLabelDoc.vue
+++ b/doc/cascadeselect/FloatLabelDoc.vue
@@ -91,14 +91,12 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
         :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     <label for="cs-city">City</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
@@ -191,8 +189,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
diff --git a/doc/cascadeselect/InvalidDoc.vue b/doc/cascadeselect/InvalidDoc.vue
index fa7856371..b6e658839 100644
--- a/doc/cascadeselect/InvalidDoc.vue
+++ b/doc/cascadeselect/InvalidDoc.vue
@@ -88,11 +88,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                basic: `<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@@ -182,8 +180,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/cascadeselect/LoadingStateDoc.vue b/doc/cascadeselect/LoadingStateDoc.vue
index f117b9a2a..861be1caa 100644
--- a/doc/cascadeselect/LoadingStateDoc.vue
+++ b/doc/cascadeselect/LoadingStateDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />`,
-                options: `
-<template>
+                basic: `<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
     </div>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
     </div>
diff --git a/doc/cascadeselect/TemplateDoc.vue b/doc/cascadeselect/TemplateDoc.vue
index 9cba80708..fa9a21603 100644
--- a/doc/cascadeselect/TemplateDoc.vue
+++ b/doc/cascadeselect/TemplateDoc.vue
@@ -100,8 +100,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                basic: `<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
     <template #option="slotProps">
         <div class="flex align-items-center">
@@ -112,8 +111,7 @@ export default {
         </div>
     </template>
 </CascadeSelect>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
@@ -212,8 +210,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
diff --git a/doc/cascadeselect/form/VeeValidateDoc.vue b/doc/cascadeselect/form/VeeValidateDoc.vue
index d767c7377..603204c66 100644
--- a/doc/cascadeselect/form/VeeValidateDoc.vue
+++ b/doc/cascadeselect/form/VeeValidateDoc.vue
@@ -127,8 +127,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
@@ -139,8 +138,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
@@ -260,8 +258,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
diff --git a/doc/cascadeselect/pt/PTDoc.vue b/doc/cascadeselect/pt/PTDoc.vue
index 044d74e55..214678d26 100644
--- a/doc/cascadeselect/pt/PTDoc.vue
+++ b/doc/cascadeselect/pt/PTDoc.vue
@@ -96,8 +96,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<CascadeSelect
+                basic: `<CascadeSelect
     v-model="selectedCity"
     :options="countries"
     optionLabel="cname"
@@ -108,8 +107,7 @@ export default {
         root: { style: { minWidth: '14rem' } }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect
             v-model="selectedCity"
@@ -208,8 +206,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect
             v-model="selectedCity"
diff --git a/doc/cascadeselect/theming/TailwindDoc.vue b/doc/cascadeselect/theming/TailwindDoc.vue
index bae27285c..d873a976d 100644
--- a/doc/cascadeselect/theming/TailwindDoc.vue
+++ b/doc/cascadeselect/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -62,8 +62,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/chart/AccessibilityDoc.vue b/doc/chart/AccessibilityDoc.vue
index 7435c5d43..372191d1a 100644
--- a/doc/chart/AccessibilityDoc.vue
+++ b/doc/chart/AccessibilityDoc.vue
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />`
+                basic: `<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />`
             }
         };
     }
diff --git a/doc/chart/BasicDoc.vue b/doc/chart/BasicDoc.vue
index 74802a4e0..e7261ac39 100644
--- a/doc/chart/BasicDoc.vue
+++ b/doc/chart/BasicDoc.vue
@@ -35,10 +35,8 @@ export default {
                 }
             },
             code: {
-                basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" />`,
-                options: `
-<template>
+                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" />`,
+                options: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
@@ -71,8 +69,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue
index b4f649a2c..8880a682b 100644
--- a/doc/chart/ComboDoc.vue
+++ b/doc/chart/ComboDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -108,8 +106,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue
index e9a3a1804..f2228a77d 100644
--- a/doc/chart/DoughnutDoc.vue
+++ b/doc/chart/DoughnutDoc.vue
@@ -17,10 +17,8 @@ export default {
                 cutout: '60%'
             },
             code: {
-                basic: `
-<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -57,8 +55,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue
index 1fa0fe6f7..4ce9aa924 100644
--- a/doc/chart/HorizontalBarDoc.vue
+++ b/doc/chart/HorizontalBarDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
-                options: `
-<template>
+                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
+                options: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
@@ -103,8 +101,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue
index 646e3786f..f26511a5e 100644
--- a/doc/chart/LineDoc.vue
+++ b/doc/chart/LineDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -99,8 +97,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue
index e5aec7f95..6f39a2926 100644
--- a/doc/chart/LineStylesDoc.vue
+++ b/doc/chart/LineStylesDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -108,8 +106,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue
index 5ca0f7ca8..2732debfb 100644
--- a/doc/chart/MultiAxisDoc.vue
+++ b/doc/chart/MultiAxisDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -117,8 +115,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue
index b1a258bc6..6b9c2a98b 100644
--- a/doc/chart/PieChartDoc.vue
+++ b/doc/chart/PieChartDoc.vue
@@ -23,10 +23,8 @@ export default {
                 }
             },
             code: {
-                basic: `
-<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -69,8 +67,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue
index 0892e3674..5b648d854 100644
--- a/doc/chart/PolarAreaDoc.vue
+++ b/doc/chart/PolarAreaDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -82,8 +80,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue
index 01855b3b2..7ed7195ec 100644
--- a/doc/chart/RadarDoc.vue
+++ b/doc/chart/RadarDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue
index 3b135b5fb..8bc63ed78 100644
--- a/doc/chart/StackedBarDoc.vue
+++ b/doc/chart/StackedBarDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `
-<template>
+                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -109,8 +107,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue
index 5077120ee..198e2ff12 100644
--- a/doc/chart/VerticalBarDoc.vue
+++ b/doc/chart/VerticalBarDoc.vue
@@ -15,10 +15,8 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
-                options: `
-<template>
+                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
+                options: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
@@ -102,8 +100,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
diff --git a/doc/chart/pt/PTDoc.vue b/doc/chart/pt/PTDoc.vue
index ee7ca7f5b..6dae7d7f7 100644
--- a/doc/chart/pt/PTDoc.vue
+++ b/doc/chart/pt/PTDoc.vue
@@ -30,8 +30,7 @@ export default {
                 }
             },
             code: {
-                basic: `
-<Chart
+                basic: `<Chart
     type="pie"
     :data="chartData"
     :options="chartOptions"
@@ -39,8 +38,7 @@ export default {
         root: { class: 'w-full md:w-30rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Chart
             type="pie"
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Chart
             type="pie"
diff --git a/doc/chart/theming/TailwindDoc.vue b/doc/chart/theming/TailwindDoc.vue
index 7e0c3dc55..57d419311 100644
--- a/doc/chart/theming/TailwindDoc.vue
+++ b/doc/chart/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" embedded />
     </DocSectionText>
 </template>
@@ -24,8 +24,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
diff --git a/doc/checkbox/AccessibilityDoc.vue b/doc/checkbox/AccessibilityDoc.vue
index 20cf16f0e..1dba20b6a 100644
--- a/doc/checkbox/AccessibilityDoc.vue
+++ b/doc/checkbox/AccessibilityDoc.vue
@@ -37,8 +37,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="chkbox1">Remember Me</label>
+                basic: `<label for="chkbox1">Remember Me</label>
 <Checkbox inputId="chkbox1" />
 
 <span id="chkbox2">Remember Me</span>
diff --git a/doc/checkbox/BasicDoc.vue b/doc/checkbox/BasicDoc.vue
index dfce32a65..baf5aa9c4 100644
--- a/doc/checkbox/BasicDoc.vue
+++ b/doc/checkbox/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<Checkbox v-model="checked" :binary="true" />`,
-                options: `
-<template>
+                basic: `<Checkbox v-model="checked" :binary="true" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
diff --git a/doc/checkbox/DisabledDoc.vue b/doc/checkbox/DisabledDoc.vue
index 8b1c8325a..9e1a3082f 100644
--- a/doc/checkbox/DisabledDoc.vue
+++ b/doc/checkbox/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<Checkbox v-model="checked" disabled />`,
-                options: `
-<template>
+                basic: `<Checkbox v-model="checked" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" disabled />
     </div>
diff --git a/doc/checkbox/DynamicDoc.vue b/doc/checkbox/DynamicDoc.vue
index 01df48951..6b6b7905f 100644
--- a/doc/checkbox/DynamicDoc.vue
+++ b/doc/checkbox/DynamicDoc.vue
@@ -25,13 +25,11 @@ export default {
                 { name: 'Research', key: 'R' }
             ],
             code: {
-                basic: `
-<div v-for="category of categories" :key="category.key" class="flex align-items-center">
+                basic: `<div v-for="category of categories" :key="category.key" class="flex align-items-center">
     <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
     <label :for="category.key">{{ category.name }}</label>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category of categories" :key="category.key" class="flex align-items-center">
@@ -57,8 +55,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category of categories" :key="category.key" class="flex align-items-center">
diff --git a/doc/checkbox/GroupDoc.vue b/doc/checkbox/GroupDoc.vue
index f17e9f5b8..21320e466 100644
--- a/doc/checkbox/GroupDoc.vue
+++ b/doc/checkbox/GroupDoc.vue
@@ -29,8 +29,7 @@ export default {
         return {
             pizza: null,
             code: {
-                basic: `
-<div class="card flex flex-wrap justify-content-center gap-3">
+                basic: `<div class="card flex flex-wrap justify-content-center gap-3">
     <div class="flex align-items-center">
         <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
         <label for="ingredient1" class="ml-2"> Cheese </label>
@@ -48,8 +47,7 @@ export default {
         <label for="ingredient4" class="ml-2"> Onion </label>
     </div>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <div class="flex align-items-center">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
@@ -79,8 +77,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <div class="flex align-items-center">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index 3b65f51d2..855eb4dda 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<Checkbox v-model="checked" class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<Checkbox v-model="checked" class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" class="p-invalid" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" class="p-invalid" />
     </div>
diff --git a/doc/checkbox/form/VeeValidateDoc.vue b/doc/checkbox/form/VeeValidateDoc.vue
index 62c4d73e6..0147e7805 100644
--- a/doc/checkbox/form/VeeValidateDoc.vue
+++ b/doc/checkbox/form/VeeValidateDoc.vue
@@ -42,8 +42,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="chbx">I've read and accept the terms & conditions.</label>
@@ -54,8 +53,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="chbx">I've read and accept the terms & conditions.</label>
@@ -95,8 +93,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="chbx">I've read and accept the terms & conditions.</label>
diff --git a/doc/checkbox/pt/PTDoc.vue b/doc/checkbox/pt/PTDoc.vue
index a6fe398af..050364c4a 100644
--- a/doc/checkbox/pt/PTDoc.vue
+++ b/doc/checkbox/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<Checkbox
+                basic: `<Checkbox
     v-model="checked"
     binary
     :pt="{
@@ -30,8 +29,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Checkbox
             v-model="checked"
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Checkbox
             v-model="checked"
diff --git a/doc/checkbox/theming/TailwindDoc.vue b/doc/checkbox/theming/TailwindDoc.vue
index 2bffa8e03..de0d6c1e9 100644
--- a/doc/checkbox/theming/TailwindDoc.vue
+++ b/doc/checkbox/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -41,8 +41,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
diff --git a/doc/chip/BasicDoc.vue b/doc/chip/BasicDoc.vue
index 34b16499b..7b1071d78 100644
--- a/doc/chip/BasicDoc.vue
+++ b/doc/chip/BasicDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Chip label="Action" />
+                basic: `<Chip label="Action" />
 <Chip label="Comedy" />
 <Chip label="Mystery" />
 <Chip label="Thriller" removable />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Action" />
         <Chip label="Comedy" />
@@ -34,8 +32,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Action" />
         <Chip label="Comedy" />
diff --git a/doc/chip/IconDoc.vue b/doc/chip/IconDoc.vue
index 8405f0b0d..bff89b2c7 100644
--- a/doc/chip/IconDoc.vue
+++ b/doc/chip/IconDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Chip label="Apple" icon="pi pi-apple" />
+                basic: `<Chip label="Apple" icon="pi pi-apple" />
 <Chip label="Facebook" icon="pi pi-facebook" />
 <Chip label="Google" icon="pi pi-google" />
 <Chip label="Microsoft" icon="pi pi-microsoft" removable />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Apple" icon="pi pi-apple" />
         <Chip label="Facebook" icon="pi pi-facebook" />
@@ -33,8 +31,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Apple" icon="pi pi-apple" />
         <Chip label="Facebook" icon="pi pi-facebook" />
diff --git a/doc/chip/ImageDoc.vue b/doc/chip/ImageDoc.vue
index 381e29686..6cbc20b97 100644
--- a/doc/chip/ImageDoc.vue
+++ b/doc/chip/ImageDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
+                basic: `<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
 <Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" />
 <Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" />
 <Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
         <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
@@ -34,8 +32,7 @@ export default {
 <script >
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
         <Chip label="Asiya Javayant" image=https://primefaces.org/cdn/primevue"/images/avatar/asiyajavayant.png" />
diff --git a/doc/chip/TemplateDoc.vue b/doc/chip/TemplateDoc.vue
index f94347d05..07e1dbfcb 100644
--- a/doc/chip/TemplateDoc.vue
+++ b/doc/chip/TemplateDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Chip class="pl-0 pr-3">
+                basic: `<Chip class="pl-0 pr-3">
     <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
     <span class="ml-2 font-medium">PRIME</span>
 </Chip>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Chip class="pl-0 pr-3">
             <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
@@ -34,8 +32,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chip class="pl-0 pr-3">
             <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
diff --git a/doc/chip/pt/PTDoc.vue b/doc/chip/pt/PTDoc.vue
index f574b4adb..7d6c5eee7 100644
--- a/doc/chip/pt/PTDoc.vue
+++ b/doc/chip/pt/PTDoc.vue
@@ -18,8 +18,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Chip
+                basic: `<Chip
     label="Amy Elsner"
     image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
     :pt="{
@@ -27,8 +26,7 @@ export default {
         label: { class: 'text-white' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <Chip
         label="Amy Elsner"
         image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
@@ -38,8 +36,7 @@ export default {
         }"
     />
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <Chip
         label="Amy Elsner"
         image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
diff --git a/doc/chip/theming/TailwindDoc.vue b/doc/chip/theming/TailwindDoc.vue
index 73831c5b5..97d9c1878 100644
--- a/doc/chip/theming/TailwindDoc.vue
+++ b/doc/chip/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -34,8 +34,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Apple" icon="pi pi-apple" />
         <Chip label="Facebook" icon="pi pi-facebook" />
diff --git a/doc/chips/AccessibilityDoc.vue b/doc/chips/AccessibilityDoc.vue
index 7ce48f87a..11210db85 100644
--- a/doc/chips/AccessibilityDoc.vue
+++ b/doc/chips/AccessibilityDoc.vue
@@ -71,8 +71,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="chips1">Tags</label>
+                basic: `<label for="chips1">Tags</label>
 <Chips inputId="chips1" />
 
 <span id="chips2">Tags</span>
diff --git a/doc/chips/BasicDoc.vue b/doc/chips/BasicDoc.vue
index 6908bbcc7..9583e6a4d 100644
--- a/doc/chips/BasicDoc.vue
+++ b/doc/chips/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Chips v-model="value" />`,
-                options: `
-<template>
+                basic: `<Chips v-model="value" />`,
+                options: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" />
     </div>
diff --git a/doc/chips/DisabledDoc.vue b/doc/chips/DisabledDoc.vue
index c988ba8ba..21f58d425 100644
--- a/doc/chips/DisabledDoc.vue
+++ b/doc/chips/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Chips v-model="value" disabled />`,
-                options: `
-<template>
+                basic: `<Chips v-model="value" disabled />`,
+                options: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" disabled />
     </div>
diff --git a/doc/chips/FloatLabelDoc.vue b/doc/chips/FloatLabelDoc.vue
index 4be48d0a2..5a9f5c83d 100644
--- a/doc/chips/FloatLabelDoc.vue
+++ b/doc/chips/FloatLabelDoc.vue
@@ -17,13 +17,11 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <Chips id="chips" v-model="value" />
     <label for="chips">Chips</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card p-fluid">
         <span class="p-float-label">
             <Chips id="chips" v-model="value" />
@@ -41,8 +39,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <span class="p-float-label">
             <Chips id="chips" v-model="value" />
diff --git a/doc/chips/InvalidDoc.vue b/doc/chips/InvalidDoc.vue
index b539949f5..7ab8dfac0 100644
--- a/doc/chips/InvalidDoc.vue
+++ b/doc/chips/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Chips v-model="value" class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<Chips v-model="value" class="p-invalid" />`,
+                options: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" class="p-invalid" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" class="p-invalid" />
     </div>
diff --git a/doc/chips/SeparatorDoc.vue b/doc/chips/SeparatorDoc.vue
index 886916721..265df766c 100644
--- a/doc/chips/SeparatorDoc.vue
+++ b/doc/chips/SeparatorDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Chips v-model="value" separator=","  />`,
-                options: `
-<template>
+                basic: `<Chips v-model="value" separator=","  />`,
+                options: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" separator="," />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <Chips v-model="value" separator=","  />
     </div>
diff --git a/doc/chips/TemplateDoc.vue b/doc/chips/TemplateDoc.vue
index d9302acb1..93c72e65a 100644
--- a/doc/chips/TemplateDoc.vue
+++ b/doc/chips/TemplateDoc.vue
@@ -21,8 +21,7 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Chips v-model="value">
+                basic: `<Chips v-model="value">
     <template #chip="slotProps">
         <div>
             <span>{{ slotProps.value }} - (active) </span>
@@ -30,8 +29,7 @@ export default {
         </div>
     </template>
 </Chips>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card p-fluid">
         <Chips v-model="value">
             <template #chip="slotProps">
@@ -53,8 +51,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <Chips v-model="value">
             <template #chip="slotProps">
diff --git a/doc/chips/form/VeeValidateDoc.vue b/doc/chips/form/VeeValidateDoc.vue
index cafb23cf1..ecab1f5e9 100644
--- a/doc/chips/form/VeeValidateDoc.vue
+++ b/doc/chips/form/VeeValidateDoc.vue
@@ -42,8 +42,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
@@ -53,8 +52,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
@@ -94,8 +92,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
diff --git a/doc/chips/pt/PTDoc.vue b/doc/chips/pt/PTDoc.vue
index 01b239c0f..61e2485fd 100644
--- a/doc/chips/pt/PTDoc.vue
+++ b/doc/chips/pt/PTDoc.vue
@@ -19,8 +19,7 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Chips
+                basic: `<Chips
     v-model="value"
     :pt="{
         root: { class: 'flex' },
@@ -28,8 +27,7 @@ export default {
         token: { class: 'bg-primary' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Chips
             v-model="value"
@@ -51,8 +49,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chips
             v-model="value"
diff --git a/doc/chips/theming/TailwindDoc.vue b/doc/chips/theming/TailwindDoc.vue
index eca2de428..a2b5ec67d 100644
--- a/doc/chips/theming/TailwindDoc.vue
+++ b/doc/chips/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -50,8 +50,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Chips v-model="value" />
     </div>
diff --git a/doc/colorpicker/BasicDoc.vue b/doc/colorpicker/BasicDoc.vue
index c004bc8da..7b4898564 100644
--- a/doc/colorpicker/BasicDoc.vue
+++ b/doc/colorpicker/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             color: null,
             code: {
-                basic: `
-<ColorPicker v-model="color" />`,
-                options: `
-<template>
+                basic: `<ColorPicker v-model="color" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" />
     </div>
diff --git a/doc/colorpicker/DisabledDoc.vue b/doc/colorpicker/DisabledDoc.vue
index 5a783e138..a5e9e9924 100644
--- a/doc/colorpicker/DisabledDoc.vue
+++ b/doc/colorpicker/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             color: null,
             code: {
-                basic: `
-<ColorPicker v-model="color" disabled />`,
-                options: `
-<template>
+                basic: `<ColorPicker v-model="color" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" disabled />
     </div>
diff --git a/doc/colorpicker/FormatDoc.vue b/doc/colorpicker/FormatDoc.vue
index cedcd8f52..3e8d2f9a5 100644
--- a/doc/colorpicker/FormatDoc.vue
+++ b/doc/colorpicker/FormatDoc.vue
@@ -30,12 +30,10 @@ export default {
             colorRGB: { r: 100, g: 102, b: 241 },
             colorHSB: { h: 239, s: 59, b: 95 },
             code: {
-                basic: `
-<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
+                basic: `<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
 <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
 <ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3">
         <div class="flex-1 flex flex-column align-items-center">
             <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
@@ -66,8 +64,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3">
         <div class="flex-1 flex flex-column align-items-center">
             <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
diff --git a/doc/colorpicker/InlineDoc.vue b/doc/colorpicker/InlineDoc.vue
index f8738f558..1ea5497a5 100644
--- a/doc/colorpicker/InlineDoc.vue
+++ b/doc/colorpicker/InlineDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             color: null,
             code: {
-                basic: `
-<ColorPicker v-model="color" inline />`,
-                options: `
-<template>
+                basic: `<ColorPicker v-model="color" inline />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" inline />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" inline />
     </div>
diff --git a/doc/colorpicker/form/VeeValidateDoc.vue b/doc/colorpicker/form/VeeValidateDoc.vue
index 96a1a0522..901d3a82d 100644
--- a/doc/colorpicker/form/VeeValidateDoc.vue
+++ b/doc/colorpicker/form/VeeValidateDoc.vue
@@ -41,8 +41,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
@@ -52,8 +51,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
@@ -92,8 +90,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
diff --git a/doc/colorpicker/pt/PTDoc.vue b/doc/colorpicker/pt/PTDoc.vue
index da21da2e8..784920da0 100644
--- a/doc/colorpicker/pt/PTDoc.vue
+++ b/doc/colorpicker/pt/PTDoc.vue
@@ -18,16 +18,14 @@ export default {
         return {
             color: null,
             code: {
-                basic: `
-<ColorPicker
+                basic: `<ColorPicker
     v-model="color"
     inline
     :pt="{
         colorHandler: { class: 'w-1rem h-1rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker
             v-model="color"
@@ -48,8 +46,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ColorPicker
             v-model="color"
diff --git a/doc/colorpicker/theming/TailwindDoc.vue b/doc/colorpicker/theming/TailwindDoc.vue
index d8e567711..7595cc5ae 100644
--- a/doc/colorpicker/theming/TailwindDoc.vue
+++ b/doc/colorpicker/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -72,8 +72,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <ColorPicker v-model="color" />
     </div>
diff --git a/doc/colors/OverviewDoc.vue b/doc/colors/OverviewDoc.vue
index 260b2c446..75a4f5822 100644
--- a/doc/colors/OverviewDoc.vue
+++ b/doc/colors/OverviewDoc.vue
@@ -71,8 +71,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div style="backgroundColor: var(--highlight-bg), color: var(--highlight-text-color), borderRadius: var(--border-radius), padding: 3rem">Highlighted Item</div>
+                basic: `<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>`
             }
         };
diff --git a/doc/configuration/locale/SetLocaleDoc.vue b/doc/configuration/locale/SetLocaleDoc.vue
index 880024ef1..afe4013c1 100644
--- a/doc/configuration/locale/SetLocaleDoc.vue
+++ b/doc/configuration/locale/SetLocaleDoc.vue
@@ -24,8 +24,7 @@ export default {
 });`
             },
             code2: {
-                basic: `
-import { defineComponent, onMounted } from "vue";
+                basic: `import { defineComponent, onMounted } from "vue";
 import { usePrimeVue } from "primevue/config";
 
 export default defineComponent({
diff --git a/doc/confirmdialog/AccessibilityDoc.vue b/doc/confirmdialog/AccessibilityDoc.vue
index e6bb57f79..55e2d4114 100644
--- a/doc/confirmdialog/AccessibilityDoc.vue
+++ b/doc/confirmdialog/AccessibilityDoc.vue
@@ -75,14 +75,12 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
+                basic: `<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>`
             },
             code2: {
-                basic: `
-<script setup>
+                basic: `<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index 73c2c6111..7515b5f80 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -15,12 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ConfirmDialog></ConfirmDialog>>
+                basic: `<ConfirmDialog></ConfirmDialog>>
 <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
 <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>`,
-                options: `
-<template>
+                options: `<template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
@@ -62,8 +60,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index af81d1b20..b32456f04 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -14,16 +14,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-import {createApp} from 'vue';
+                basic: `import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
 app.use(ConfirmationService);`
             },
             code2: {
-                basic: `
-import { useConfirm } from "primevue/useconfirm";
+                basic: `import { useConfirm } from "primevue/useconfirm";
 
 const confirm = useConfirm();`
             }
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index ed1652971..53be3058b 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -27,8 +27,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ConfirmDialog group="positionDialog"></ConfirmDialog>
+                basic: `<ConfirmDialog group="positionDialog"></ConfirmDialog>
 <div class="flex flex-wrap justify-content-center gap-2 mb-2">
     <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
@@ -43,8 +42,7 @@ export default {
     <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <Toast />
     <ConfirmDialog group="positionDialog"></ConfirmDialog>
     <div class="card">
@@ -86,8 +84,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <Toast />
     <ConfirmDialog group="positionDialog"></ConfirmDialog>
     <div class="card">
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index 339dd8b79..a1ade830a 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -21,8 +21,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ConfirmDialog group="templating">
+                basic: `<ConfirmDialog group="templating">
     <template #message="slotProps">
         <div class="flex p-4">
             <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
@@ -31,8 +30,7 @@ export default {
     </template>
 </ConfirmDialog>
 <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>`,
-                options: `
-<template>
+                options: `<template>
     <Toast />
     <ConfirmDialog group="templating">
         <template #message="slotProps">
@@ -69,8 +67,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <Toast />
     <ConfirmDialog group="templating">
         <template #message="slotProps">
diff --git a/doc/confirmdialog/pt/PTDoc.vue b/doc/confirmdialog/pt/PTDoc.vue
index b61014d66..60010b2aa 100644
--- a/doc/confirmdialog/pt/PTDoc.vue
+++ b/doc/confirmdialog/pt/PTDoc.vue
@@ -12,15 +12,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ConfirmDialog
+                basic: `<ConfirmDialog
     group="pt"
     :pt="{
         headerTitle: { class: 'text-primary' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <ConfirmDialog
         group="pt"
         :pt="{
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <ConfirmDialog
         group="pt"
         :pt="{
diff --git a/doc/confirmdialog/theming/TailwindDoc.vue b/doc/confirmdialog/theming/TailwindDoc.vue
index 292eb910b..49d4ea76f 100644
--- a/doc/confirmdialog/theming/TailwindDoc.vue
+++ b/doc/confirmdialog/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -102,8 +102,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-center">
diff --git a/doc/confirmpopup/AccessibilityDoc.vue b/doc/confirmpopup/AccessibilityDoc.vue
index f1575093c..bd1e7857d 100644
--- a/doc/confirmpopup/AccessibilityDoc.vue
+++ b/doc/confirmpopup/AccessibilityDoc.vue
@@ -74,14 +74,12 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-<ConfirmPopup id="confirm" aria-label="popup" />
+                basic: `<ConfirmPopup id="confirm" aria-label="popup" />
 
 <Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />`
             },
             code2: {
-                basic: `
-<script setup>
+                basic: `<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 const openPopup = (event) => {
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index a5d68aab1..9d8eb7bf7 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -15,14 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ConfirmPopup></ConfirmPopup>
+                basic: `<ConfirmPopup></ConfirmPopup>
 <div class="card flex flex-wrap gap-2 justify-content-center">
     <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
     <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
@@ -64,8 +62,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
diff --git a/doc/confirmpopup/ConfirmationServiceDoc.vue b/doc/confirmpopup/ConfirmationServiceDoc.vue
index 2ae1ccd6d..9eb37a8dd 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -14,16 +14,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-import {createApp} from 'vue';
+                basic: `import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
 app.use(ConfirmationService);`
             },
             code2: {
-                basic: `
-import { useConfirm } from "primevue/useconfirm";
+                basic: `import { useConfirm } from "primevue/useconfirm";
 
 const confirm = useConfirm();`
             }
diff --git a/doc/confirmpopup/TemplateDoc.vue b/doc/confirmpopup/TemplateDoc.vue
index 5d3b3235e..e547ec28a 100644
--- a/doc/confirmpopup/TemplateDoc.vue
+++ b/doc/confirmpopup/TemplateDoc.vue
@@ -21,8 +21,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ConfirmPopup group="demo">
+                basic: `<ConfirmPopup group="demo">
     <template #message="slotProps">
         <div class="flex p-4">
             <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
@@ -33,8 +32,7 @@ export default {
 <div class="card flex flex-wrap gap-2 justify-content-center">
     <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <Toast />
     <ConfirmPopup group="demo">
         <template #message="slotProps">
@@ -71,8 +69,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <Toast />
     <ConfirmPopup group="demo">
         <template #message="slotProps">
diff --git a/doc/confirmpopup/pt/PTDoc.vue b/doc/confirmpopup/pt/PTDoc.vue
index 2b3a9bfe3..b9ce1eb5d 100644
--- a/doc/confirmpopup/pt/PTDoc.vue
+++ b/doc/confirmpopup/pt/PTDoc.vue
@@ -17,15 +17,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ConfirmPopup
+                basic: `<ConfirmPopup
     group="pt"
     :pt="{
         root: { class: 'surface-100' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <ConfirmPopup
         group="pt"
         :pt="{
@@ -58,8 +56,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <ConfirmPopup
         group="pt"
         :pt="{
diff --git a/doc/confirmpopup/theming/TailwindDoc.vue b/doc/confirmpopup/theming/TailwindDoc.vue
index 772c6777c..c97f1cb3d 100644
--- a/doc/confirmpopup/theming/TailwindDoc.vue
+++ b/doc/confirmpopup/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -45,8 +45,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-center">
diff --git a/doc/contextmenu/BasicDoc.vue b/doc/contextmenu/BasicDoc.vue
index 6c565279c..c546a453b 100644
--- a/doc/contextmenu/BasicDoc.vue
+++ b/doc/contextmenu/BasicDoc.vue
@@ -18,11 +18,9 @@ export default {
                 { label: 'Delete', icon: 'pi pi-fw pi-trash' }
             ],
             code: {
-                basic: `
-<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+                basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
 <ContextMenu ref="menu" :model="items" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex md:justify-content-center">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
@@ -46,8 +44,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
diff --git a/doc/contextmenu/DocumentDoc.vue b/doc/contextmenu/DocumentDoc.vue
index 33edc1786..58da6a8b6 100644
--- a/doc/contextmenu/DocumentDoc.vue
+++ b/doc/contextmenu/DocumentDoc.vue
@@ -140,11 +140,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+                basic: `<p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
 <ContextMenu global :model="items" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card text-center">
         <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
         <ContextMenu global :model="items" />
@@ -285,8 +283,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card text-center">
         <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
         <ContextMenu global :model="items" />
diff --git a/doc/contextmenu/pt/PTDoc.vue b/doc/contextmenu/pt/PTDoc.vue
index 5aa5a61df..de09596c4 100644
--- a/doc/contextmenu/pt/PTDoc.vue
+++ b/doc/contextmenu/pt/PTDoc.vue
@@ -144,8 +144,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+                basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
 <ContextMenu
     ref="menu"
     :model="items"
@@ -153,8 +152,7 @@ export default {
         action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex md:justify-content-center">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu
@@ -306,8 +304,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu
diff --git a/doc/contextmenu/theming/TailwindDoc.vue b/doc/contextmenu/theming/TailwindDoc.vue
index bd6128a95..c7e119439 100644
--- a/doc/contextmenu/theming/TailwindDoc.vue
+++ b/doc/contextmenu/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -49,8 +49,7 @@ xport default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
diff --git a/doc/datatable/BasicDoc.vue b/doc/datatable/BasicDoc.vue
index 20be7a12a..1372c146b 100644
--- a/doc/datatable/BasicDoc.vue
+++ b/doc/datatable/BasicDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/ColumnGroupDoc.vue b/doc/datatable/ColumnGroupDoc.vue
index 09a327500..d91f26cbf 100644
--- a/doc/datatable/ColumnGroupDoc.vue
+++ b/doc/datatable/ColumnGroupDoc.vue
@@ -58,8 +58,7 @@ export default {
         return {
             sales: null,
             code: {
-                basic: `
-<DataTable :value="sales" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="sales" tableStyle="min-width: 50rem">
     <ColumnGroup type="header">
         <Row>
             <Column header="Product" :rowspan="3" />
@@ -101,8 +100,7 @@ export default {
         </Row>
     </ColumnGroup>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <DataTable :value="sales" tableStyle="min-width: 50rem">
         <ColumnGroup type="header">
             <Row>
@@ -198,8 +196,7 @@ export default {
 }
 <\/script>
 `,
-                composition: `
-<template>
+                composition: `<template>
     <DataTable :value="sales" tableStyle="min-width: 50rem">
         <ColumnGroup type="header">
             <Row>
diff --git a/doc/datatable/ColumnToggleDoc.vue b/doc/datatable/ColumnToggleDoc.vue
index 848e26027..534bbc228 100644
--- a/doc/datatable/ColumnToggleDoc.vue
+++ b/doc/datatable/ColumnToggleDoc.vue
@@ -26,8 +26,7 @@ export default {
             columns: null,
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
     <template #header>
         <div style="text-align:left">
             <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"    
@@ -37,8 +36,7 @@ export default {
     <Column field="code" header="Code" />
     <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div>
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
@@ -83,8 +81,7 @@ export default {
 }
 <\/script>
 `,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
diff --git a/doc/datatable/ConditionalStyleDoc.vue b/doc/datatable/ConditionalStyleDoc.vue
index 8de5b9453..43fc17847 100644
--- a/doc/datatable/ConditionalStyleDoc.vue
+++ b/doc/datatable/ConditionalStyleDoc.vue
@@ -27,8 +27,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
@@ -40,8 +39,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -92,8 +90,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/ContextMenuDoc.vue b/doc/datatable/ContextMenuDoc.vue
index b8973d12f..a2c5677e0 100644
--- a/doc/datatable/ContextMenuDoc.vue
+++ b/doc/datatable/ContextMenuDoc.vue
@@ -33,8 +33,7 @@ export default {
                 { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct) }
             ],
             code: {
-                basic: `
-<ContextMenu ref="cm" :model="menuModel" />
+                basic: `<ContextMenu ref="cm" :model="menuModel" />
 <DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu
         @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -46,8 +45,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div>
         <ContextMenu ref="cm" :model="menuModel" />
         <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" 
@@ -101,8 +99,7 @@ export default {
 }
 <\/script>
 `,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <ContextMenu ref="cm" :model="menuModel" />
         <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
diff --git a/doc/datatable/DynamicColumnsDoc.vue b/doc/datatable/DynamicColumnsDoc.vue
index 5de5781af..ea6bdca8a 100644
--- a/doc/datatable/DynamicColumnsDoc.vue
+++ b/doc/datatable/DynamicColumnsDoc.vue
@@ -19,12 +19,10 @@ export default {
             products: null,
             columns: null,
             code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
@@ -55,8 +53,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
diff --git a/doc/datatable/ExportDoc.vue b/doc/datatable/ExportDoc.vue
index 6b5474144..975dffb2a 100644
--- a/doc/datatable/ExportDoc.vue
+++ b/doc/datatable/ExportDoc.vue
@@ -26,8 +26,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
     <template #header>
         <div style="text-align: left">
             <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
@@ -38,8 +37,7 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
@@ -75,8 +73,7 @@ export default {
 }
 <\/script>
 `,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
diff --git a/doc/datatable/GridLinesDoc.vue b/doc/datatable/GridLinesDoc.vue
index a347f0480..1eac39e43 100644
--- a/doc/datatable/GridLinesDoc.vue
+++ b/doc/datatable/GridLinesDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/LazyLoadDoc.vue b/doc/datatable/LazyLoadDoc.vue
index c71974420..f2eaa0b1c 100644
--- a/doc/datatable/LazyLoadDoc.vue
+++ b/doc/datatable/LazyLoadDoc.vue
@@ -96,8 +96,7 @@ export default {
                 { field: 'representative.name', header: 'Representative' }
             ],
             code: {
-                basic: `
-<DataTable :value="customers" lazy paginator :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
+                basic: `<DataTable :value="customers" lazy paginator :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
         :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
         :globalFilterFields="['name','country.name', 'company', 'representative.name']"
         v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
@@ -123,8 +122,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
 	<div class="card p-fluid">
         <DataTable :value="customers" lazy paginator :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
                 :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
@@ -242,8 +240,7 @@ export default {
 }
 <\/script>
 `,
-                composition: `
-<template>
+                composition: `<template>
 	<div class="card p-fluid">
         <DataTable :value="customers" lazy paginator :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
             :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
diff --git a/doc/datatable/ReorderDoc.vue b/doc/datatable/ReorderDoc.vue
index 7226c99ca..61d185e09 100644
--- a/doc/datatable/ReorderDoc.vue
+++ b/doc/datatable/ReorderDoc.vue
@@ -24,13 +24,11 @@ export default {
             columns: null,
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
     <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
 	<div>
         <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
             <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
@@ -73,8 +71,7 @@ export default {
 }
 <\/script>                  
 `,
-                composition: `
-<template>
+                composition: `<template>
 	<div>
         <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
             <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
diff --git a/doc/datatable/RowExpansionDoc.vue b/doc/datatable/RowExpansionDoc.vue
index 6c8075233..5c4a75823 100644
--- a/doc/datatable/RowExpansionDoc.vue
+++ b/doc/datatable/RowExpansionDoc.vue
@@ -79,8 +79,7 @@ export default {
             products: null,
             expandedRows: [],
             code: {
-                basic: `
-<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
+                basic: `<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
         @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
     <template #header>
         <div class="flex flex-wrap justify-content-end gap-2">
@@ -137,8 +136,7 @@ export default {
         </div>
     </template>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
@@ -266,8 +264,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
diff --git a/doc/datatable/SizeDoc.vue b/doc/datatable/SizeDoc.vue
index 632d20d35..4e31b9c1f 100644
--- a/doc/datatable/SizeDoc.vue
+++ b/doc/datatable/SizeDoc.vue
@@ -30,16 +30,14 @@ export default {
                 { label: 'Large', value: 'large', class: 'lg' }
             ],
             code: {
-                basic: `
-<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+                basic: `<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
 <DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
@@ -73,8 +71,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
index 13fbd2995..d5b9dd01f 100644
--- a/doc/datatable/StatefulDoc.vue
+++ b/doc/datatable/StatefulDoc.vue
@@ -103,8 +103,7 @@ export default {
             ],
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             code: {
-                basic: `
-<DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
+                basic: `<DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
     stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
     selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
     <template #header>
@@ -161,8 +160,7 @@ export default {
     </Column>
     <template #empty> No customers found. </template>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
@@ -286,8 +284,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
diff --git a/doc/datatable/StripedRowsDoc.vue b/doc/datatable/StripedRowsDoc.vue
index d21b38e36..f6039237d 100644
--- a/doc/datatable/StripedRowsDoc.vue
+++ b/doc/datatable/StripedRowsDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue
index 11c5cc745..40dfc71ba 100644
--- a/doc/datatable/TemplateDoc.vue
+++ b/doc/datatable/TemplateDoc.vue
@@ -46,8 +46,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
     <template #header>
         <div class="flex flex-wrap align-items-center justify-content-between gap-2">
             <span class="text-xl text-900 font-bold">Products</span>
@@ -78,8 +77,7 @@ export default {
     </Column>
     <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
@@ -149,8 +147,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
diff --git a/doc/datatable/colresize/ExpandModeDoc.vue b/doc/datatable/colresize/ExpandModeDoc.vue
index cbe024405..1356fd056 100644
--- a/doc/datatable/colresize/ExpandModeDoc.vue
+++ b/doc/datatable/colresize/ExpandModeDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/colresize/FitModeDoc.vue b/doc/datatable/colresize/FitModeDoc.vue
index 587c87867..85e090e16 100644
--- a/doc/datatable/colresize/FitModeDoc.vue
+++ b/doc/datatable/colresize/FitModeDoc.vue
@@ -24,15 +24,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -57,8 +55,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/edit/CellEditDoc.vue b/doc/datatable/edit/CellEditDoc.vue
index 70a190f01..da5d939c5 100644
--- a/doc/datatable/edit/CellEditDoc.vue
+++ b/doc/datatable/edit/CellEditDoc.vue
@@ -36,8 +36,7 @@ export default {
                 { field: 'price', header: 'Price' }
             ],
             code: {
-                basic: `
-<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
         <template #body="{ data, field }">
             {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -52,8 +51,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card p-fluid">
         <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
@@ -135,8 +133,7 @@ export default {
     padding-bottom: 0;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
diff --git a/doc/datatable/edit/FilterSortEditDoc.vue b/doc/datatable/edit/FilterSortEditDoc.vue
index ad32e9ab1..1ea8691aa 100644
--- a/doc/datatable/edit/FilterSortEditDoc.vue
+++ b/doc/datatable/edit/FilterSortEditDoc.vue
@@ -33,8 +33,7 @@ export default {
                 price: { value: null, matchMode: FilterMatchMode.STARTS_WITH }
             },
             code: {
-                basic: `
-<DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
+                basic: `<DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
         @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
         <template #filter="{ filterModel, filterCallback }">
@@ -45,8 +44,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card p-fluid">
         <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
                 @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
@@ -121,8 +119,7 @@ export default {
     padding-bottom: 0;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
                 @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/edit/RowEditDoc.vue b/doc/datatable/edit/RowEditDoc.vue
index b2699b83b..90a8bdefc 100644
--- a/doc/datatable/edit/RowEditDoc.vue
+++ b/doc/datatable/edit/RowEditDoc.vue
@@ -57,8 +57,7 @@ export default {
                 { label: 'Out of Stock', value: 'OUTOFSTOCK' }
             ],
             code: {
-                basic: `
-<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
+                basic: `<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
         @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" style="width: 20%">
         <template #editor="{ data, field }">
@@ -92,8 +91,7 @@ export default {
     </Column>
     <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card p-fluid">
         <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
                 @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
@@ -184,8 +182,7 @@ export default {
     padding-bottom: 0.6rem;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid">
         <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
                 @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index a5c018c71..f56d46702 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -139,8 +139,7 @@ export default {
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             loading: true,
             code: {
-                basic: `
-<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+                basic: `<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
         filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
         <div class="flex justify-content-between">
@@ -249,8 +248,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
@@ -453,8 +451,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index d8168b984..530cefe7d 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -111,8 +111,7 @@ export default {
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             loading: true,
             code: {
-                basic: `
-<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
+                basic: `<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
         :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
     <template #header>
         <div class="flex justify-content-end">
@@ -182,8 +181,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
@@ -335,8 +333,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
diff --git a/doc/datatable/paginator/PaginatorBasicDoc.vue b/doc/datatable/paginator/PaginatorBasicDoc.vue
index 10b3a3f89..b91e36cba 100644
--- a/doc/datatable/paginator/PaginatorBasicDoc.vue
+++ b/doc/datatable/paginator/PaginatorBasicDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `
-<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
     <Column field="name" header="Name" style="width: 25%"></Column>
     <Column field="country.name" header="Country" style="width: 25%"></Column>
     <Column field="company" header="Company" style="width: 25%"></Column>
     <Column field="representative.name" header="Representative" style="width: 25%"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" style="width: 25%"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" style="width: 25%"></Column>
diff --git a/doc/datatable/paginator/PaginatorTemplateDoc.vue b/doc/datatable/paginator/PaginatorTemplateDoc.vue
index 0f461579f..c8964edb6 100644
--- a/doc/datatable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/datatable/paginator/PaginatorTemplateDoc.vue
@@ -38,8 +38,7 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `
-<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
+                basic: `<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
         paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
         currentPageReportTemplate="{first} to {last} of {totalRecords}">
     <template #paginatorstart>
@@ -53,8 +52,7 @@ export default {
     <Column field="company" header="Company" style="width: 25%"></Column>
     <Column field="representative.name" header="Representative" style="width: 25%"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
                 paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
@@ -87,8 +85,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
                 paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue
index f2f38e4a3..f4e4ea919 100644
--- a/doc/datatable/pt/PTDoc.vue
+++ b/doc/datatable/pt/PTDoc.vue
@@ -57,8 +57,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable
+                basic: `<DataTable
     :value="products"
     sortMode="multiple"
     :pt="{
@@ -102,8 +101,7 @@ export default {
         }"
     />
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable
             :value="products"
@@ -166,8 +164,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable
             :value="products"
diff --git a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
index 40e1695b8..ae47e256a 100644
--- a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
@@ -57,8 +57,7 @@ export default {
             customers: null,
             expandedRowGroups: null,
             code: {
-                basic: `
-<DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
+                basic: `<DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
         expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
         sortMode="single" sortField="representative.name" :sortOrder="1">
     <template #groupheader="slotProps">
@@ -86,8 +85,7 @@ export default {
         <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
@@ -175,8 +173,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
diff --git a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
index 6095a6e5b..a2cd22200 100644
--- a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
@@ -47,8 +47,7 @@ export default {
             customers: null,
             expandedRowGroups: null,
             code: {
-                basic: `
-<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
     <Column header="#" headerStyle="width:3rem">
         <template #body="slotProps">
             {{ slotProps.index + 1 }}
@@ -79,8 +78,7 @@ export default {
     </Column>
     <Column field="date" header="Date" style="min-width: 100px"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
             <Column header="#" headerStyle="width:3rem">
@@ -150,8 +148,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
             <Column header="#" headerStyle="width:3rem">
diff --git a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
index 640179cc0..f43e7a442 100644
--- a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
@@ -46,8 +46,7 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `
-<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
+                basic: `<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
         sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
     <Column field="representative.name" header="Representative"></Column>
     <Column field="name" header="Name" style="min-width: 200px"></Column>
@@ -76,8 +75,7 @@ export default {
         <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
                 sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
@@ -158,8 +156,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
                 sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue b/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
index 52d678b24..4f5270df3 100644
--- a/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
@@ -28,16 +28,14 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `
-<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+                basic: `<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
     <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
@@ -65,8 +63,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
diff --git a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
index 0359e7c66..3185dd608 100644
--- a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
+++ b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
@@ -30,8 +30,7 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -39,8 +38,7 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -71,8 +69,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
index 801920eba..04f63d42f 100644
--- a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
@@ -27,16 +27,14 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `
-<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+                basic: `<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
     <Column selectionMode="single" headerStyle="width: 3rem"></Column>
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="single" headerStyle="width: 3rem"></Column>
@@ -64,8 +62,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="single" headerStyle="width: 3rem"></Column>
diff --git a/doc/datatable/rowselection/RowSelectEventsDoc.vue b/doc/datatable/rowselection/RowSelectEventsDoc.vue
index c6cddd283..438afd301 100644
--- a/doc/datatable/rowselection/RowSelectEventsDoc.vue
+++ b/doc/datatable/rowselection/RowSelectEventsDoc.vue
@@ -23,8 +23,7 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `
-<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
+                basic: `<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
         @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
     <Column selectionMode="single" headerStyle="width: 3rem"></Column>
     <Column field="code" header="Code"></Column>
@@ -32,8 +31,7 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
                 @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
@@ -69,8 +67,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
                 @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
index fa2633f29..0f09c5d97 100644
--- a/doc/datatable/rowselection/SingleRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
@@ -34,8 +34,7 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -43,8 +42,7 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -75,8 +73,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 7a51cc0f4..4be707562 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -126,8 +126,7 @@ export default {
             ],
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             code: {
-                basic: `
-<DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
+                basic: `<DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
     :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
         <div class="flex justify-content-between">
@@ -223,8 +222,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
@@ -413,8 +411,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index e38f83b07..16b83efd0 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -186,8 +186,7 @@ export default {
                 { label: 'OUTOFSTOCK', value: 'outofstock' }
             ],
             code: {
-                basic: `
-<Toolbar class="mb-4">
+                basic: `<Toolbar class="mb-4">
     <template #start>
         <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
         <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
@@ -241,8 +240,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div>
         <div class="card">
             <Toolbar class="mb-4">
@@ -529,8 +527,7 @@ export default {
 }
 <\/script>
 `,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <div class="card">
             <Toolbar class="mb-4">
diff --git a/doc/datatable/scroll/FlexibleScrollDoc.vue b/doc/datatable/scroll/FlexibleScrollDoc.vue
index a525a90db..663d42a5a 100644
--- a/doc/datatable/scroll/FlexibleScrollDoc.vue
+++ b/doc/datatable/scroll/FlexibleScrollDoc.vue
@@ -32,8 +32,7 @@ export default {
             customers: null,
             dialogVisible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
     <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
         <Column field="name" header="Name"></Column>
@@ -45,8 +44,7 @@ export default {
         <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
     </template>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
@@ -81,8 +79,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
diff --git a/doc/datatable/scroll/FrozenColumnsDoc.vue b/doc/datatable/scroll/FrozenColumnsDoc.vue
index c624c2aea..32ea42744 100644
--- a/doc/datatable/scroll/FrozenColumnsDoc.vue
+++ b/doc/datatable/scroll/FrozenColumnsDoc.vue
@@ -34,8 +34,7 @@ export default {
             customers: null,
             balanceFrozen: false,
             code: {
-                basic: `
-<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+                basic: `<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-4">
     <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
     <Column field="id" header="Id" style="min-width: 100px"></Column>
@@ -52,8 +51,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 
@@ -98,8 +96,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 
diff --git a/doc/datatable/scroll/FrozenRowsDoc.vue b/doc/datatable/scroll/FrozenRowsDoc.vue
index 8069dea8d..6cf666a0b 100644
--- a/doc/datatable/scroll/FrozenRowsDoc.vue
+++ b/doc/datatable/scroll/FrozenRowsDoc.vue
@@ -44,8 +44,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
     <Column field="name" header="Name"></Column>
     <Column field="country.name" header="Country"></Column>
     <Column field="representative.name" header="Representative"></Column>
@@ -56,8 +55,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
@@ -122,8 +120,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
diff --git a/doc/datatable/scroll/HorizontalScrollDoc.vue b/doc/datatable/scroll/HorizontalScrollDoc.vue
index bc0ef3f81..e7cf0b84b 100644
--- a/doc/datatable/scroll/HorizontalScrollDoc.vue
+++ b/doc/datatable/scroll/HorizontalScrollDoc.vue
@@ -30,8 +30,7 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `
-<DataTable :value="customers" scrollable scrollHeight="400px">
+                basic: `<DataTable :value="customers" scrollable scrollHeight="400px">
     <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
     <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
     <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
@@ -46,8 +45,7 @@ export default {
     <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
     <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px">
             <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
@@ -88,8 +86,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px">
             <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
diff --git a/doc/datatable/scroll/VerticalScrollDoc.vue b/doc/datatable/scroll/VerticalScrollDoc.vue
index e7c2bd793..a85c79d87 100644
--- a/doc/datatable/scroll/VerticalScrollDoc.vue
+++ b/doc/datatable/scroll/VerticalScrollDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `
-<DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
     <Column field="name" header="Name"></Column>
     <Column field="country.name" header="Country"></Column>
     <Column field="representative.name" header="Representative"></Column>
     <Column field="company" header="Company"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
@@ -56,8 +54,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
diff --git a/doc/datatable/sort/MultipleColumnsDoc.vue b/doc/datatable/sort/MultipleColumnsDoc.vue
index 0d5893bc5..5ce88242e 100644
--- a/doc/datatable/sort/MultipleColumnsDoc.vue
+++ b/doc/datatable/sort/MultipleColumnsDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 25%"></Column>
     <Column field="name" header="Name" sortable style="width: 25%"></Column>
     <Column field="category" header="Category" sortable style="width: 25%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
diff --git a/doc/datatable/sort/PresortDoc.vue b/doc/datatable/sort/PresortDoc.vue
index bbf0c1bde..c2c34c873 100644
--- a/doc/datatable/sort/PresortDoc.vue
+++ b/doc/datatable/sort/PresortDoc.vue
@@ -29,8 +29,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 20%"></Column>
     <Column field="name" header="Name" sortable style="width: 20%"></Column>
     <Column field="price" header="Price" :sortable="true">
@@ -41,8 +40,7 @@ export default {
     <Column field="category" header="Category" sortable style="width: 20%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 20%"></Column>
@@ -77,8 +75,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 20%"></Column>
diff --git a/doc/datatable/sort/RemovableSortDoc.vue b/doc/datatable/sort/RemovableSortDoc.vue
index f20746a03..b05afd84b 100644
--- a/doc/datatable/sort/RemovableSortDoc.vue
+++ b/doc/datatable/sort/RemovableSortDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" removableSort tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" removableSort tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 25%"></Column>
     <Column field="name" header="Name" sortable style="width: 25%"></Column>
     <Column field="category" header="Category" sortable style="width: 25%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
diff --git a/doc/datatable/sort/SingleColumnDoc.vue b/doc/datatable/sort/SingleColumnDoc.vue
index b254b882d..7a7a6c0ea 100644
--- a/doc/datatable/sort/SingleColumnDoc.vue
+++ b/doc/datatable/sort/SingleColumnDoc.vue
@@ -21,15 +21,13 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 25%"></Column>
     <Column field="name" header="Name" sortable style="width: 25%"></Column>
     <Column field="category" header="Category" sortable style="width: 25%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
diff --git a/doc/datatable/theming/TailwindDoc.vue b/doc/datatable/theming/TailwindDoc.vue
index 2868fa7fd..de8225cf8 100644
--- a/doc/datatable/theming/TailwindDoc.vue
+++ b/doc/datatable/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['CustomerService']" embedded />
     </DocSectionText>
 </template>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export const TRANSITIONS = {
+                basic: `export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -323,8 +322,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
diff --git a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
index 03009ab3a..461e4b6f7 100644
--- a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
+++ b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
@@ -62,8 +62,7 @@ export default {
             lazyLoading: false,
             loadLazyTimeout: null,
             code: {
-                basic: `
-<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
+                basic: `<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
         :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
     <Column field="id" header="Id" style="width: 20%">
         <template #loading>
@@ -101,8 +100,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
                 :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
@@ -186,8 +184,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
                 :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
diff --git a/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue b/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
index 5834c6fd5..aa3a6cbba 100644
--- a/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
+++ b/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
@@ -26,16 +26,14 @@ export default {
         return {
             cars: null,
             code: {
-                basic: `
-<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
+                basic: `<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
     <Column field="id" header="Id" style="width: 20%"></Column>
     <Column field="vin" header="Vin" style="width: 20%"></Column>
     <Column field="year" header="Year" style="width: 20%"></Column>
     <Column field="brand" header="Brand" style="width: 20%"></Column>
     <Column field="color" header="Color" style="width: 20%"></Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
             <Column field="id" header="Id" style="width: 20%"></Column>
@@ -61,8 +59,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
             <Column field="id" header="Id" style="width: 20%"></Column>
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index d9aaccb0e..8675d9c1b 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -43,8 +43,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataView :value="products">
+                basic: `<DataView :value="products">
     <template #list="slotProps">
         <div class="col-12">
             <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
@@ -70,8 +69,7 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
@@ -133,8 +131,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index e4ec92bdf..accdff940 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -74,8 +74,7 @@ export default {
             products: null,
             layout: 'grid',
             code: {
-                basic: `
-<DataView :value="products" :layout="layout">
+                basic: `<DataView :value="products" :layout="layout">
     <template #header>
         <div class="flex justify-content-end">
             <DataViewLayoutOptions v-model="layout" />
@@ -130,8 +129,7 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
@@ -223,8 +221,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index 3df7ff697..fe8159676 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -65,8 +65,7 @@ export default {
             products: null,
             layout: 'grid',
             code: {
-                basic: `
-<DataView :value="products" :layout="layout">
+                basic: `<DataView :value="products" :layout="layout">
     <template #header>
         <div class="flex justify-content-end">
             <DataViewLayoutOptions v-model="layout" />
@@ -115,8 +114,7 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
@@ -202,8 +200,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index 353351acd..6cdab6c9a 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -41,8 +41,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<DataView :value="products" paginator :rows="5">
+                basic: `<DataView :value="products" paginator :rows="5">
     <template #list="slotProps">
         <div class="col-12">
             <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
@@ -68,8 +67,7 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
@@ -131,8 +129,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index d40455fa7..5200707bc 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -51,8 +51,7 @@ export default {
                 { label: 'Price Low to High', value: 'price' }
             ],
             code: {
-                basic: `
-<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
+                basic: `<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
     <template #header>
         <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
     </template>
@@ -81,8 +80,7 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
             <template #header>
@@ -168,8 +166,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
             <template #header>
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
index cc78717ba..f954a340f 100644
--- a/doc/dataview/pt/PTDoc.vue
+++ b/doc/dataview/pt/PTDoc.vue
@@ -81,8 +81,7 @@ export default {
             products: null,
             layout: 'grid',
             code: {
-                basic: `
-<DataView
+                basic: `<DataView
     :value="products"
     :layout="layout"
     :pt="{
@@ -149,8 +148,7 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataView
             :value="products"
@@ -254,8 +252,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataView
             :value="products"
diff --git a/doc/dataview/theming/TailwindDoc.vue b/doc/dataview/theming/TailwindDoc.vue
index 5fc851154..b4d66d795 100644
--- a/doc/dataview/theming/TailwindDoc.vue
+++ b/doc/dataview/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['ProductService']" embedded />
     </DocSectionText>
 </template>
@@ -49,8 +49,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
diff --git a/doc/deferredcontent/AccessibilityDoc.vue b/doc/deferredcontent/AccessibilityDoc.vue
index 3dfbf56cd..36995a15f 100644
--- a/doc/deferredcontent/AccessibilityDoc.vue
+++ b/doc/deferredcontent/AccessibilityDoc.vue
@@ -17,8 +17,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+                basic: `<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
     Content
 </DeferredContent>`
             }
diff --git a/doc/deferredcontent/BasicDoc.vue b/doc/deferredcontent/BasicDoc.vue
index afba64b31..c39a960dd 100644
--- a/doc/deferredcontent/BasicDoc.vue
+++ b/doc/deferredcontent/BasicDoc.vue
@@ -17,12 +17,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<DeferredContent @load="onImageLoad">
+                basic: `<DeferredContent @load="onImageLoad">
     <img src="/images/nature/nature4.jpg" alt="Nature" />
 </DeferredContent>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load an image.</div>
@@ -42,8 +40,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load an image.</div>
diff --git a/doc/deferredcontent/DataTableDoc.vue b/doc/deferredcontent/DataTableDoc.vue
index dd2acc67a..ec79813e8 100644
--- a/doc/deferredcontent/DataTableDoc.vue
+++ b/doc/deferredcontent/DataTableDoc.vue
@@ -23,8 +23,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+                basic: `<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
     <DataTable :value="products">
         <Column field="code" header="Code"></Column>
         <Column field="name" header="Name"></Column>
@@ -32,8 +31,7 @@ export default {
         <Column field="quantity" header="Quantity"></Column>
     </DataTable>
 </DeferredContent>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
@@ -66,8 +64,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
diff --git a/doc/dialog/AccessibilityDoc.vue b/doc/dialog/AccessibilityDoc.vue
index 4b5d9a99d..46e464469 100644
--- a/doc/dialog/AccessibilityDoc.vue
+++ b/doc/dialog/AccessibilityDoc.vue
@@ -76,8 +76,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" />
 
 <Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }">
     <p>Content</p>
diff --git a/doc/dialog/BasicDoc.vue b/doc/dialog/BasicDoc.vue
index a542ee3ee..82af6368a 100644
--- a/doc/dialog/BasicDoc.vue
+++ b/doc/dialog/BasicDoc.vue
@@ -21,8 +21,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
     <p>
@@ -30,8 +29,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/FooterDoc.vue b/doc/dialog/FooterDoc.vue
index 304d99753..65caa6813 100644
--- a/doc/dialog/FooterDoc.vue
+++ b/doc/dialog/FooterDoc.vue
@@ -26,8 +26,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
     <p>
@@ -39,8 +38,7 @@ export default {
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
@@ -65,8 +63,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/LongContentDoc.vue b/doc/dialog/LongContentDoc.vue
index 7b08d2bd7..27e6a9732 100644
--- a/doc/dialog/LongContentDoc.vue
+++ b/doc/dialog/LongContentDoc.vue
@@ -50,8 +50,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
     <p class="mb-5">
@@ -87,8 +86,7 @@ export default {
         non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
     </p>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
@@ -137,8 +135,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/MaximizableDoc.vue b/doc/dialog/MaximizableDoc.vue
index de44a009f..7d3e75441 100644
--- a/doc/dialog/MaximizableDoc.vue
+++ b/doc/dialog/MaximizableDoc.vue
@@ -21,8 +21,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
     <p>
@@ -30,8 +29,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/PositionDoc.vue b/doc/dialog/PositionDoc.vue
index e68315f38..89e9854c1 100644
--- a/doc/dialog/PositionDoc.vue
+++ b/doc/dialog/PositionDoc.vue
@@ -39,8 +39,7 @@ export default {
             position: 'center',
             visible: false,
             code: {
-                basic: `
-<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+                basic: `<div class="flex flex-wrap justify-content-center gap-2 mb-2">
     <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
     <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
 </div>
@@ -65,8 +64,7 @@ export default {
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
             <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
@@ -112,8 +110,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
             <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
diff --git a/doc/dialog/ResponsiveDoc.vue b/doc/dialog/ResponsiveDoc.vue
index 10c604216..8a0260484 100644
--- a/doc/dialog/ResponsiveDoc.vue
+++ b/doc/dialog/ResponsiveDoc.vue
@@ -25,8 +25,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }">
     <p>
@@ -34,8 +33,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }">
@@ -56,8 +54,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }">
diff --git a/doc/dialog/WithoutModalDoc.vue b/doc/dialog/WithoutModalDoc.vue
index 00441f7ca..5aefd4de6 100644
--- a/doc/dialog/WithoutModalDoc.vue
+++ b/doc/dialog/WithoutModalDoc.vue
@@ -21,8 +21,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
     <p>
@@ -30,8 +29,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/pt/PTDoc.vue b/doc/dialog/pt/PTDoc.vue
index 2ab64fe65..6bcb289ba 100644
--- a/doc/dialog/pt/PTDoc.vue
+++ b/doc/dialog/pt/PTDoc.vue
@@ -26,8 +26,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Dialog
+                basic: `<Dialog
     v-model:visible="visible"
     modal
     header="Header"
@@ -37,8 +36,7 @@ export default {
 >
     <p>Lorem ipsum </p>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
@@ -67,8 +65,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
diff --git a/doc/dialog/theming/TailwindDoc.vue b/doc/dialog/theming/TailwindDoc.vue
index 140e4dd73..0ac2a11f1 100644
--- a/doc/dialog/theming/TailwindDoc.vue
+++ b/doc/dialog/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -102,8 +102,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/divider/BasicDoc.vue b/doc/divider/BasicDoc.vue
index bf9a75584..f1e8fc972 100644
--- a/doc/divider/BasicDoc.vue
+++ b/doc/divider/BasicDoc.vue
@@ -37,8 +37,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<p>
+                basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
@@ -63,8 +62,7 @@ export default {
     Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
     maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
 </p>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
@@ -96,8 +94,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
diff --git a/doc/divider/ContentDoc.vue b/doc/divider/ContentDoc.vue
index 63aa99c94..89320e0f9 100644
--- a/doc/divider/ContentDoc.vue
+++ b/doc/divider/ContentDoc.vue
@@ -46,8 +46,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<p>
+                basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
@@ -78,8 +77,7 @@ export default {
     Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
     maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
 </p>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
@@ -117,8 +115,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
diff --git a/doc/divider/LoginDoc.vue b/doc/divider/LoginDoc.vue
index 2ea41db9e..cd3fc57e8 100644
--- a/doc/divider/LoginDoc.vue
+++ b/doc/divider/LoginDoc.vue
@@ -32,8 +32,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="flex flex-column md:flex-row">
+                basic: `<div class="flex flex-column md:flex-row">
     <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
         <div class="flex align-items-center gap-2">
             <label>Username</label>
@@ -53,8 +52,7 @@ export default {
         <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
     </div>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-column md:flex-row">
             <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
@@ -81,8 +79,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-column md:flex-row">
             <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
diff --git a/doc/divider/TypeDoc.vue b/doc/divider/TypeDoc.vue
index e6c81ae61..60b618fa0 100644
--- a/doc/divider/TypeDoc.vue
+++ b/doc/divider/TypeDoc.vue
@@ -37,8 +37,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<p>
+                basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
@@ -63,8 +62,7 @@ export default {
     Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
     maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
 </p>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
@@ -96,8 +94,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
diff --git a/doc/divider/VerticalDoc.vue b/doc/divider/VerticalDoc.vue
index b86039a6d..16469d406 100644
--- a/doc/divider/VerticalDoc.vue
+++ b/doc/divider/VerticalDoc.vue
@@ -30,8 +30,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<p>
+                basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
@@ -49,8 +48,7 @@ export default {
     At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
     deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
 </p>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
@@ -75,8 +73,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
diff --git a/doc/divider/pt/PTDoc.vue b/doc/divider/pt/PTDoc.vue
index 645974570..4ab5695f3 100644
--- a/doc/divider/pt/PTDoc.vue
+++ b/doc/divider/pt/PTDoc.vue
@@ -23,8 +23,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<p>
+                basic: `<p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
@@ -37,8 +36,7 @@ export default {
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
     voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
 </p>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
@@ -55,8 +53,7 @@ export default {
         </p>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
diff --git a/doc/divider/theming/TailwindDoc.vue b/doc/divider/theming/TailwindDoc.vue
index 9a7a1472c..179b46dfa 100644
--- a/doc/divider/theming/TailwindDoc.vue
+++ b/doc/divider/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -39,8 +39,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card text-gray-700 dark:text-white/80">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
diff --git a/doc/dock/AdvancedDoc.vue b/doc/dock/AdvancedDoc.vue
index e4be3fee9..120493454 100644
--- a/doc/dock/AdvancedDoc.vue
+++ b/doc/dock/AdvancedDoc.vue
@@ -243,16 +243,14 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Dock :model="items">
+                basic: `<Dock :model="items">
     <template #item="{ item }">
         <a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
             <img :alt="item.label" :src="item.icon" style="width: 100%" />
         </a>
     </template>
 </Dock>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card dock-demo">
         <Toast position="top-center" group="tc" />
         <Menubar :model="menubarItems">
@@ -558,8 +556,7 @@ export default {
     border-radius: 0;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <div class="card dock-demo">
             <Toast position="top-center" group="tc" />
diff --git a/doc/dock/BasicDoc.vue b/doc/dock/BasicDoc.vue
index 78e9d79e6..4843abd7d 100644
--- a/doc/dock/BasicDoc.vue
+++ b/doc/dock/BasicDoc.vue
@@ -62,14 +62,12 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Dock :model="items" :position="position">
+                basic: `<Dock :model="items" :position="position">
     <template #icon="{ item }">
         <img :alt="item.label" :src="item.icon" style="width: 100%" />
     </template>
 </Dock>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card dock-demo">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="pos of positions" :key="pos.label" class="flex align-items-center">
@@ -148,8 +146,7 @@ export default {
     z-index: 1000;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card dock-demo">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="pos of positions" :key="pos.label" class="flex align-items-center">
diff --git a/doc/dock/pt/PTDoc.vue b/doc/dock/pt/PTDoc.vue
index 1c248193c..a117dc8e6 100644
--- a/doc/dock/pt/PTDoc.vue
+++ b/doc/dock/pt/PTDoc.vue
@@ -35,8 +35,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Dock :model="items" position="bottom"
+                basic: `<Dock :model="items" position="bottom"
     :pt="{ 
         container: {
             style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
@@ -47,8 +46,7 @@ export default {
         <img :alt="item.label" :src="item.icon" style="width: 100%" />
     </template>
 </Dock>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card dock-demo">
         <div class="dock-window">
             <Dock :model="items" position="bottom"
@@ -108,8 +106,7 @@ export default {
     z-index: 1000;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card dock-demo">
         <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
             <Dock :model="items" position="bottom"
diff --git a/doc/dock/theming/TailwindDoc.vue b/doc/dock/theming/TailwindDoc.vue
index ec71d4ad0..ec248b8d9 100644
--- a/doc/dock/theming/TailwindDoc.vue
+++ b/doc/dock/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -66,8 +66,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card dock-demo">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="pos of positions" :key="pos.label" class="flex items-center">
diff --git a/doc/dropdown/AccessibilityDoc.vue b/doc/dropdown/AccessibilityDoc.vue
index e2573e379..b645fb863 100644
--- a/doc/dropdown/AccessibilityDoc.vue
+++ b/doc/dropdown/AccessibilityDoc.vue
@@ -184,8 +184,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="dd1"></span>Options</span>
+                basic: `<span id="dd1"></span>Options</span>
 <Dropdown aria-labelledby="dd1" />
 
 <Dropdown aria-label="Options" />`
diff --git a/doc/dropdown/BasicDoc.vue b/doc/dropdown/BasicDoc.vue
index 46ba7d845..1bd29cc94 100644
--- a/doc/dropdown/BasicDoc.vue
+++ b/doc/dropdown/BasicDoc.vue
@@ -25,10 +25,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -50,8 +48,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/ClearIconDoc.vue b/doc/dropdown/ClearIconDoc.vue
index 9c3b89534..87ffff3e1 100644
--- a/doc/dropdown/ClearIconDoc.vue
+++ b/doc/dropdown/ClearIconDoc.vue
@@ -21,10 +21,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -46,8 +44,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/DisabledDoc.vue b/doc/dropdown/DisabledDoc.vue
index 8a5181708..0548d6af8 100644
--- a/doc/dropdown/DisabledDoc.vue
+++ b/doc/dropdown/DisabledDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/EditableDoc.vue b/doc/dropdown/EditableDoc.vue
index ed6a5be43..eb5a62472 100644
--- a/doc/dropdown/EditableDoc.vue
+++ b/doc/dropdown/EditableDoc.vue
@@ -21,10 +21,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -46,8 +44,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/FilterDoc.vue b/doc/dropdown/FilterDoc.vue
index d35c7a533..950e0e1f8 100644
--- a/doc/dropdown/FilterDoc.vue
+++ b/doc/dropdown/FilterDoc.vue
@@ -42,8 +42,7 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `
-<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+                basic: `<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
     <template #value="slotProps">
         <div v-if="slotProps.value" class="flex align-items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -60,8 +59,7 @@ export default {
         </div>
     </template>
 </Dropdown>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
@@ -104,8 +102,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/dropdown/FloatLabelDoc.vue
index 3b02ad5d4..46d98fd34 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/dropdown/FloatLabelDoc.vue
@@ -24,13 +24,11 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<div class="p-float-label">
+                basic: `<div class="p-float-label">
     <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     <label for="dd-city">Select a City</label>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="p-float-label">
             <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
@@ -55,8 +53,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="p-float-label">
             <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
diff --git a/doc/dropdown/GroupDoc.vue b/doc/dropdown/GroupDoc.vue
index 10f22aea3..443033471 100644
--- a/doc/dropdown/GroupDoc.vue
+++ b/doc/dropdown/GroupDoc.vue
@@ -56,8 +56,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+                basic: `<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
@@ -65,8 +64,7 @@ export default {
         </div>
     </template>
 </Dropdown>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
             <template #optiongroup="slotProps">
@@ -120,8 +118,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
             <template #optiongroup="slotProps">
diff --git a/doc/dropdown/InvalidDoc.vue b/doc/dropdown/InvalidDoc.vue
index 913e048a7..4759e1c08 100644
--- a/doc/dropdown/InvalidDoc.vue
+++ b/doc/dropdown/InvalidDoc.vue
@@ -21,10 +21,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
     </div>
@@ -46,8 +44,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/LazyVirtualScrollDoc.vue b/doc/dropdown/LazyVirtualScrollDoc.vue
index 5a1e240c7..2a67d5ff1 100644
--- a/doc/dropdown/LazyVirtualScrollDoc.vue
+++ b/doc/dropdown/LazyVirtualScrollDoc.vue
@@ -22,11 +22,9 @@ export default {
             items: Array.from({ length: 100000 }),
             loading: false,
             code: {
-                basic: `
-<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+                basic: `<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
     :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
             :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
@@ -67,8 +65,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
             :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
diff --git a/doc/dropdown/LoadingStateDoc.vue b/doc/dropdown/LoadingStateDoc.vue
index 4bdcbf517..a87b6610a 100644
--- a/doc/dropdown/LoadingStateDoc.vue
+++ b/doc/dropdown/LoadingStateDoc.vue
@@ -14,8 +14,7 @@ export default {
         return {
             code: {
                 basic: `<Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
     </div>
@@ -23,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
     </div>
diff --git a/doc/dropdown/TemplateDoc.vue b/doc/dropdown/TemplateDoc.vue
index 47986bc1e..5997db4c1 100644
--- a/doc/dropdown/TemplateDoc.vue
+++ b/doc/dropdown/TemplateDoc.vue
@@ -42,8 +42,7 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `
-<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+                basic: `<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
     <template #value="slotProps">
         <div v-if="slotProps.value" class="flex align-items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -60,8 +59,7 @@ export default {
         </div>
     </template>
 </Dropdown>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
@@ -104,8 +102,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
diff --git a/doc/dropdown/VirtualScrollDoc.vue b/doc/dropdown/VirtualScrollDoc.vue
index da72b8a4a..b936ab8be 100644
--- a/doc/dropdown/VirtualScrollDoc.vue
+++ b/doc/dropdown/VirtualScrollDoc.vue
@@ -18,11 +18,9 @@ export default {
             selectedItem: null,
             items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
             code: {
-                basic: `
-<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+                basic: `<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
     :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
@@ -39,8 +37,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
diff --git a/doc/dropdown/form/VeeValidateDoc.vue b/doc/dropdown/form/VeeValidateDoc.vue
index 3f4ae5489..e882d9f64 100644
--- a/doc/dropdown/form/VeeValidateDoc.vue
+++ b/doc/dropdown/form/VeeValidateDoc.vue
@@ -52,8 +52,7 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -67,8 +66,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -123,8 +121,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
diff --git a/doc/dropdown/pt/PTDoc.vue b/doc/dropdown/pt/PTDoc.vue
index 4618c74e2..84bac93ea 100644
--- a/doc/dropdown/pt/PTDoc.vue
+++ b/doc/dropdown/pt/PTDoc.vue
@@ -30,8 +30,7 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Dropdown
+                basic: `<Dropdown
     v-model="selectedCity"
     :options="cities"
     optionLabel="name"
@@ -43,8 +42,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Dropdown
             v-model="selectedCity"
@@ -77,8 +75,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Dropdown
             v-model="selectedCity"
diff --git a/doc/dropdown/theming/TailwindDoc.vue b/doc/dropdown/theming/TailwindDoc.vue
index 4d2e40acc..8fdfc12c5 100644
--- a/doc/dropdown/theming/TailwindDoc.vue
+++ b/doc/dropdown/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -92,8 +92,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dynamicdialog/CustomizationDoc.vue b/doc/dynamicdialog/CustomizationDoc.vue
index dd65751a6..6e846745e 100644
--- a/doc/dynamicdialog/CustomizationDoc.vue
+++ b/doc/dynamicdialog/CustomizationDoc.vue
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-import { markRaw } from 'vue';
+                basic: `import { markRaw } from 'vue';
 import ProductListDemo from './ProductListDemo';
 import FooterDemo from './FooterDemo';
 
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index 4c9ca587b..da5573bf3 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -14,16 +14,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-import {createApp} from 'vue';
+                basic: `import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
 
 const app = createApp(App);
 app.use(DialogService);`
             },
             code2: {
-                basic: `
-import { useDialog } from 'primevue/usedialog';
+                basic: `import { useDialog } from 'primevue/usedialog';
 
 const dialog = useDialog();`,
                 options: `const dialogRef = this.$dialog;`,
diff --git a/doc/dynamicdialog/OpenDialogDoc.vue b/doc/dynamicdialog/OpenDialogDoc.vue
index a77a96672..e0db3af1c 100644
--- a/doc/dynamicdialog/OpenDialogDoc.vue
+++ b/doc/dynamicdialog/OpenDialogDoc.vue
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-import ProductListDemo from './ProductListDemo';
+                basic: `import ProductListDemo from './ProductListDemo';
 
 export default {
     methods:{
diff --git a/doc/dynamicdialog/UsageDoc.vue b/doc/dynamicdialog/UsageDoc.vue
index 2fa311947..901bb8ca5 100644
--- a/doc/dynamicdialog/UsageDoc.vue
+++ b/doc/dynamicdialog/UsageDoc.vue
@@ -22,12 +22,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+                basic: `<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
 
 <DynamicDialog />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
@@ -74,8 +72,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
index b58499063..27b5a0b49 100644
--- a/doc/dynamicdialog/pt/PTDoc.vue
+++ b/doc/dynamicdialog/pt/PTDoc.vue
@@ -8,22 +8,19 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<DynamicDialog
+                basic: `<DynamicDialog
     :pt="{
         root: { class: 'w-12 sm:w-9 md:w-6' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <DynamicDialog
         :pt="{
             root: { class: 'w-12 sm:w-9 md:w-6' }
         }"
     />
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <DynamicDialog
         :pt="{
             root: { class: 'w-12 sm:w-9 md:w-6' }
diff --git a/doc/dynamicdialog/theming/TailwindDoc.vue b/doc/dynamicdialog/theming/TailwindDoc.vue
index 6280af533..b741fc247 100644
--- a/doc/dynamicdialog/theming/TailwindDoc.vue
+++ b/doc/dynamicdialog/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -102,8 +102,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
diff --git a/doc/editor/BasicDoc.vue b/doc/editor/BasicDoc.vue
index fb0567cf4..c75dff274 100644
--- a/doc/editor/BasicDoc.vue
+++ b/doc/editor/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<Editor v-model="value" editorStyle="height: 320px" />`,
-                options: `
-<template>
+                basic: `<Editor v-model="value" editorStyle="height: 320px" />`,
+                options: `<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" />
     </div>
diff --git a/doc/editor/ReadOnlyDoc.vue b/doc/editor/ReadOnlyDoc.vue
index fee704c10..27717f989 100644
--- a/doc/editor/ReadOnlyDoc.vue
+++ b/doc/editor/ReadOnlyDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 'Always bet on Prime',
             code: {
-                basic: `
-<Editor v-model="value" editorStyle="height: 320px" readonly />`,
-                options: `
-<template>
+                basic: `<Editor v-model="value" editorStyle="height: 320px" readonly />`,
+                options: `<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" readonly />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" readonly />
     </div>
diff --git a/doc/editor/TemplateDoc.vue b/doc/editor/TemplateDoc.vue
index cc2411c36..87ed1fb7e 100644
--- a/doc/editor/TemplateDoc.vue
+++ b/doc/editor/TemplateDoc.vue
@@ -22,8 +22,7 @@ export default {
         return {
             value: '<div>Hello World!</div><div>PrimeVue <b>Editor</b> Rocks</div><div><br></div>',
             code: {
-                basic: `
-<Editor v-model="value" editorStyle="height: 320px">
+                basic: `<Editor v-model="value" editorStyle="height: 320px">
     <template v-slot:toolbar>
         <span class="ql-formats">
             <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
@@ -32,8 +31,7 @@ export default {
         </span>
     </template>
 </Editor>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px">
             <template v-slot:toolbar>
@@ -56,8 +54,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px">
             <template v-slot:toolbar>
diff --git a/doc/editor/form/VeeValidateDoc.vue b/doc/editor/form/VeeValidateDoc.vue
index 489924644..2eae7bd36 100644
--- a/doc/editor/form/VeeValidateDoc.vue
+++ b/doc/editor/form/VeeValidateDoc.vue
@@ -52,8 +52,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card">
         <form @submit="onSubmit">
             <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
@@ -73,8 +72,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <form @submit="onSubmit">
             <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
@@ -124,8 +122,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <form @submit="onSubmit">
             <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
diff --git a/doc/editor/pt/PTDoc.vue b/doc/editor/pt/PTDoc.vue
index 9bf43877d..7806802ba 100644
--- a/doc/editor/pt/PTDoc.vue
+++ b/doc/editor/pt/PTDoc.vue
@@ -18,16 +18,14 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<Editor
+                basic: `<Editor
     v-model="value"
     :pt="{
         content: { style: { height: '320px' } },
         toolbar: { class: 'surface-ground' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Editor
             v-model="value"
@@ -48,8 +46,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Editor
             v-model="value"
diff --git a/doc/editor/theming/TailwindDoc.vue b/doc/editor/theming/TailwindDoc.vue
index 28800f503..3d183dd14 100644
--- a/doc/editor/theming/TailwindDoc.vue
+++ b/doc/editor/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
     </DocSectionText>
 </template>
@@ -32,8 +32,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" />
     </div>
diff --git a/doc/fieldset/BasicDoc.vue b/doc/fieldset/BasicDoc.vue
index c89bd849f..2367c1bd6 100644
--- a/doc/fieldset/BasicDoc.vue
+++ b/doc/fieldset/BasicDoc.vue
@@ -18,15 +18,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Fieldset legend="Header">
+                basic: `<Fieldset legend="Header">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Fieldset>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Fieldset legend="Header">
             <p>
@@ -39,8 +37,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Fieldset legend="Header">
             <p>
diff --git a/doc/fieldset/TemplateDoc.vue b/doc/fieldset/TemplateDoc.vue
index 435d76f2b..b3e9c8494 100644
--- a/doc/fieldset/TemplateDoc.vue
+++ b/doc/fieldset/TemplateDoc.vue
@@ -24,8 +24,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Fieldset>
+                basic: `<Fieldset>
     <template #legend>
         <div class="flex align-items-center text-primary">
             <span class="pi pi-user mr-2"></span>
@@ -37,8 +36,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Fieldset>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Fieldset>
             <template #legend>
@@ -57,8 +55,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Fieldset>
             <template #legend>
diff --git a/doc/fieldset/ToggleableDoc.vue b/doc/fieldset/ToggleableDoc.vue
index d9a617781..512365a3f 100644
--- a/doc/fieldset/ToggleableDoc.vue
+++ b/doc/fieldset/ToggleableDoc.vue
@@ -21,15 +21,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Fieldset legend="Header" :toggleable="true">
+                basic: `<Fieldset legend="Header" :toggleable="true">
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Fieldset>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Fieldset legend="Header" :toggleable="true">
             <p>
@@ -42,8 +40,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Fieldset legend="Header" :toggleable="true">
             <p>
diff --git a/doc/fieldset/pt/PTDoc.vue b/doc/fieldset/pt/PTDoc.vue
index 32e523dac..f603530b7 100644
--- a/doc/fieldset/pt/PTDoc.vue
+++ b/doc/fieldset/pt/PTDoc.vue
@@ -16,8 +16,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Fieldset
+                basic: `<Fieldset
     legend="Header"
     :toggleable="true"
     :pt="{
@@ -30,8 +29,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Fieldset>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Fieldset
             legend="Header"
@@ -48,8 +46,7 @@ export default {
         </Fieldset>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Fieldset
             legend="Header"
diff --git a/doc/fieldset/theming/TailwindDoc.vue b/doc/fieldset/theming/TailwindDoc.vue
index 8d28e9dc6..7a175c966 100644
--- a/doc/fieldset/theming/TailwindDoc.vue
+++ b/doc/fieldset/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -63,8 +63,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Fieldset legend="Header" :toggleable="true">
             <p>
diff --git a/doc/fileupload/AdvancedDoc.vue b/doc/fileupload/AdvancedDoc.vue
index d1830598e..1400bb75e 100644
--- a/doc/fileupload/AdvancedDoc.vue
+++ b/doc/fileupload/AdvancedDoc.vue
@@ -17,14 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+                basic: `<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
     <template #empty>
         <p>Drag and drop files to here to upload.</p>
     </template>
 </FileUpload>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
@@ -44,8 +42,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
diff --git a/doc/fileupload/AutoDoc.vue b/doc/fileupload/AutoDoc.vue
index 37bee4912..13b5a1ba5 100644
--- a/doc/fileupload/AutoDoc.vue
+++ b/doc/fileupload/AutoDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />`,
-                options: `
-<template>
+                basic: `<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />`,
+                options: `<template>
   <div class="card flex justify-content-center">
       <Toast />
       <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
@@ -32,8 +30,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
   <div class="card flex justify-content-center">
       <Toast />
       <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
diff --git a/doc/fileupload/BasicDoc.vue b/doc/fileupload/BasicDoc.vue
index 08a07f926..efcb4ca40 100644
--- a/doc/fileupload/BasicDoc.vue
+++ b/doc/fileupload/BasicDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />`,
-                options: `
-<template>
+                basic: `<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
diff --git a/doc/fileupload/CustomUploadDoc.vue b/doc/fileupload/CustomUploadDoc.vue
index 4ebed84be..788b03157 100644
--- a/doc/fileupload/CustomUploadDoc.vue
+++ b/doc/fileupload/CustomUploadDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />`,
-                options: `
-<template>
+                basic: `<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
     </div>
@@ -39,8 +37,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
     </div>
diff --git a/doc/fileupload/TemplateDoc.vue b/doc/fileupload/TemplateDoc.vue
index abd089148..d93837699 100644
--- a/doc/fileupload/TemplateDoc.vue
+++ b/doc/fileupload/TemplateDoc.vue
@@ -66,8 +66,7 @@ export default {
             totalSize: 0,
             totalSizePercent: 0,
             code: {
-                basic: `
-<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+                basic: `<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
     <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
         <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
             <div class="flex gap-2">
@@ -118,8 +117,7 @@ export default {
         </div>
     </template>
 </FileUpload>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
@@ -224,8 +222,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
diff --git a/doc/fileupload/pt/PTDoc.vue b/doc/fileupload/pt/PTDoc.vue
index 39d764391..c41f244f7 100644
--- a/doc/fileupload/pt/PTDoc.vue
+++ b/doc/fileupload/pt/PTDoc.vue
@@ -25,8 +25,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<FileUpload
+                basic: `<FileUpload
     name="demo[]"
     url="./upload.php"
     @upload="onAdvancedUpload($event)"
@@ -41,8 +40,7 @@ export default {
         <p>Drag and drop files to here to upload.</p>
     </template>
 </FileUpload>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <FileUpload
             name="demo[]"
@@ -72,8 +70,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <FileUpload
             name="demo[]"
diff --git a/doc/fileupload/theming/TailwindDoc.vue b/doc/fileupload/theming/TailwindDoc.vue
index ce135b919..587e15d7f 100644
--- a/doc/fileupload/theming/TailwindDoc.vue
+++ b/doc/fileupload/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -48,8 +48,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
diff --git a/doc/filterservice/TableIntegrationDoc.vue b/doc/filterservice/TableIntegrationDoc.vue
index b46ec9bc2..373f07736 100644
--- a/doc/filterservice/TableIntegrationDoc.vue
+++ b/doc/filterservice/TableIntegrationDoc.vue
@@ -48,8 +48,7 @@ export default {
             ],
             loading: true,
             code: {
-                basic: `
-<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
+                basic: `<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
     <template #empty> No customers found. </template>
     <template #loading> Loading customers data. Please wait. </template>
     <Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
@@ -70,8 +69,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
             <template #empty> No customers found. </template>
@@ -138,8 +136,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
             <template #empty> No customers found. </template>
diff --git a/doc/focustrap/BasicDoc.vue b/doc/focustrap/BasicDoc.vue
index fa5f032c8..f90804c77 100644
--- a/doc/focustrap/BasicDoc.vue
+++ b/doc/focustrap/BasicDoc.vue
@@ -52,8 +52,7 @@ export default {
             password: null,
             accept: null,
             code: {
-                basic: `
-<div class="flex justify-content-center p-fluid">
+                basic: `<div class="flex justify-content-center p-fluid">
     <div v-focustrap class="card">
         <div class="field">
             <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
@@ -91,8 +90,7 @@ export default {
         <Button type="submit" label="Submit" class="mt-2" />
     </div>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="flex justify-content-center p-fluid">
         <div v-focustrap class="card">
             <div class="field">
@@ -145,8 +143,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="flex justify-content-center p-fluid">
         <div v-focustrap class="card">
             <div class="field">
diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index 6e39e9342..eeaa544a7 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -55,8 +55,7 @@ export default {
             fullScreen: false,
             isAutoPlay: true,
             code: {
-                basic: `
-<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
+                basic: `<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
@@ -79,8 +78,7 @@ export default {
         </div>
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
             :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
@@ -258,8 +256,7 @@ export default {
     }
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
             :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
diff --git a/doc/galleria/AutoPlayDoc.vue b/doc/galleria/AutoPlayDoc.vue
index e9a9b76e6..8116c1f65 100644
--- a/doc/galleria/AutoPlayDoc.vue
+++ b/doc/galleria/AutoPlayDoc.vue
@@ -37,8 +37,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :circular="true" :autoPlay="true" :transitionInterval="2000">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -47,8 +46,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :circular="true" :autoPlay="true" :transitionInterval="2000">
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :circular="true" :autoPlay="true" :transitionInterval="2000">
diff --git a/doc/galleria/BasicDoc.vue b/doc/galleria/BasicDoc.vue
index 57399a7b8..18e84bdd0 100644
--- a/doc/galleria/BasicDoc.vue
+++ b/doc/galleria/BasicDoc.vue
@@ -37,8 +37,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
     </template>
@@ -46,8 +45,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
@@ -88,8 +86,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
diff --git a/doc/galleria/CaptionDoc.vue b/doc/galleria/CaptionDoc.vue
index bf85d7506..251ded7f2 100644
--- a/doc/galleria/CaptionDoc.vue
+++ b/doc/galleria/CaptionDoc.vue
@@ -41,8 +41,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -54,8 +53,7 @@ export default {
         <p class="text-white">{{ slotProps.item.alt }}</p>
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
@@ -100,8 +98,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index ce6f75cc7..5bca3253f 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -43,8 +43,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<div>
+                basic: `<div>
     <Button icon="pi pi-minus" @click="prev" />
     <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
 </div>
@@ -57,8 +56,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column md:align-items-center">
         <div class="mb-3 align-self-center">
             <Button icon="pi pi-minus" @click="prev" />
@@ -113,8 +111,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column md:align-items-center">
         <div class="mb-3 align-self-center">
             <Button icon="pi pi-minus" @click="prev" />
diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index 784783c17..d14be79e0 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -39,8 +39,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -48,8 +47,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
             <template #item="slotProps">
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
             <template #item="slotProps">
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 94d4693f2..1089193d2 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -66,8 +66,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -77,8 +76,7 @@ export default {
         </div>
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card card flex flex-column md:align-items-center">
         <div class="flex flex-wrap gap-3 mb-5 align-self-center">
             <div class="flex flex-wrap gap-3 mb-5">
@@ -148,8 +146,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column md:align-items-center">
         <div class="flex flex-wrap gap-3 mb-5 align-self-center">
             <div class="flex flex-wrap gap-3 mb-5">
diff --git a/doc/galleria/fullscreen/CustomContentDoc.vue b/doc/galleria/fullscreen/CustomContentDoc.vue
index c37d71671..6aa8a6a48 100644
--- a/doc/galleria/fullscreen/CustomContentDoc.vue
+++ b/doc/galleria/fullscreen/CustomContentDoc.vue
@@ -56,8 +56,7 @@ export default {
             ],
             displayCustom: false,
             code: {
-                basic: `
-<Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
+                basic: `<Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
     containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -66,8 +65,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
             containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
@@ -123,8 +121,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
             containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
diff --git a/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
index d568805e1..f4d7cf47c 100644
--- a/doc/galleria/fullscreen/WithThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
@@ -44,8 +44,7 @@ export default {
             ],
             displayBasic: false,
             code: {
-                basic: `
-<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
+                basic: `<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -55,8 +54,7 @@ export default {
 </Galleria>
 
 <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
             <template #item="slotProps">
@@ -104,8 +102,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
             <template #item="slotProps">
diff --git a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
index 65f4a21ec..d3ee15782 100644
--- a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
@@ -44,8 +44,7 @@ export default {
             ],
             displayBasic: false,
             code: {
-                basic: `
-<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
+                basic: `<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -55,8 +54,7 @@ export default {
 </Galleria>
 
 <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
             <template #item="slotProps">
@@ -104,8 +102,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
             <template #item="slotProps">
diff --git a/doc/galleria/indicator/ClickEventDoc.vue b/doc/galleria/indicator/ClickEventDoc.vue
index 85601ee6d..2e68984ad 100644
--- a/doc/galleria/indicator/ClickEventDoc.vue
+++ b/doc/galleria/indicator/ClickEventDoc.vue
@@ -34,15 +34,13 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
@@ -81,8 +79,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
diff --git a/doc/galleria/indicator/HoverEventDoc.vue b/doc/galleria/indicator/HoverEventDoc.vue
index 0e19040e5..b14d6ddb7 100644
--- a/doc/galleria/indicator/HoverEventDoc.vue
+++ b/doc/galleria/indicator/HoverEventDoc.vue
@@ -34,15 +34,13 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
@@ -81,8 +79,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
diff --git a/doc/galleria/indicator/PositionDoc.vue b/doc/galleria/indicator/PositionDoc.vue
index 96c36ab71..e84d03bde 100644
--- a/doc/galleria/indicator/PositionDoc.vue
+++ b/doc/galleria/indicator/PositionDoc.vue
@@ -50,15 +50,13 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+                basic: `<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
     :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@@ -112,8 +110,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
diff --git a/doc/galleria/indicator/TemplateDoc.vue b/doc/galleria/indicator/TemplateDoc.vue
index 3ce277aad..1fefa5ad9 100644
--- a/doc/galleria/indicator/TemplateDoc.vue
+++ b/doc/galleria/indicator/TemplateDoc.vue
@@ -37,8 +37,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+                basic: `<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
     :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -47,8 +46,7 @@ export default {
         <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
             :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
@@ -76,8 +74,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
             :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
diff --git a/doc/galleria/navigator/HoverDoc.vue b/doc/galleria/navigator/HoverDoc.vue
index b1354df64..ce299b9a8 100644
--- a/doc/galleria/navigator/HoverDoc.vue
+++ b/doc/galleria/navigator/HoverDoc.vue
@@ -37,8 +37,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -46,8 +45,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
             <template #item="slotProps">
@@ -88,8 +86,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
             <template #item="slotProps">
diff --git a/doc/galleria/navigator/IndicatorsDoc.vue b/doc/galleria/navigator/IndicatorsDoc.vue
index c4d352404..242bc4075 100644
--- a/doc/galleria/navigator/IndicatorsDoc.vue
+++ b/doc/galleria/navigator/IndicatorsDoc.vue
@@ -37,8 +37,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -47,8 +46,7 @@ export default {
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
diff --git a/doc/galleria/navigator/ItemThumbnailsDoc.vue b/doc/galleria/navigator/ItemThumbnailsDoc.vue
index 28018a270..5d4a19104 100644
--- a/doc/galleria/navigator/ItemThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemThumbnailsDoc.vue
@@ -37,8 +37,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -47,8 +46,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true">
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true">
diff --git a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
index 9e0d84334..998e845e6 100644
--- a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
@@ -37,8 +37,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true" :showThumbnails="false">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -47,8 +46,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false">
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false">
diff --git a/doc/galleria/pt/PTDoc.vue b/doc/galleria/pt/PTDoc.vue
index c72f84945..bc310c347 100644
--- a/doc/galleria/pt/PTDoc.vue
+++ b/doc/galleria/pt/PTDoc.vue
@@ -42,8 +42,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Galleria
+                basic: `<Galleria
     :value="images"
     :responsiveOptions="responsiveOptions"
     :numVisible="5"
@@ -58,8 +57,7 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
 </Galleria>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria
             :value="images"
@@ -107,8 +105,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria
             :value="images"
diff --git a/doc/galleria/theming/TailwindDoc.vue b/doc/galleria/theming/TailwindDoc.vue
index 3d2ad7a5c..3f7480e50 100644
--- a/doc/galleria/theming/TailwindDoc.vue
+++ b/doc/galleria/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded :service="['PhotoService']" />
     </DocSectionText>
 </template>
@@ -108,8 +108,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card md:flex md:justify-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
diff --git a/doc/icons/BasicDoc.vue b/doc/icons/BasicDoc.vue
index c8ed64815..c8b1045f9 100644
--- a/doc/icons/BasicDoc.vue
+++ b/doc/icons/BasicDoc.vue
@@ -16,8 +16,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<i class="pi pi-check"></i>
+                basic: `<i class="pi pi-check"></i>
 <i class="pi pi-times"></i>
 <span class="pi pi-search"></span>
 <span class="pi pi-user"></span>`
diff --git a/doc/icons/ColorDoc.vue b/doc/icons/ColorDoc.vue
index 48fbf8a62..22c597989 100644
--- a/doc/icons/ColorDoc.vue
+++ b/doc/icons/ColorDoc.vue
@@ -16,8 +16,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<i class="pi pi-check" style="color: slateblue"></i>
+                basic: `<i class="pi pi-check" style="color: slateblue"></i>
 <i class="pi pi-times" style="color: green"></i>
 <i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
 <i class="pi pi-user" style="color: #708090"></i>`
diff --git a/doc/icons/ConstantsDoc.vue b/doc/icons/ConstantsDoc.vue
index 25c48147a..ae947478c 100644
--- a/doc/icons/ConstantsDoc.vue
+++ b/doc/icons/ConstantsDoc.vue
@@ -24,8 +24,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
     </div>
diff --git a/doc/icons/SizeDoc.vue b/doc/icons/SizeDoc.vue
index 27ba95494..5203beae9 100644
--- a/doc/icons/SizeDoc.vue
+++ b/doc/icons/SizeDoc.vue
@@ -16,8 +16,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<i class="pi pi-check" style="font-size: 1rem"></i>
+                basic: `<i class="pi pi-check" style="font-size: 1rem"></i>
 <i class="pi pi-times" style="font-size: 1.5rem"></i>
 <i class="pi pi-search" style="font-size: 2rem"></i>
 <i class="pi pi-user" style="font-size: 2.5rem"></i>`
diff --git a/doc/icons/SpinDoc.vue b/doc/icons/SpinDoc.vue
index 698b8e02d..89b717440 100644
--- a/doc/icons/SpinDoc.vue
+++ b/doc/icons/SpinDoc.vue
@@ -14,8 +14,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+                basic: `<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
 <i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>`
             }
         };
diff --git a/doc/image/BasicDoc.vue b/doc/image/BasicDoc.vue
index a2b4af0aa..c32002fba 100644
--- a/doc/image/BasicDoc.vue
+++ b/doc/image/BasicDoc.vue
@@ -13,16 +13,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />`,
-                options: `
-<template>
+                basic: `<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
     </div>
diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index 51575a899..b4cf95f83 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -14,16 +14,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />`,
-                options: `
-<template>
+                basic: `<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index cca7a2631..17bcb919c 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -23,8 +23,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Image alt="Image" preview>
+                basic: `<Image alt="Image" preview>
     <template #indicatoricon>
         <i class="pi pi-check"></i>
     </template>
@@ -35,8 +34,7 @@ export default {
         <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
     </template>
 </Image>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
             <template #indicatoricon>
@@ -51,8 +49,7 @@ export default {
         </Image>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
             <template #indicatoricon>
diff --git a/doc/image/pt/PTDoc.vue b/doc/image/pt/PTDoc.vue
index 41c2acb34..4be0b6d04 100644
--- a/doc/image/pt/PTDoc.vue
+++ b/doc/image/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Image
+                basic: `<Image
     src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
     alt="Image"
     width="250"
@@ -30,8 +29,7 @@ export default {
         image: { class: 'w-15rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Image
             src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
@@ -44,8 +42,7 @@ export default {
         />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Image
             src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
diff --git a/doc/image/theming/TailwindDoc.vue b/doc/image/theming/TailwindDoc.vue
index 56be44b4d..c5ede7bd9 100644
--- a/doc/image/theming/TailwindDoc.vue
+++ b/doc/image/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -88,8 +88,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
diff --git a/doc/inlinemessage/AccessibilityDoc.vue b/doc/inlinemessage/AccessibilityDoc.vue
index 74c7bfdf6..963152f0a 100644
--- a/doc/inlinemessage/AccessibilityDoc.vue
+++ b/doc/inlinemessage/AccessibilityDoc.vue
@@ -44,16 +44,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
+                basic: `<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
 
 `
             },
             code2: {
-                basic: `
-<script setup>
+                basic: `<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/inlinemessage/BasicDoc.vue b/doc/inlinemessage/BasicDoc.vue
index 054978027..72032464f 100644
--- a/doc/inlinemessage/BasicDoc.vue
+++ b/doc/inlinemessage/BasicDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InlineMessage severity="info">Username is required</InlineMessage>`,
-                options: `
-<template>
+                basic: `<InlineMessage severity="info">Username is required</InlineMessage>`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InlineMessage severity="info">Username is required</InlineMessage>
     </div>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InlineMessage severity="info">Username is required</InlineMessage>
     </div>
diff --git a/doc/inlinemessage/FormDoc.vue b/doc/inlinemessage/FormDoc.vue
index b6c34d462..6e1a035af 100644
--- a/doc/inlinemessage/FormDoc.vue
+++ b/doc/inlinemessage/FormDoc.vue
@@ -22,8 +22,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="flex flex-wrap align-items-center mb-3 gap-2">
+                basic: `<div class="flex flex-wrap align-items-center mb-3 gap-2">
     <label for="username" class="p-sr-only">Username</label>
     <InputText id="username" placeholder="Username" class="p-invalid" />
     <InlineMessage>Username is required</InlineMessage>
@@ -33,8 +32,7 @@ export default {
     <InputText id="email" placeholder="Email" class="p-invalid" />
     <InlineMessage />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
             <label for="username" class="p-sr-only">Username</label>
@@ -51,8 +49,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
             <label for="username" class="p-sr-only">Username</label>
diff --git a/doc/inlinemessage/SeverityDoc.vue b/doc/inlinemessage/SeverityDoc.vue
index b26e4b36f..83fa9050f 100644
--- a/doc/inlinemessage/SeverityDoc.vue
+++ b/doc/inlinemessage/SeverityDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InlineMessage severity="success">Success Content</InlineMessage>
+                basic: `<InlineMessage severity="success">Success Content</InlineMessage>
 <InlineMessage severity="info">Info Content</InlineMessage>
 <InlineMessage severity="warn">Warning Content</InlineMessage>
 <InlineMessage severity="error">Error Content</InlineMessage>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <InlineMessage severity="success">Success Content</InlineMessage>
         <InlineMessage severity="info">Info Content</InlineMessage>
@@ -33,8 +31,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <InlineMessage severity="success">Success Content</InlineMessage>
         <InlineMessage severity="info">Info Content</InlineMessage>
diff --git a/doc/inlinemessage/TemplateDoc.vue b/doc/inlinemessage/TemplateDoc.vue
index 661eff5be..03214c13a 100644
--- a/doc/inlinemessage/TemplateDoc.vue
+++ b/doc/inlinemessage/TemplateDoc.vue
@@ -26,16 +26,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
+                basic: `<InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
         severity="info" class="border-primary w-full justify-content-start">
     <div class="flex align-items-center">
         <img alt="logo" src="/images/logo.svg" width="32" />
         <div class="ml-2">Always bet on Prime.</div>
     </div>
 </InlineMessage>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
                 severity="info" class="border-primary w-full justify-content-start">
@@ -49,8 +47,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
                 severity="info" class="border-primary w-full justify-content-start">
diff --git a/doc/inlinemessage/pt/PTDoc.vue b/doc/inlinemessage/pt/PTDoc.vue
index b6c0b4ab5..03207de00 100644
--- a/doc/inlinemessage/pt/PTDoc.vue
+++ b/doc/inlinemessage/pt/PTDoc.vue
@@ -18,8 +18,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InlineMessage
+                basic: `<InlineMessage
     :pt="{
         root: { class: 'bg-yellow-100' },
         icon: { class: 'hidden' }
@@ -27,8 +26,7 @@ export default {
 >
     Username is required
 </InlineMessage>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <InlineMessage
             :pt="{
@@ -43,8 +41,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InlineMessage
             :pt="{
diff --git a/doc/inlinemessage/theming/TailwindDoc.vue b/doc/inlinemessage/theming/TailwindDoc.vue
index 2d7aa4427..ea3688039 100644
--- a/doc/inlinemessage/theming/TailwindDoc.vue
+++ b/doc/inlinemessage/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -36,8 +36,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap items-center justify-center gap-3">
         <InlineMessage severity="success">Success Content</InlineMessage>
         <InlineMessage severity="info">Info Content</InlineMessage>
diff --git a/doc/inplace/BasicDoc.vue b/doc/inplace/BasicDoc.vue
index 39cd6c609..087f0bd39 100644
--- a/doc/inplace/BasicDoc.vue
+++ b/doc/inplace/BasicDoc.vue
@@ -21,8 +21,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Inplace>
+                basic: `<Inplace>
     <template #display> View Content </template>
     <template #content>
         <p class="m-0">
@@ -31,8 +30,7 @@ export default {
         </p>
     </template>
 </Inplace>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Inplace>
             <template #display> View Content </template>
@@ -49,8 +47,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Inplace>
             <template #display> View Content </template>
diff --git a/doc/inplace/ImageDoc.vue b/doc/inplace/ImageDoc.vue
index 8e918629e..8e385d3dd 100644
--- a/doc/inplace/ImageDoc.vue
+++ b/doc/inplace/ImageDoc.vue
@@ -21,8 +21,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Inplace>
+                basic: `<Inplace>
     <template #display>
         <span class="pi pi-search" style="vertical-align: middle"></span>
         <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
@@ -31,8 +30,7 @@ export default {
         <img class="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
     </template>
 </Inplace>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Inplace>
             <template #display>
@@ -48,8 +46,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Inplace>
             <template #display>
diff --git a/doc/inplace/InputDoc.vue b/doc/inplace/InputDoc.vue
index 93e7f78e8..99a0b3818 100644
--- a/doc/inplace/InputDoc.vue
+++ b/doc/inplace/InputDoc.vue
@@ -21,8 +21,7 @@ export default {
         return {
             text: null,
             code: {
-                basic: `
-<Inplace :closable="true">
+                basic: `<Inplace :closable="true">
     <template #display>
         {{ text || 'Click to Edit' }}
     </template>
@@ -30,8 +29,7 @@ export default {
         <InputText v-model="text" autofocus />
     </template>
 </Inplace>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Inplace :closable="true">
             <template #display>
@@ -53,8 +51,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Inplace :closable="true">
             <template #display>
diff --git a/doc/inplace/LazyDoc.vue b/doc/inplace/LazyDoc.vue
index 51a761fce..6005ec5fd 100644
--- a/doc/inplace/LazyDoc.vue
+++ b/doc/inplace/LazyDoc.vue
@@ -26,8 +26,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<Inplace @open="loadData">
+                basic: `<Inplace @open="loadData">
     <template #display> View Data </template>
     <template #content>
         <DataTable :value="products">
@@ -38,8 +37,7 @@ export default {
         </DataTable>
     </template>
 </Inplace>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Inplace @open="loadData">
             <template #display> View Data </template>
@@ -71,8 +69,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Inplace @open="loadData">
             <template #display> View Data </template>
diff --git a/doc/inplace/pt/PTDoc.vue b/doc/inplace/pt/PTDoc.vue
index f5757d787..010def073 100644
--- a/doc/inplace/pt/PTDoc.vue
+++ b/doc/inplace/pt/PTDoc.vue
@@ -23,8 +23,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Inplace
+                basic: `<Inplace
     :pt="{
         display: { class: 'bg-primary' }
     }"
@@ -37,8 +36,7 @@ export default {
         </p>
     </template>
 </Inplace>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Inplace
             :pt="{
@@ -59,8 +57,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Inplace
             :pt="{
diff --git a/doc/inplace/theming/TailwindDoc.vue b/doc/inplace/theming/TailwindDoc.vue
index cdb29697a..df016dc86 100644
--- a/doc/inplace/theming/TailwindDoc.vue
+++ b/doc/inplace/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -26,8 +26,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Inplace>
             <template #display>
diff --git a/doc/inputgroup/BasicDoc.vue b/doc/inputgroup/BasicDoc.vue
index d6aafe555..d89a2d6d2 100644
--- a/doc/inputgroup/BasicDoc.vue
+++ b/doc/inputgroup/BasicDoc.vue
@@ -29,8 +29,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="p-inputgroup flex-1">
+                basic: `<div class="p-inputgroup flex-1">
     <span class="p-inputgroup-addon">
         <i class="pi pi-user"></i>
     </span>
@@ -47,8 +46,7 @@ export default {
     <span class="p-inputgroup-addon">www</span>
     <InputText placeholder="Website" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <span class="p-inputgroup-addon">
@@ -69,8 +67,7 @@ export default {
         </div>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <span class="p-inputgroup-addon">
diff --git a/doc/inputgroup/ButtonDoc.vue b/doc/inputgroup/ButtonDoc.vue
index 51beacbc6..d6acb8418 100644
--- a/doc/inputgroup/ButtonDoc.vue
+++ b/doc/inputgroup/ButtonDoc.vue
@@ -27,8 +27,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="p-inputgroup flex-1">
+                basic: `<div class="p-inputgroup flex-1">
     <Button label="Search" />
     <InputText placeholder="Keyword" />
 </div>
@@ -43,8 +42,7 @@ export default {
     <InputText placeholder="Vote" />
     <Button icon="pi pi-times" severity="danger" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <Button label="Search" />
@@ -63,8 +61,7 @@ export default {
         </div>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <Button label="Search" />
diff --git a/doc/inputgroup/CheckboxDoc.vue b/doc/inputgroup/CheckboxDoc.vue
index 01f0b74a7..972a55a07 100644
--- a/doc/inputgroup/CheckboxDoc.vue
+++ b/doc/inputgroup/CheckboxDoc.vue
@@ -39,8 +39,7 @@ export default {
             radioValue1: '',
             radioValue2: '',
             code: {
-                basic: `
-<div class="p-inputgroup flex-1">
+                basic: `<div class="p-inputgroup flex-1">
     <InputText placeholder="Price" />
     <span class="p-inputgroup-addon">
         <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
@@ -63,8 +62,7 @@ export default {
         <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
     </span>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <InputText placeholder="Price" />
@@ -104,8 +102,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <InputText placeholder="Price" />
diff --git a/doc/inputgroup/MultipleDoc.vue b/doc/inputgroup/MultipleDoc.vue
index e559dd649..928d8cfba 100644
--- a/doc/inputgroup/MultipleDoc.vue
+++ b/doc/inputgroup/MultipleDoc.vue
@@ -23,8 +23,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="p-inputgroup w-full md:w-30rem">
+                basic: `<div class="p-inputgroup w-full md:w-30rem">
     <span class="p-inputgroup-addon">
         <i class="pi pi-clock"></i>
     </span>
@@ -35,8 +34,7 @@ export default {
     <span class="p-inputgroup-addon">$</span>
     <span class="p-inputgroup-addon">.00</span>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="p-inputgroup w-full md:w-30rem">
             <span class="p-inputgroup-addon">
@@ -51,8 +49,7 @@ export default {
         </div>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="p-inputgroup w-full md:w-30rem">
             <span class="p-inputgroup-addon">
diff --git a/doc/inputmask/AccessibilityDoc.vue b/doc/inputmask/AccessibilityDoc.vue
index 2128e3620..fdb8af3e9 100644
--- a/doc/inputmask/AccessibilityDoc.vue
+++ b/doc/inputmask/AccessibilityDoc.vue
@@ -32,8 +32,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="date">Date</label>
+                basic: `<label for="date">Date</label>
 <InputMask id="date" />
 
 <span id="phone">Phone</span>
diff --git a/doc/inputmask/BasicDoc.vue b/doc/inputmask/BasicDoc.vue
index 950a899a2..b2203fc05 100644
--- a/doc/inputmask/BasicDoc.vue
+++ b/doc/inputmask/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
-                options: `
-<template>
+                basic: `<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
@@ -33,8 +31,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
diff --git a/doc/inputmask/DisabledDoc.vue b/doc/inputmask/DisabledDoc.vue
index a27b6aa28..f7903f6c9 100644
--- a/doc/inputmask/DisabledDoc.vue
+++ b/doc/inputmask/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<InputMask mask="99-999999" placeholder="99-999999" disabled />`,
-                options: `
-<template>
+                basic: `<InputMask mask="99-999999" placeholder="99-999999" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputMask mask="99-999999" placeholder="99-999999" disabled />
     </div>
@@ -33,8 +31,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputMask mask="99-999999" placeholder="99-999999" disabled />
     </div>
diff --git a/doc/inputmask/FloatLabelDoc.vue b/doc/inputmask/FloatLabelDoc.vue
index 5f73f0407..e661675bd 100644
--- a/doc/inputmask/FloatLabelDoc.vue
+++ b/doc/inputmask/FloatLabelDoc.vue
@@ -17,13 +17,11 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
     <label for="ssn">SSN</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
@@ -42,8 +40,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" />
diff --git a/doc/inputmask/InvalidDoc.vue b/doc/inputmask/InvalidDoc.vue
index 90c10ff55..f6d60a50b 100644
--- a/doc/inputmask/InvalidDoc.vue
+++ b/doc/inputmask/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>`,
-                options: `
-<template>
+                basic: `<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
     </div>
@@ -33,8 +31,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
     </div>
diff --git a/doc/inputmask/MaskDoc.vue b/doc/inputmask/MaskDoc.vue
index 4d6b0be08..15053aeca 100644
--- a/doc/inputmask/MaskDoc.vue
+++ b/doc/inputmask/MaskDoc.vue
@@ -32,8 +32,7 @@ export default {
             value2: '',
             value3: '',
             code: {
-                basic: `
-<div class="flex-auto">
+                basic: `<div class="flex-auto">
     <label for="ssn">SSN</label>
     <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
 </div>
@@ -47,8 +46,7 @@ export default {
     <label for="serial">Serial</label>
     <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card p-fluid flex flex-wrap gap-3">
         <div class="flex-auto">
             <label for="ssn">SSN</label>
@@ -79,8 +77,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card p-fluid flex flex-wrap gap-3">
         <div class="flex-auto">
             <label for="ssn">SSN</label>
diff --git a/doc/inputmask/OptionalDoc.vue b/doc/inputmask/OptionalDoc.vue
index 66ae36a40..24f03454e 100644
--- a/doc/inputmask/OptionalDoc.vue
+++ b/doc/inputmask/OptionalDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />`,
-                options: `
-<template>
+                basic: `<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
     </div>
@@ -33,8 +31,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
     </div>
diff --git a/doc/inputmask/SlotCharDoc.vue b/doc/inputmask/SlotCharDoc.vue
index 961c0e97a..d0e8373d1 100644
--- a/doc/inputmask/SlotCharDoc.vue
+++ b/doc/inputmask/SlotCharDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />`,
-                options: `
-<template>
+                basic: `<InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
     </div>
@@ -32,8 +30,7 @@ export default {
   }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
     </div>
diff --git a/doc/inputmask/form/VeeValidateDoc.vue b/doc/inputmask/form/VeeValidateDoc.vue
index 945ae7a78..eb18f5503 100644
--- a/doc/inputmask/form/VeeValidateDoc.vue
+++ b/doc/inputmask/form/VeeValidateDoc.vue
@@ -42,8 +42,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
@@ -54,8 +53,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
@@ -96,8 +94,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
diff --git a/doc/inputmask/pt/PTDoc.vue b/doc/inputmask/pt/PTDoc.vue
index f6a8a5d42..de595b47a 100644
--- a/doc/inputmask/pt/PTDoc.vue
+++ b/doc/inputmask/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<InputMask
+                basic: `<InputMask
     id="basic"
     v-model="value"
     mask="99-999999"
@@ -30,8 +29,7 @@ export default {
         root: { class: 'border-teal-400' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputMask
             id="basic"
@@ -55,8 +53,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputMask
             id="basic"
diff --git a/doc/inputmask/theming/TailwindDoc.vue b/doc/inputmask/theming/TailwindDoc.vue
index 5fc1d85e4..087c21868 100644
--- a/doc/inputmask/theming/TailwindDoc.vue
+++ b/doc/inputmask/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -24,8 +24,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
diff --git a/doc/inputnumber/AccessibilityDoc.vue b/doc/inputnumber/AccessibilityDoc.vue
index aed9e34ba..f84b610bd 100644
--- a/doc/inputnumber/AccessibilityDoc.vue
+++ b/doc/inputnumber/AccessibilityDoc.vue
@@ -49,8 +49,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="price">Price</label>
+                basic: `<label for="price">Price</label>
 <InputNumber inputId="price" />
 
 <span id="label_number">Number</span>
diff --git a/doc/inputnumber/ButtonsDoc.vue b/doc/inputnumber/ButtonsDoc.vue
index 1649be3eb..fbd2e745c 100644
--- a/doc/inputnumber/ButtonsDoc.vue
+++ b/doc/inputnumber/ButtonsDoc.vue
@@ -40,14 +40,12 @@ export default {
             value2: 25,
             value3: 10.5,
             code: {
-                basic: `
-<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
+                basic: `<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
 <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
 <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
     decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
     mode="currency" currency="EUR" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
@@ -78,8 +76,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
diff --git a/doc/inputnumber/CurrencyDoc.vue b/doc/inputnumber/CurrencyDoc.vue
index 0d1d451d9..f12871727 100644
--- a/doc/inputnumber/CurrencyDoc.vue
+++ b/doc/inputnumber/CurrencyDoc.vue
@@ -32,13 +32,11 @@ export default {
             value3: 4250,
             value4: 5002,
             code: {
-                basic: `
-<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
+                basic: `<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
 <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
 <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
 <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
@@ -71,8 +69,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
diff --git a/doc/inputnumber/DisabledDoc.vue b/doc/inputnumber/DisabledDoc.vue
index 70706100b..93e6bd19a 100644
--- a/doc/inputnumber/DisabledDoc.vue
+++ b/doc/inputnumber/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `
-<InputNumber v-model="value" disabled prefix="%" />`,
-                options: `
-<template>
+                basic: `<InputNumber v-model="value" disabled prefix="%" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" disabled prefix="%" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" disabled prefix="%" />
     </div>
diff --git a/doc/inputnumber/FloatLabelDoc.vue b/doc/inputnumber/FloatLabelDoc.vue
index c912741de..5dc9abbd7 100644
--- a/doc/inputnumber/FloatLabelDoc.vue
+++ b/doc/inputnumber/FloatLabelDoc.vue
@@ -17,13 +17,11 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <InputNumber id="number-input" v-model="value" />
     <label for="number-input">Number</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputNumber id="number-input" v-model="value" />
@@ -41,8 +39,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputNumber id="number-input" v-model="value" />
diff --git a/doc/inputnumber/InvalidDoc.vue b/doc/inputnumber/InvalidDoc.vue
index f51e0cd65..031656e30 100644
--- a/doc/inputnumber/InvalidDoc.vue
+++ b/doc/inputnumber/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />`,
-                options: `
-<template>
+                basic: `<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
     </div>
diff --git a/doc/inputnumber/LocaleDoc.vue b/doc/inputnumber/LocaleDoc.vue
index ad3003d4b..579c542f2 100644
--- a/doc/inputnumber/LocaleDoc.vue
+++ b/doc/inputnumber/LocaleDoc.vue
@@ -32,13 +32,11 @@ export default {
             value3: 635524,
             value4: 732762,
             code: {
-                basic: `
-<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
+                basic: `<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
 <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
 <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
 <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
@@ -71,8 +69,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
diff --git a/doc/inputnumber/NumeralsDoc.vue b/doc/inputnumber/NumeralsDoc.vue
index 78e642b3d..528efe8cc 100644
--- a/doc/inputnumber/NumeralsDoc.vue
+++ b/doc/inputnumber/NumeralsDoc.vue
@@ -32,13 +32,11 @@ export default {
             value3: 2351.35,
             value4: 50,
             code: {
-                basic: `
-<InputNumber v-model="value1" inputId="integeronly" />
+                basic: `<InputNumber v-model="value1" inputId="integeronly" />
 <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
 <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
 <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
@@ -71,8 +69,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
diff --git a/doc/inputnumber/PrefixSuffixDoc.vue b/doc/inputnumber/PrefixSuffixDoc.vue
index d05ffd9c4..a66423175 100644
--- a/doc/inputnumber/PrefixSuffixDoc.vue
+++ b/doc/inputnumber/PrefixSuffixDoc.vue
@@ -32,13 +32,11 @@ export default {
             value3: 10,
             value4: 20,
             code: {
-                basic: `
-<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
+                basic: `<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
 <InputNumber v-model="value2" inputId="percent" prefix="%" />
 <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
 <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
@@ -71,8 +69,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
diff --git a/doc/inputnumber/VerticalDoc.vue b/doc/inputnumber/VerticalDoc.vue
index db3b21b7e..c94dfd201 100644
--- a/doc/inputnumber/VerticalDoc.vue
+++ b/doc/inputnumber/VerticalDoc.vue
@@ -23,11 +23,9 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `
-<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
+                basic: `<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
     decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
             decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
@@ -43,8 +41,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
             decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
diff --git a/doc/inputnumber/form/VeeValidateDoc.vue b/doc/inputnumber/form/VeeValidateDoc.vue
index a803ccfd3..d0f624025 100644
--- a/doc/inputnumber/form/VeeValidateDoc.vue
+++ b/doc/inputnumber/form/VeeValidateDoc.vue
@@ -45,8 +45,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="year">Enter a year between 1960-2050.</label>
@@ -57,8 +56,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="year">Enter a year between 1960-2050.</label>
@@ -101,8 +99,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="year">Enter a year between 1960-2050.</label>
diff --git a/doc/inputnumber/pt/PTDoc.vue b/doc/inputnumber/pt/PTDoc.vue
index 71fb0c16e..f8cd4036d 100644
--- a/doc/inputnumber/pt/PTDoc.vue
+++ b/doc/inputnumber/pt/PTDoc.vue
@@ -25,8 +25,7 @@ export default {
         return {
             value: 20,
             code: {
-                basic: `
-<InputNumber
+                basic: `<InputNumber
     v-model="value"
     showButtons
     buttonLayout="horizontal"
@@ -40,8 +39,7 @@ export default {
         decrementButton: { class: 'bg-orange-500 border-orange-500' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputNumber
             v-model="value"
@@ -69,8 +67,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputNumber
             v-model="value"
diff --git a/doc/inputnumber/theming/TailwindDoc.vue b/doc/inputnumber/theming/TailwindDoc.vue
index 3214c8b9e..5d071dc20 100644
--- a/doc/inputnumber/theming/TailwindDoc.vue
+++ b/doc/inputnumber/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -47,8 +47,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
diff --git a/doc/inputswitch/AccessibilityDoc.vue b/doc/inputswitch/AccessibilityDoc.vue
index 3ebfe393b..afcc4895d 100644
--- a/doc/inputswitch/AccessibilityDoc.vue
+++ b/doc/inputswitch/AccessibilityDoc.vue
@@ -36,8 +36,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="switch1">Remember Me</label>
+                basic: `<label for="switch1">Remember Me</label>
 <InputSwitch inputId="switch1" />
 
 <span id="switch2">Remember Me</span>
diff --git a/doc/inputswitch/BasicDoc.vue b/doc/inputswitch/BasicDoc.vue
index 1c8f60ffb..fc0dc426c 100644
--- a/doc/inputswitch/BasicDoc.vue
+++ b/doc/inputswitch/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<InputSwitch v-model="checked" />`,
-                options: `
-<template>
+                basic: `<InputSwitch v-model="checked" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
diff --git a/doc/inputswitch/DisabledDoc.vue b/doc/inputswitch/DisabledDoc.vue
index cf2624fbb..85785bd5f 100644
--- a/doc/inputswitch/DisabledDoc.vue
+++ b/doc/inputswitch/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<InputSwitch v-model="checked" disabled />`,
-                options: `
-<template>
+                basic: `<InputSwitch v-model="checked" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" disabled />
     </div>
diff --git a/doc/inputswitch/InvalidDoc.vue b/doc/inputswitch/InvalidDoc.vue
index 2319a6c32..16dd20178 100644
--- a/doc/inputswitch/InvalidDoc.vue
+++ b/doc/inputswitch/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<InputSwitch v-model="checked" class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<InputSwitch v-model="checked" class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" class="p-invalid" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" class="p-invalid" />
     </div>
diff --git a/doc/inputswitch/PreselectionDoc.vue b/doc/inputswitch/PreselectionDoc.vue
index b7500a593..0e7db8224 100644
--- a/doc/inputswitch/PreselectionDoc.vue
+++ b/doc/inputswitch/PreselectionDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: true,
             code: {
-                basic: `
-<InputSwitch v-model="checked" />`,
-                options: `
-<template>
+                basic: `<InputSwitch v-model="checked" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
diff --git a/doc/inputswitch/form/VeeValidateDoc.vue b/doc/inputswitch/form/VeeValidateDoc.vue
index fd48189f9..2f82f48d4 100644
--- a/doc/inputswitch/form/VeeValidateDoc.vue
+++ b/doc/inputswitch/form/VeeValidateDoc.vue
@@ -43,8 +43,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
@@ -54,8 +53,7 @@ export default {
         </form>
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
@@ -96,8 +94,7 @@ export default {
     },
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
diff --git a/doc/inputswitch/pt/PTDoc.vue b/doc/inputswitch/pt/PTDoc.vue
index 265551e87..8a8bfd7da 100644
--- a/doc/inputswitch/pt/PTDoc.vue
+++ b/doc/inputswitch/pt/PTDoc.vue
@@ -19,8 +19,7 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<InputSwitch
+                basic: `<InputSwitch
     v-model="checked"
     :pt="{
         slider: ({ props }) => ({
@@ -28,8 +27,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch
             v-model="checked"
@@ -51,8 +49,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputSwitch
             v-model="checked"
diff --git a/doc/inputswitch/theming/TailwindDoc.vue b/doc/inputswitch/theming/TailwindDoc.vue
index 9b70b5a3c..b6b58c7d5 100644
--- a/doc/inputswitch/theming/TailwindDoc.vue
+++ b/doc/inputswitch/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -44,8 +44,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <InputSwitch v-model="checked" />
     </div>
diff --git a/doc/inputtext/AccessibilityDoc.vue b/doc/inputtext/AccessibilityDoc.vue
index 8c36acf55..8a3f1b408 100644
--- a/doc/inputtext/AccessibilityDoc.vue
+++ b/doc/inputtext/AccessibilityDoc.vue
@@ -35,8 +35,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="firstname">Firstname</label>
+                basic: `<label for="firstname">Firstname</label>
 <InputText id="firstname" />
 
 <span id="lastname">Lastname</span>
diff --git a/doc/inputtext/BasicDoc.vue b/doc/inputtext/BasicDoc.vue
index a989a9de5..0aec837e8 100644
--- a/doc/inputtext/BasicDoc.vue
+++ b/doc/inputtext/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<InputText type="text" v-model="value" />`,
-                options: `
-<template>
+                basic: `<InputText type="text" v-model="value" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputText type="text" v-model="value" />
     </div>
@@ -33,8 +31,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputText type="text" v-model="value" />
     </div>
diff --git a/doc/inputtext/DisabledDoc.vue b/doc/inputtext/DisabledDoc.vue
index 70e2ef1ae..b89f2843a 100644
--- a/doc/inputtext/DisabledDoc.vue
+++ b/doc/inputtext/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<InputText v-model="value" disabled placeholder="Disabled" />`,
-                options: `
-<template>
+                basic: `<InputText v-model="value" disabled placeholder="Disabled" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
diff --git a/doc/inputtext/FloatLabelDoc.vue b/doc/inputtext/FloatLabelDoc.vue
index 2b4db8de1..ea1bb0d55 100644
--- a/doc/inputtext/FloatLabelDoc.vue
+++ b/doc/inputtext/FloatLabelDoc.vue
@@ -17,13 +17,11 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <InputText id="username" v-model="value" />
     <label for="username">Username</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputText id="username" v-model="value" />
@@ -42,8 +40,7 @@ export default {
 }
 <\/script>
                 `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputText id="username" v-model="value" />
diff --git a/doc/inputtext/HelpTextDoc.vue b/doc/inputtext/HelpTextDoc.vue
index c0d1e8886..ac3dd59aa 100644
--- a/doc/inputtext/HelpTextDoc.vue
+++ b/doc/inputtext/HelpTextDoc.vue
@@ -18,15 +18,13 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<div class="flex flex-column gap-2">
+                basic: `<div class="flex flex-column gap-2">
     <label for="username">Username</label>
     <InputText id="username" v-model="value" aria-describedby="username-help" />
     <small id="username-help">Enter your username to reset your password.</small>
 </div>
                 `,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-2">
             <label for="username">Username</label>
@@ -46,8 +44,7 @@ export default {
 }
 <\/script>
                 `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-2">
             <label for="username">Username</label>
diff --git a/doc/inputtext/IconsDoc.vue b/doc/inputtext/IconsDoc.vue
index bdb9e536a..7a0ae6b64 100644
--- a/doc/inputtext/IconsDoc.vue
+++ b/doc/inputtext/IconsDoc.vue
@@ -23,8 +23,7 @@ export default {
             value1: null,
             value2: null,
             code: {
-                basic: `
-<span class="p-input-icon-left">
+                basic: `<span class="p-input-icon-left">
     <i class="pi pi-search" />
     <InputText v-model="value1" placeholder="Search" />
 </span>
@@ -33,8 +32,7 @@ export default {
     <i class="pi pi-spin pi-spinner" />
     <InputText v-model="value2" />
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <span class="p-input-icon-left">
             <i class="pi pi-search" />
@@ -58,8 +56,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <span class="p-input-icon-left">
             <i class="pi pi-search" />
diff --git a/doc/inputtext/InvalidDoc.vue b/doc/inputtext/InvalidDoc.vue
index 08abc6e97..61e38b212 100644
--- a/doc/inputtext/InvalidDoc.vue
+++ b/doc/inputtext/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<InputText v-model="value" class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<InputText v-model="value" class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" class="p-invalid" />
     </div> 
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" class="p-invalid" />
     </div> 
diff --git a/doc/inputtext/SizesDoc.vue b/doc/inputtext/SizesDoc.vue
index c51a79f53..b5f1781a8 100644
--- a/doc/inputtext/SizesDoc.vue
+++ b/doc/inputtext/SizesDoc.vue
@@ -18,12 +18,10 @@ export default {
             value2: null,
             value3: null,
             code: {
-                basic: `
-<InputText v-model="value1" type="text" size="small" placeholder="Small" />
+                basic: `<InputText v-model="value1" type="text" size="small" placeholder="Small" />
 <InputText v-model="value2" type="text" placeholder="Normal" />
 <InputText v-model="value3" type="text" size="large" placeholder="Large" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
         <InputText v-model="value2" type="text" placeholder="Normal" />
@@ -42,8 +40,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
         <InputText v-model="value2" type="text" placeholder="Normal" />
diff --git a/doc/inputtext/form/VeeValidateDoc.vue b/doc/inputtext/form/VeeValidateDoc.vue
index b97820a7d..55dc13c35 100644
--- a/doc/inputtext/form/VeeValidateDoc.vue
+++ b/doc/inputtext/form/VeeValidateDoc.vue
@@ -45,8 +45,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -59,8 +58,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -103,8 +101,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
diff --git a/doc/inputtext/pt/PTDoc.vue b/doc/inputtext/pt/PTDoc.vue
index 0f349a955..342b9fe1c 100644
--- a/doc/inputtext/pt/PTDoc.vue
+++ b/doc/inputtext/pt/PTDoc.vue
@@ -18,16 +18,14 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<InputText
+                basic: `<InputText
     v-model="value"
     type="text"
     :pt="{
         root: { class: 'border-teal-400' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <InputText
             v-model="value"
@@ -49,8 +47,7 @@ export default {
 }
 <\/script>
         `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <InputText
             v-model="value"
diff --git a/doc/inputtext/theming/TailwindDoc.vue b/doc/inputtext/theming/TailwindDoc.vue
index c2e7bd88f..34b057169 100644
--- a/doc/inputtext/theming/TailwindDoc.vue
+++ b/doc/inputtext/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -38,8 +38,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <InputText type="text" v-model="value" />
     </div>
diff --git a/doc/installation/UsageDoc.vue b/doc/installation/UsageDoc.vue
index ed7a1529a..59a04791e 100644
--- a/doc/installation/UsageDoc.vue
+++ b/doc/installation/UsageDoc.vue
@@ -13,19 +13,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-import Button from "primevue/button"
+                basic: `import Button from "primevue/button"
 
 const app = createApp(App);
 app.component('Button', Button);`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
diff --git a/doc/knob/AccessibilityDoc.vue b/doc/knob/AccessibilityDoc.vue
index cbcc88b21..d87b26bb6 100644
--- a/doc/knob/AccessibilityDoc.vue
+++ b/doc/knob/AccessibilityDoc.vue
@@ -66,8 +66,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="label_number">Number</span>
+                basic: `<span id="label_number">Number</span>
 <Knob aria-labelledby="label_number" />
 
 <Knob aria-label="Number" />`
diff --git a/doc/knob/BasicDoc.vue b/doc/knob/BasicDoc.vue
index 074934f19..5a0d28a8f 100644
--- a/doc/knob/BasicDoc.vue
+++ b/doc/knob/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 0,
             code: {
-                basic: `
-<Knob v-model="value" />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" />
     </div>
diff --git a/doc/knob/ColorDoc.vue b/doc/knob/ColorDoc.vue
index 01f4759d2..f78414815 100644
--- a/doc/knob/ColorDoc.vue
+++ b/doc/knob/ColorDoc.vue
@@ -17,10 +17,8 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `
-<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />`,
+                options: `<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
   </div>
@@ -35,8 +33,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
   </div>
diff --git a/doc/knob/DisabledDoc.vue b/doc/knob/DisabledDoc.vue
index 38b4be212..117436554 100644
--- a/doc/knob/DisabledDoc.vue
+++ b/doc/knob/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `
-<Knob v-model="value" disabled />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" disabled />
     </div>
diff --git a/doc/knob/MinMaxDoc.vue b/doc/knob/MinMaxDoc.vue
index 4ff059653..7602a21c2 100644
--- a/doc/knob/MinMaxDoc.vue
+++ b/doc/knob/MinMaxDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 10,
             code: {
-                basic: `
-<Knob v-model="value" :min="-50" :max="10" />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" :min="-50" :max="10" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :min="-50" :max="50" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :min="-50" :max="50" />
     </div>
diff --git a/doc/knob/ReactiveDoc.vue b/doc/knob/ReactiveDoc.vue
index d1eca3339..ecc4e9fb6 100644
--- a/doc/knob/ReactiveDoc.vue
+++ b/doc/knob/ReactiveDoc.vue
@@ -18,14 +18,12 @@ export default {
         return {
             value: 0,
             code: {
-                basic: `
-<Knob v-model="value" :size="150" readonly />
+                basic: `<Knob v-model="value" :size="150" readonly />
 <div class="flex gap-2">
     <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
     <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-2">
         <Knob v-model="value" :size="150" readonly />
         <div class="flex gap-2">
@@ -44,8 +42,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-2">
         <Knob v-model="value" :size="150" readonly />
         <div class="flex gap-2">
diff --git a/doc/knob/ReadOnlyDoc.vue b/doc/knob/ReadOnlyDoc.vue
index 2edf7ceec..977b301f3 100644
--- a/doc/knob/ReadOnlyDoc.vue
+++ b/doc/knob/ReadOnlyDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `
-<Knob v-model="value" readonly />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" readonly />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" readonly />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" readonly />
     </div>
diff --git a/doc/knob/SizeDoc.vue b/doc/knob/SizeDoc.vue
index 5b49f6788..582025fd2 100644
--- a/doc/knob/SizeDoc.vue
+++ b/doc/knob/SizeDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 60,
             code: {
-                basic: `
-<Knob v-model="value" :size="200" />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" :size="200" />`,
+                options: `<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :size="200" />
   </div>
@@ -32,8 +30,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :size="200" />
   </div>
diff --git a/doc/knob/StepDoc.vue b/doc/knob/StepDoc.vue
index 99f7f86bb..f3b504abf 100644
--- a/doc/knob/StepDoc.vue
+++ b/doc/knob/StepDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 40,
             code: {
-                basic: `
-<Knob v-model="value5" :step="10" />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value5" :step="10" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :step="10" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :step="10" />
     </div>
diff --git a/doc/knob/StrokeDoc.vue b/doc/knob/StrokeDoc.vue
index 7e7636bde..8d70e0191 100644
--- a/doc/knob/StrokeDoc.vue
+++ b/doc/knob/StrokeDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 40,
             code: {
-                basic: `
-<Knob v-model="value" :strokeWidth="5" />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" :strokeWidth="5" />`,
+                options: `<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :strokeWidth="5" />
   </div>
@@ -32,8 +30,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :strokeWidth="5" />
   </div>
diff --git a/doc/knob/TemplateDoc.vue b/doc/knob/TemplateDoc.vue
index 2db284b00..64b2476f4 100644
--- a/doc/knob/TemplateDoc.vue
+++ b/doc/knob/TemplateDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 60,
             code: {
-                basic: `
-<Knob v-model="value" valueTemplate="{value}%" />`,
-                options: `
-<template>
+                basic: `<Knob v-model="value" valueTemplate="{value}%" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
     </div>
diff --git a/doc/knob/form/VeeValidateDoc.vue b/doc/knob/form/VeeValidateDoc.vue
index 4a190dd91..ce10b6319 100644
--- a/doc/knob/form/VeeValidateDoc.vue
+++ b/doc/knob/form/VeeValidateDoc.vue
@@ -49,8 +49,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Knob v-model="value" aria-describedby="text-error" />
@@ -59,8 +58,7 @@ export default {
         </form>
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Knob v-model="value" aria-describedby="text-error" />
@@ -107,8 +105,7 @@ export default {
     },
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Knob id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
diff --git a/doc/knob/pt/PTDoc.vue b/doc/knob/pt/PTDoc.vue
index 869ddf87d..84b9acd62 100644
--- a/doc/knob/pt/PTDoc.vue
+++ b/doc/knob/pt/PTDoc.vue
@@ -17,15 +17,13 @@ export default {
         return {
             value: 0,
             code: {
-                basic: `
-<Knob
+                basic: `<Knob
     v-model="value"
     :pt="{
         value: { style: { stroke: 'var(--cyan-500)' } }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Knob
             v-model="value"
@@ -45,8 +43,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Knob
             v-model="value"
diff --git a/doc/knob/theming/TailwindDoc.vue b/doc/knob/theming/TailwindDoc.vue
index 20fa3f589..c995add66 100644
--- a/doc/knob/theming/TailwindDoc.vue
+++ b/doc/knob/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -34,8 +34,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Knob v-model="value" />
     </div>
diff --git a/doc/listbox/AccessibilityDoc.vue b/doc/listbox/AccessibilityDoc.vue
index 528eea360..f254e906d 100644
--- a/doc/listbox/AccessibilityDoc.vue
+++ b/doc/listbox/AccessibilityDoc.vue
@@ -144,8 +144,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="lb"></span>Options</span>
+                basic: `<span id="lb"></span>Options</span>
 <Listbox aria-labelledby="lb" />
 
 <Listbox aria-label="City" />`
diff --git a/doc/listbox/BasicDoc.vue b/doc/listbox/BasicDoc.vue
index b64169192..bbf4969db 100644
--- a/doc/listbox/BasicDoc.vue
+++ b/doc/listbox/BasicDoc.vue
@@ -25,10 +25,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -50,8 +48,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/DisabledDoc.vue b/doc/listbox/DisabledDoc.vue
index ee047aeb0..5bee48b88 100644
--- a/doc/listbox/DisabledDoc.vue
+++ b/doc/listbox/DisabledDoc.vue
@@ -21,10 +21,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -46,8 +44,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/FilterDoc.vue b/doc/listbox/FilterDoc.vue
index 95dd38d05..9663a96c0 100644
--- a/doc/listbox/FilterDoc.vue
+++ b/doc/listbox/FilterDoc.vue
@@ -21,10 +21,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -46,8 +44,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/GroupDoc.vue b/doc/listbox/GroupDoc.vue
index db5d0d597..9d19c5238 100644
--- a/doc/listbox/GroupDoc.vue
+++ b/doc/listbox/GroupDoc.vue
@@ -56,8 +56,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
+                basic: `<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -65,8 +64,7 @@ export default {
         </div>
     </template>
 </Listbox>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
@@ -120,8 +118,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
diff --git a/doc/listbox/InvalidDoc.vue b/doc/listbox/InvalidDoc.vue
index 34914520b..474eda8ea 100644
--- a/doc/listbox/InvalidDoc.vue
+++ b/doc/listbox/InvalidDoc.vue
@@ -21,10 +21,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
     </div>
@@ -46,8 +44,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/MultipleDoc.vue b/doc/listbox/MultipleDoc.vue
index 792e30adf..81b462a04 100644
--- a/doc/listbox/MultipleDoc.vue
+++ b/doc/listbox/MultipleDoc.vue
@@ -24,10 +24,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `
-<template>
+                basic: `<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -49,8 +47,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/TemplateDoc.vue b/doc/listbox/TemplateDoc.vue
index 45aab3618..9f647e405 100644
--- a/doc/listbox/TemplateDoc.vue
+++ b/doc/listbox/TemplateDoc.vue
@@ -33,8 +33,7 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `
-<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
+                basic: `<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
     <template #option="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -42,8 +41,7 @@ export default {
         </div>
     </template>
 </Listbox>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #option="slotProps">
@@ -77,8 +75,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #option="slotProps">
diff --git a/doc/listbox/VirtualScrollDoc.vue b/doc/listbox/VirtualScrollDoc.vue
index 6b62c1014..916673e0e 100644
--- a/doc/listbox/VirtualScrollDoc.vue
+++ b/doc/listbox/VirtualScrollDoc.vue
@@ -18,11 +18,9 @@ export default {
             selectedItem: null,
             items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
             code: {
-                basic: `
-<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+                basic: `<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
     :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"    
             :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
@@ -39,8 +37,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
diff --git a/doc/listbox/form/VeeValidateDoc.vue b/doc/listbox/form/VeeValidateDoc.vue
index d59948245..4cf20ffc7 100644
--- a/doc/listbox/form/VeeValidateDoc.vue
+++ b/doc/listbox/form/VeeValidateDoc.vue
@@ -49,8 +49,7 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
@@ -60,8 +59,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
@@ -112,8 +110,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
diff --git a/doc/listbox/pt/PTDoc.vue b/doc/listbox/pt/PTDoc.vue
index 6432f1a7d..9820240dc 100644
--- a/doc/listbox/pt/PTDoc.vue
+++ b/doc/listbox/pt/PTDoc.vue
@@ -29,8 +29,7 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<Listbox
+                basic: `<Listbox
     v-model="selectedCity"
     :options="cities"
     optionLabel="name"
@@ -41,8 +40,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Listbox
             v-model="selectedCity"
@@ -74,8 +72,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Listbox
             v-model="selectedCity"
diff --git a/doc/listbox/theming/TailwindDoc.vue b/doc/listbox/theming/TailwindDoc.vue
index c88090c16..621a62601 100644
--- a/doc/listbox/theming/TailwindDoc.vue
+++ b/doc/listbox/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -59,8 +59,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/megamenu/BasicDoc.vue b/doc/megamenu/BasicDoc.vue
index 4cc58c859..837cc1839 100644
--- a/doc/megamenu/BasicDoc.vue
+++ b/doc/megamenu/BasicDoc.vue
@@ -129,10 +129,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<MegaMenu :model="items" />`,
-                options: `
-<template>
+                basic: `<MegaMenu :model="items" />`,
+                options: `<template>
     <div class="card">
         <MegaMenu :model="items" />
     </div>
@@ -262,8 +260,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <MegaMenu :model="items" />
     </div>
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 662bbb94a..a030494db 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -138,8 +138,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<MegaMenu :model="items" orientation="horizontal">
+                basic: `<MegaMenu :model="items" orientation="horizontal">
     <template #start>
         <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
     </template>
@@ -147,8 +146,7 @@ export default {
         <InputText placeholder="Search" type="text" />
     </template>
 </MegaMenu>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <MegaMenu :model="items" orientation="horizontal">
             <template #start>
@@ -287,8 +285,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<MegaMenu :model="items" orientation="horizontal">
+                composition: `<MegaMenu :model="items" orientation="horizontal">
     <template #start>
         <span class="flex align-items-center">
             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
diff --git a/doc/megamenu/VerticalDoc.vue b/doc/megamenu/VerticalDoc.vue
index 1db4789e6..27d0f88c7 100644
--- a/doc/megamenu/VerticalDoc.vue
+++ b/doc/megamenu/VerticalDoc.vue
@@ -129,10 +129,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<MegaMenu :model="items" orientation="vertical" />`,
-                options: `
-<template>
+                basic: `<MegaMenu :model="items" orientation="vertical" />`,
+                options: `<template>
     <div class="card">
         <MegaMenu :model="items" orientation="vertical" />
     </div>
@@ -262,8 +260,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <MegaMenu :model="items" orientation="vertical" />
     </div>
diff --git a/doc/megamenu/pt/PTDoc.vue b/doc/megamenu/pt/PTDoc.vue
index 2ae853aca..934c0a9c3 100644
--- a/doc/megamenu/pt/PTDoc.vue
+++ b/doc/megamenu/pt/PTDoc.vue
@@ -134,8 +134,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<MegaMenu
+                basic: `<MegaMenu
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -143,8 +142,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <MegaMenu
             :model="items"
@@ -281,8 +279,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <MegaMenu
             :model="items"
diff --git a/doc/megamenu/theming/TailwindDoc.vue b/doc/megamenu/theming/TailwindDoc.vue
index e9cb17a83..c62a22d4f 100644
--- a/doc/megamenu/theming/TailwindDoc.vue
+++ b/doc/megamenu/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -85,8 +85,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <MegaMenu :model="items" />
     </div>
diff --git a/doc/menu/BasicDoc.vue b/doc/menu/BasicDoc.vue
index 8b38345d8..75a901333 100644
--- a/doc/menu/BasicDoc.vue
+++ b/doc/menu/BasicDoc.vue
@@ -17,10 +17,8 @@ export default {
                 { label: 'Delete', icon: 'pi pi-fw pi-trash' }
             ],
             code: {
-                basic: `
-<Menu :model="items" />`,
-                options: `
-<template>
+                basic: `<Menu :model="items" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
     </div>
@@ -38,8 +36,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
     </div>
diff --git a/doc/menu/GroupDoc.vue b/doc/menu/GroupDoc.vue
index cbdbdd56d..a654f6e8e 100644
--- a/doc/menu/GroupDoc.vue
+++ b/doc/menu/GroupDoc.vue
@@ -49,11 +49,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Menu :model="items" />
+                basic: `<Menu :model="items" />
 <Toast />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
         <Toast />
@@ -104,8 +102,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
         <Toast />
diff --git a/doc/menu/PopupDoc.vue b/doc/menu/PopupDoc.vue
index c7e19439c..10d223b27 100644
--- a/doc/menu/PopupDoc.vue
+++ b/doc/menu/PopupDoc.vue
@@ -50,12 +50,10 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+                basic: `<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
 <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
 <Toast />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
@@ -115,8 +113,7 @@ export default {
     },
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index bbbfc876b..32d69cf26 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -30,8 +30,7 @@ export default {
         return {
             items: [{ separator: true }, { label: 'Profile', icon: 'pi pi-fw pi-user' }, { label: 'Settings', icon: 'pi pi-fw pi-cog' }, { separator: true }],
             code: {
-                basic: `
-<Menu :model="items">
+                basic: `<Menu :model="items">
     <template #start>
         <button @click="profileClick" class="w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
@@ -48,8 +47,7 @@ export default {
         </button>
     </template>
 </Menu>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Menu :model="items">
             <template #start>
@@ -91,8 +89,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Menu :model="items">
             <template #start>
diff --git a/doc/menu/pt/PTDoc.vue b/doc/menu/pt/PTDoc.vue
index c48cc01cc..228b39fdc 100644
--- a/doc/menu/pt/PTDoc.vue
+++ b/doc/menu/pt/PTDoc.vue
@@ -55,8 +55,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Menu
+                basic: `<Menu
     :model="items"
     :pt="{
         submenuHeader: { class: 'text-surface-900' },
@@ -65,8 +64,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Menu
             :model="items"
@@ -125,8 +123,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Menu
             :model="items"
diff --git a/doc/menu/theming/TailwindDoc.vue b/doc/menu/theming/TailwindDoc.vue
index fcfa00357..c8afecffa 100644
--- a/doc/menu/theming/TailwindDoc.vue
+++ b/doc/menu/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -53,8 +53,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
diff --git a/doc/menubar/BasicDoc.vue b/doc/menubar/BasicDoc.vue
index db5f53238..542cae3c1 100644
--- a/doc/menubar/BasicDoc.vue
+++ b/doc/menubar/BasicDoc.vue
@@ -136,10 +136,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Menubar :model="items" />`,
-                options: `
-<template>
+                basic: `<Menubar :model="items" />`,
+                options: `<template>
     <div class="card relative z-2">
         <Menubar :model="items" />
     </div>
@@ -276,8 +274,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card relative z-2">
         <Menubar :model="items" />
     </div>
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 99a6fdf9e..c13678eaf 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -143,8 +143,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Menubar :model="items">
+                basic: `<Menubar :model="items">
     <template #start>
         <img alt="logo" src="/images/logo.svg" height="40" class="mr-2" />
     </template>
@@ -152,8 +151,7 @@ export default {
         <InputText placeholder="Search" type="text" />
     </template>
 </Menubar>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card relative z-2">
         <Menubar :model="items">
             <template #start>
@@ -297,8 +295,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card relative z-2">
         <Menubar :model="items">
             <template #start>
diff --git a/doc/menubar/pt/PTDoc.vue b/doc/menubar/pt/PTDoc.vue
index a33dd03bd..1e3066fe9 100644
--- a/doc/menubar/pt/PTDoc.vue
+++ b/doc/menubar/pt/PTDoc.vue
@@ -141,8 +141,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Menubar
+                basic: `<Menubar
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -150,8 +149,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card relative z-2">
         <Menubar
             :model="items"
@@ -295,8 +293,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card relative z-2">
         <Menubar
             :model="items"
diff --git a/doc/menubar/theming/TailwindDoc.vue b/doc/menubar/theming/TailwindDoc.vue
index c9ba00ffd..131f351f8 100644
--- a/doc/menubar/theming/TailwindDoc.vue
+++ b/doc/menubar/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -98,8 +98,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card relative z-2">
         <Menubar :model="items" />
     </div>
diff --git a/doc/message/AccessibilityDoc.vue b/doc/message/AccessibilityDoc.vue
index 74c7bfdf6..963152f0a 100644
--- a/doc/message/AccessibilityDoc.vue
+++ b/doc/message/AccessibilityDoc.vue
@@ -44,16 +44,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
+                basic: `<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
 
 `
             },
             code2: {
-                basic: `
-<script setup>
+                basic: `<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/message/BasicDoc.vue b/doc/message/BasicDoc.vue
index 6ab2f0fa5..20b189cea 100644
--- a/doc/message/BasicDoc.vue
+++ b/doc/message/BasicDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Message>Message Content</Message>`,
-                options: `
-<template>
+                basic: `<Message>Message Content</Message>`,
+                options: `<template>
     <div class="card">
         <Message>Message Content</Message>
     </div>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message>Message Content</Message>
     </div>
diff --git a/doc/message/ClosableDoc.vue b/doc/message/ClosableDoc.vue
index cbb655e3e..a70137ca2 100644
--- a/doc/message/ClosableDoc.vue
+++ b/doc/message/ClosableDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Message :closable="false">Message Content</Message>`,
-                options: `
-<template>
+                basic: `<Message :closable="false">Message Content</Message>`,
+                options: `<template>
     <div class="card">
         <Message :closable="false">Message Content</Message>
     </div>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message :closable="false">Message Content</Message>
     </div>
diff --git a/doc/message/CustomIconDoc.vue b/doc/message/CustomIconDoc.vue
index 61089ec1c..036cba8cf 100644
--- a/doc/message/CustomIconDoc.vue
+++ b/doc/message/CustomIconDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Message severity="info" icon="pi pi-send">Info Message Content</Message>`,
-                options: `
-<template>
+                basic: `<Message severity="info" icon="pi pi-send">Info Message Content</Message>`,
+                options: `<template>
     <div class="card">
         <Message severity="info" icon="pi pi-send">Info Message Content</Message>
     </div>
@@ -24,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message severity="info" icon="pi pi-send">Info Message Content</Message>
     </div>
diff --git a/doc/message/DynamicDoc.vue b/doc/message/DynamicDoc.vue
index 72d5ed3ee..8cdefdf58 100644
--- a/doc/message/DynamicDoc.vue
+++ b/doc/message/DynamicDoc.vue
@@ -19,14 +19,12 @@ export default {
             messages: [],
             count: 0,
             code: {
-                basic: `
-<Button label="Show" @click="addMessages()" />
+                basic: `<Button label="Show" @click="addMessages()" />
 <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
 <transition-group name="p-message" tag="div">
     <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
 </transition-group>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Button label="Show" @click="addMessages()" />
         <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
@@ -59,8 +57,7 @@ export default {
 };
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Button label="Show" @click="addMessages()" />
         <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
diff --git a/doc/message/SeverityDoc.vue b/doc/message/SeverityDoc.vue
index 891b41e0e..d59098dd0 100644
--- a/doc/message/SeverityDoc.vue
+++ b/doc/message/SeverityDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Message severity="success">Success Message Content</Message>
+                basic: `<Message severity="success">Success Message Content</Message>
 <Message severity="info">Info Message Content</Message>
 <Message severity="warn">Warning Message Content</Message>
 <Message severity="error">Error Message Content</Message>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
@@ -33,8 +31,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
diff --git a/doc/message/StickyDoc.vue b/doc/message/StickyDoc.vue
index bbc789187..c61151e3a 100644
--- a/doc/message/StickyDoc.vue
+++ b/doc/message/StickyDoc.vue
@@ -19,13 +19,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Message severity="success" sticky>Success Message Content</Message>
+                basic: `<Message severity="success" sticky>Success Message Content</Message>
 <Message severity="info" sticky>Info Message Content</Message>
 <Message severity="warn" sticky>Warning Message Content</Message>
 <Message severity="error" sticky>Error Message Content</Message>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Message severity="success" sticky>Success Message Content</Message>
         <Message severity="info" sticky>Info Message Content</Message>
@@ -36,8 +34,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message severity="success" sticky>Success Message Content</Message>
         <Message severity="info" sticky>Info Message Content</Message>
diff --git a/doc/message/TemplateDoc.vue b/doc/message/TemplateDoc.vue
index dafbd96f2..ebf9c64b0 100644
--- a/doc/message/TemplateDoc.vue
+++ b/doc/message/TemplateDoc.vue
@@ -26,8 +26,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Message
+                basic: `<Message
     :style="{
         border: 'solid #696cff',
         borderWidth: '0 0 0 6px',
@@ -41,8 +40,7 @@ export default {
         <div class="ml-2">Always bet on Prime.</div>
     </div>
 </Message>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Message
             :style="{
@@ -63,8 +61,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message
             :style="{
diff --git a/doc/message/pt/PTDoc.vue b/doc/message/pt/PTDoc.vue
index 5ed425b3b..3adddc6db 100644
--- a/doc/message/pt/PTDoc.vue
+++ b/doc/message/pt/PTDoc.vue
@@ -17,16 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Message
+                basic: `<Message
     :pt="{
         root: { class: 'bg-yellow-100' }
     }"
 >
     Message Content
 </Message>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Message
             :pt="{
@@ -40,8 +38,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message
             :pt="{
diff --git a/doc/message/theming/TailwindDoc.vue b/doc/message/theming/TailwindDoc.vue
index 8f49a1fa8..300487652 100644
--- a/doc/message/theming/TailwindDoc.vue
+++ b/doc/message/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -49,8 +49,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
diff --git a/doc/multiselect/AccessibilityDoc.vue b/doc/multiselect/AccessibilityDoc.vue
index 9f3f5b1ed..5f4e14b36 100644
--- a/doc/multiselect/AccessibilityDoc.vue
+++ b/doc/multiselect/AccessibilityDoc.vue
@@ -251,8 +251,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="dd1"></span>Options</span>
+                basic: `<span id="dd1"></span>Options</span>
 <MultiSelect aria-labelledby="dd1" />
 
 <MultiSelect aria-label="Options" />`
diff --git a/doc/multiselect/BasicDoc.vue b/doc/multiselect/BasicDoc.vue
index ecc249ffa..b0d621ad9 100644
--- a/doc/multiselect/BasicDoc.vue
+++ b/doc/multiselect/BasicDoc.vue
@@ -25,11 +25,9 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+                basic: `<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"  
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/ChipsDoc.vue b/doc/multiselect/ChipsDoc.vue
index ad7d3d0d1..5d024cb36 100644
--- a/doc/multiselect/ChipsDoc.vue
+++ b/doc/multiselect/ChipsDoc.vue
@@ -21,11 +21,9 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
+                basic: `<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -48,8 +46,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/DisabledDoc.vue b/doc/multiselect/DisabledDoc.vue
index 9a6c5a57c..4c9d0ae12 100644
--- a/doc/multiselect/DisabledDoc.vue
+++ b/doc/multiselect/DisabledDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />`,
-                options: `
-<template>
+                basic: `<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />`,
+                options: `<template>
     <div class="flex justify-content-center">
         <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
     </div>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="flex justify-content-center">
         <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
     </div>
diff --git a/doc/multiselect/FilterDoc.vue b/doc/multiselect/FilterDoc.vue
index 5ca86a121..49c34eb7e 100644
--- a/doc/multiselect/FilterDoc.vue
+++ b/doc/multiselect/FilterDoc.vue
@@ -24,11 +24,9 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
+                basic: `<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"  
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -51,8 +49,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index 375249643..c39785f94 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -24,13 +24,11 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
     <label for="ms-cities">MultiSelect</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -55,8 +53,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/GroupDoc.vue b/doc/multiselect/GroupDoc.vue
index b72a854c6..1eb814b29 100644
--- a/doc/multiselect/GroupDoc.vue
+++ b/doc/multiselect/GroupDoc.vue
@@ -56,8 +56,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+                basic: `<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -65,8 +64,7 @@ export default {
         </div>
     </template>
 </MultiSelect>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
             <template #optiongroup="slotProps">
@@ -120,8 +118,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
             <template #optiongroup="slotProps">
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index 6b5fbd0d9..75371d78b 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/InvalidDoc.vue
@@ -21,11 +21,9 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+                basic: `<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"  
             :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
@@ -48,8 +46,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
diff --git a/doc/multiselect/LoadingStateDoc.vue b/doc/multiselect/LoadingStateDoc.vue
index 6ced2e5ff..88dc6c58b 100644
--- a/doc/multiselect/LoadingStateDoc.vue
+++ b/doc/multiselect/LoadingStateDoc.vue
@@ -14,8 +14,7 @@ export default {
         return {
             code: {
                 basic: `<MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
     </div>
@@ -23,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
     </div>
diff --git a/doc/multiselect/TemplateDoc.vue b/doc/multiselect/TemplateDoc.vue
index 836d59b64..3e7451d70 100644
--- a/doc/multiselect/TemplateDoc.vue
+++ b/doc/multiselect/TemplateDoc.vue
@@ -41,8 +41,7 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `
-<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+                basic: `<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
     <template #option="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -55,8 +54,7 @@ export default {
         </div>
     </template>
 </MultiSelect>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
             <template #option="slotProps">
@@ -95,8 +93,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
             <template #option="slotProps">
diff --git a/doc/multiselect/VirtualScrollDoc.vue b/doc/multiselect/VirtualScrollDoc.vue
index c3c5c68d9..93d25ebe0 100644
--- a/doc/multiselect/VirtualScrollDoc.vue
+++ b/doc/multiselect/VirtualScrollDoc.vue
@@ -31,11 +31,9 @@ export default {
             selectAll: false,
             items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
             code: {
-                basic: `
-<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
+                basic: `<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
     @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
             @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />
@@ -62,8 +60,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
             @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/form/VeeValidateDoc.vue b/doc/multiselect/form/VeeValidateDoc.vue
index 49235c17f..10afb2504 100644
--- a/doc/multiselect/form/VeeValidateDoc.vue
+++ b/doc/multiselect/form/VeeValidateDoc.vue
@@ -55,8 +55,7 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
@@ -66,8 +65,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
@@ -124,8 +122,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
diff --git a/doc/multiselect/pt/PTDoc.vue b/doc/multiselect/pt/PTDoc.vue
index 712e822e3..71405ba55 100644
--- a/doc/multiselect/pt/PTDoc.vue
+++ b/doc/multiselect/pt/PTDoc.vue
@@ -31,8 +31,7 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `
-<MultiSelect
+                basic: `<MultiSelect
     v-model="selectedCities"
     :options="cities"
     optionLabel="name"
@@ -45,8 +44,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect
             v-model="selectedCities"
@@ -80,8 +78,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <MultiSelect
             v-model="selectedCities"
diff --git a/doc/multiselect/theming/TailwindDoc.vue b/doc/multiselect/theming/TailwindDoc.vue
index a4a6bf842..07ec029ba 100644
--- a/doc/multiselect/theming/TailwindDoc.vue
+++ b/doc/multiselect/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -139,8 +139,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/orderlist/AccessibilityDoc.vue b/doc/orderlist/AccessibilityDoc.vue
index 814dd84e4..336ead0b2 100644
--- a/doc/orderlist/AccessibilityDoc.vue
+++ b/doc/orderlist/AccessibilityDoc.vue
@@ -125,8 +125,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="lb">Options</span>
+                basic: `<span id="lb">Options</span>
 <OrderList aria-labelledby="lb" />
 
 <OrderList aria-label="City" />`
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index fdc77fba3..c66a3a0a0 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -30,8 +30,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<OrderList v-model="products" listStyle="height:auto" dataKey="id">
+                basic: `<OrderList v-model="products" listStyle="height:auto" dataKey="id">
     <template #header> List of Products </template>
     <template #item="slotProps">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
@@ -47,8 +46,7 @@ export default {
         </div>
     </template>
 </OrderList>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList v-model="products" listStyle="height:auto" dataKey="id">
             <template #header> List of Products </template>
@@ -82,8 +80,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList v-model="products" listStyle="height:auto" dataKey="id">
             <template #header> List of Products </template>
diff --git a/doc/orderlist/pt/PTDoc.vue b/doc/orderlist/pt/PTDoc.vue
index 4ff31e60a..7469cb0e1 100644
--- a/doc/orderlist/pt/PTDoc.vue
+++ b/doc/orderlist/pt/PTDoc.vue
@@ -38,8 +38,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<OrderList
+                basic: `<OrderList
     v-model="products"
     dataKey="id"
     :pt="{
@@ -64,8 +63,7 @@ export default {
         </div>
     </template>
 </OrderList>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList
             v-model="products"
@@ -108,8 +106,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList
             v-model="products"
diff --git a/doc/orderlist/theming/TailwindDoc.vue b/doc/orderlist/theming/TailwindDoc.vue
index 60558ee03..ccde6d281 100644
--- a/doc/orderlist/theming/TailwindDoc.vue
+++ b/doc/orderlist/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['ProductService']" embedded />
     </DocSectionText>
 </template>
@@ -115,8 +115,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card xl:flex xl:justify-center">
         <OrderList v-model="products" listStyle="height:auto" dataKey="id">
             <template #header> List of Products </template>
diff --git a/doc/organizationchart/BasicDoc.vue b/doc/organizationchart/BasicDoc.vue
index 3978c2d87..1c1c77976 100644
--- a/doc/organizationchart/BasicDoc.vue
+++ b/doc/organizationchart/BasicDoc.vue
@@ -44,14 +44,12 @@ export default {
                 ]
             },
             code: {
-                basic: `
-<OrganizationChart :value="data">
+                basic: `<OrganizationChart :value="data">
     <template #default="slotProps">
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data">
             <template #default="slotProps">
@@ -96,8 +94,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data">
             <template #default="slotProps">
diff --git a/doc/organizationchart/ColoredDoc.vue b/doc/organizationchart/ColoredDoc.vue
index 4149e613c..bafb54362 100644
--- a/doc/organizationchart/ColoredDoc.vue
+++ b/doc/organizationchart/ColoredDoc.vue
@@ -78,8 +78,7 @@ export default {
                 ]
             },
             code: {
-                basic: `
-<OrganizationChart :value="data" collapsible>
+                basic: `<OrganizationChart :value="data" collapsible>
     <template #person="slotProps">
         <div class="flex flex-column">
             <div class="flex flex-column align-items-center">
@@ -93,8 +92,7 @@ export default {
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #person="slotProps">
@@ -173,8 +171,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #person="slotProps">
diff --git a/doc/organizationchart/SelectionDoc.vue b/doc/organizationchart/SelectionDoc.vue
index 2bba87b5b..b71cbcb36 100644
--- a/doc/organizationchart/SelectionDoc.vue
+++ b/doc/organizationchart/SelectionDoc.vue
@@ -79,8 +79,7 @@ export default {
             },
             selection: {},
             code: {
-                basic: `
-<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
+                basic: `<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
     <template #person="slotProps">
         <div class="flex flex-column">
             <div class="flex flex-column align-items-center">
@@ -94,8 +93,7 @@ export default {
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `
-<template>
+                options: `<template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
         <template #person="slotProps">
             <div class="flex flex-column">
@@ -170,8 +168,7 @@ export default {
     },
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
         <template #person="slotProps">
             <div class="flex flex-column">
diff --git a/doc/organizationchart/TemplateDoc.vue b/doc/organizationchart/TemplateDoc.vue
index c98248a79..f2b4ca6c5 100644
--- a/doc/organizationchart/TemplateDoc.vue
+++ b/doc/organizationchart/TemplateDoc.vue
@@ -71,8 +71,7 @@ export default {
                 ]
             },
             code: {
-                basic: `
-<OrganizationChart :value="data" collapsible>
+                basic: `<OrganizationChart :value="data" collapsible>
     <template #country="slotProps">
         <div class="flex flex-column align-items-center">
             <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" />
@@ -83,8 +82,7 @@ export default {
         <span>{{slotProps.node.data.label}}</span>
     </template>
 </OrganizationChart>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
@@ -156,8 +154,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
diff --git a/doc/organizationchart/pt/PTDoc.vue b/doc/organizationchart/pt/PTDoc.vue
index 4e3a27e71..509fac93f 100644
--- a/doc/organizationchart/pt/PTDoc.vue
+++ b/doc/organizationchart/pt/PTDoc.vue
@@ -50,8 +50,7 @@ export default {
                 ]
             },
             code: {
-                basic: `
-<OrganizationChart
+                basic: `<OrganizationChart
     :value="data"
     collapsible
     :pt="{
@@ -64,8 +63,7 @@ export default {
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart
             :value="data"
@@ -118,8 +116,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart
             :value="data"
diff --git a/doc/organizationchart/theming/TailwindDoc.vue b/doc/organizationchart/theming/TailwindDoc.vue
index 27856b699..6720b6cb8 100644
--- a/doc/organizationchart/theming/TailwindDoc.vue
+++ b/doc/organizationchart/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -64,8 +64,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
diff --git a/doc/overlaypanel/BasicDoc.vue b/doc/overlaypanel/BasicDoc.vue
index add1c5171..af0aa9411 100644
--- a/doc/overlaypanel/BasicDoc.vue
+++ b/doc/overlaypanel/BasicDoc.vue
@@ -17,14 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+                basic: `<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
 <OverlayPanel ref="op">
     <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
 </OverlayPanel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
@@ -43,8 +41,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
diff --git a/doc/overlaypanel/DataTableDoc.vue b/doc/overlaypanel/DataTableDoc.vue
index 6bdff550c..2d0631113 100644
--- a/doc/overlaypanel/DataTableDoc.vue
+++ b/doc/overlaypanel/DataTableDoc.vue
@@ -44,8 +44,7 @@ export default {
             products: null,
             selectedProduct: null,
             code: {
-                basic: `
-<Toast />
+                basic: `<Toast />
 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
 <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
@@ -74,8 +73,7 @@ export default {
         </Column>
     </DataTable>
 </OverlayPanel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
@@ -135,8 +133,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
diff --git a/doc/overlaypanel/pt/PTDoc.vue b/doc/overlaypanel/pt/PTDoc.vue
index e4d49b42d..27088e43b 100644
--- a/doc/overlaypanel/pt/PTDoc.vue
+++ b/doc/overlaypanel/pt/PTDoc.vue
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+                basic: `<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
 <OverlayPanel ref="op"
     :pt="{
@@ -25,8 +24,7 @@ export default {
 >
     <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
 </OverlayPanel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
@@ -49,8 +47,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
diff --git a/doc/overlaypanel/theming/TailwindDoc.vue b/doc/overlaypanel/theming/TailwindDoc.vue
index 0813cb46e..1e7b28906 100644
--- a/doc/overlaypanel/theming/TailwindDoc.vue
+++ b/doc/overlaypanel/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -42,8 +42,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
diff --git a/doc/paginator/BasicDoc.vue b/doc/paginator/BasicDoc.vue
index 4770e30ac..0a3f99906 100644
--- a/doc/paginator/BasicDoc.vue
+++ b/doc/paginator/BasicDoc.vue
@@ -16,10 +16,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>`,
-                options: `
-<template>
+                basic: `<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>`,
+                options: `<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
     </div>
@@ -27,8 +25,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
     </div>
diff --git a/doc/paginator/CurrentPageReportDoc.vue b/doc/paginator/CurrentPageReportDoc.vue
index d620bd0af..c9d6cdfd8 100644
--- a/doc/paginator/CurrentPageReportDoc.vue
+++ b/doc/paginator/CurrentPageReportDoc.vue
@@ -22,11 +22,9 @@ export default {
         return {
             first: 0,
             code: {
-                basic: `
-<Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                basic: `<Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
@@ -42,8 +40,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
diff --git a/doc/paginator/CustomContentDoc.vue b/doc/paginator/CustomContentDoc.vue
index f68c5c7b1..6bb51121a 100644
--- a/doc/paginator/CustomContentDoc.vue
+++ b/doc/paginator/CustomContentDoc.vue
@@ -18,8 +18,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
+                basic: `<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
     <template #start="slotProps">
         Page: {{ slotProps.state.page }}
         First: {{ slotProps.state.first }}
@@ -29,8 +28,7 @@ export default {
         <Button type="button" icon="pi pi-search" />
     </template>
 </Paginator>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
             <template #start="slotProps">
@@ -47,8 +45,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
             <template #start="slotProps">
diff --git a/doc/paginator/ResponsiveDoc.vue b/doc/paginator/ResponsiveDoc.vue
index 32d0a5798..a89c2deb0 100644
--- a/doc/paginator/ResponsiveDoc.vue
+++ b/doc/paginator/ResponsiveDoc.vue
@@ -25,8 +25,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Paginator
+                basic: `<Paginator
     :template="{
         '640px': 'PrevPageLink CurrentPageReport NextPageLink',
         '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
@@ -36,8 +35,7 @@ export default {
     :rows="10"
     :totalRecords="120">
 </Paginator>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Paginator
             :template="{
@@ -54,8 +52,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Paginator
             :template="{
diff --git a/doc/paginator/TemplateDoc.vue b/doc/paginator/TemplateDoc.vue
index db0fb1266..397a822c0 100644
--- a/doc/paginator/TemplateDoc.vue
+++ b/doc/paginator/TemplateDoc.vue
@@ -32,14 +32,12 @@ export default {
         return {
             first: 0,
             code: {
-                basic: `
-<Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+                basic: `<Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
 <div class="p-3 text-center">
     <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
@@ -58,8 +56,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
diff --git a/doc/paginator/pt/PTDoc.vue b/doc/paginator/pt/PTDoc.vue
index 21ccee9d9..6e602952e 100644
--- a/doc/paginator/pt/PTDoc.vue
+++ b/doc/paginator/pt/PTDoc.vue
@@ -19,8 +19,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Paginator
+                basic: `<Paginator
     :rows="10"
     :totalRecords="120"
     :pt="{
@@ -29,8 +28,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Paginator
             :rows="10"
@@ -46,8 +44,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Paginator
             :rows="10"
diff --git a/doc/paginator/theming/TailwindDoc.vue b/doc/paginator/theming/TailwindDoc.vue
index 84370e393..6d8e2adfe 100644
--- a/doc/paginator/theming/TailwindDoc.vue
+++ b/doc/paginator/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -198,8 +198,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
     </div>
diff --git a/doc/panel/BasicDoc.vue b/doc/panel/BasicDoc.vue
index f10b8cdb4..bf6688e29 100644
--- a/doc/panel/BasicDoc.vue
+++ b/doc/panel/BasicDoc.vue
@@ -18,15 +18,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Panel header="Header">
+                basic: `<Panel header="Header">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Panel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Panel header="Header">
             <p class="m-0">
@@ -39,8 +37,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Panel header="Header">
             <p class="m-0">
diff --git a/doc/panel/TemplateDoc.vue b/doc/panel/TemplateDoc.vue
index b5e50d7b5..d0a8fbef5 100644
--- a/doc/panel/TemplateDoc.vue
+++ b/doc/panel/TemplateDoc.vue
@@ -60,8 +60,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Panel header="Header" toggleable>
+                basic: `<Panel header="Header" toggleable>
     <template #icons>
         <button class="p-panel-header-icon p-link mr-2" @click="toggle">
             <span class="pi pi-cog"></span>
@@ -73,8 +72,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Panel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Toast />
         <Panel header="Header" toggleable>
@@ -144,8 +142,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toast />
         <Panel header="Header" toggleable>
diff --git a/doc/panel/ToggleableDoc.vue b/doc/panel/ToggleableDoc.vue
index 401689cb8..45253e9c4 100644
--- a/doc/panel/ToggleableDoc.vue
+++ b/doc/panel/ToggleableDoc.vue
@@ -18,15 +18,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Panel header="Header" toggleable>
+                basic: `<Panel header="Header" toggleable>
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Panel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Panel header="Header" toggleable>
             <p class="m-0">
@@ -39,8 +37,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Panel header="Header" toggleable>
             <p class="m-0">
diff --git a/doc/panel/pt/PTDoc.vue b/doc/panel/pt/PTDoc.vue
index 979ddc432..936e34f21 100644
--- a/doc/panel/pt/PTDoc.vue
+++ b/doc/panel/pt/PTDoc.vue
@@ -16,8 +16,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Panel header="Header" toggleable
+                basic: `<Panel header="Header" toggleable
     :pt="{
         header: { class: 'bg-primary' },
         title: { class: 'text-white' },
@@ -28,8 +27,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Panel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
@@ -47,8 +45,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
diff --git a/doc/panel/theming/TailwindDoc.vue b/doc/panel/theming/TailwindDoc.vue
index 8539f6a39..0a70d337c 100644
--- a/doc/panel/theming/TailwindDoc.vue
+++ b/doc/panel/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -59,8 +59,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Panel header="Header">
             <p class="m-0">
diff --git a/doc/panelmenu/BasicDoc.vue b/doc/panelmenu/BasicDoc.vue
index 52d09deab..353c02d01 100644
--- a/doc/panelmenu/BasicDoc.vue
+++ b/doc/panelmenu/BasicDoc.vue
@@ -129,10 +129,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<PanelMenu :model="items" />`,
-                options: `
-<template>
+                basic: `<PanelMenu :model="items" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <PanelMenu :model="items" class="w-full md:w-25rem" />
     </div>
@@ -262,8 +260,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <PanelMenu :model="items" class="w-full md:w-25rem" />
     </div>
diff --git a/doc/panelmenu/MultipleDoc.vue b/doc/panelmenu/MultipleDoc.vue
index 4c6e27ecc..c347be55d 100644
--- a/doc/panelmenu/MultipleDoc.vue
+++ b/doc/panelmenu/MultipleDoc.vue
@@ -154,10 +154,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
-                options: `
-<template>
+                basic: `<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
+                options: `<template>
     <div class="card flex flex-column align-items-center">
         <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem" />
     </div>
@@ -312,8 +310,7 @@ export default {
   },
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center">
         <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem"  />
     </div>
diff --git a/doc/panelmenu/ProgrammaticDoc.vue b/doc/panelmenu/ProgrammaticDoc.vue
index b5f8737d2..0b87e00aa 100644
--- a/doc/panelmenu/ProgrammaticDoc.vue
+++ b/doc/panelmenu/ProgrammaticDoc.vue
@@ -161,10 +161,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
-                options: `
-<template>
+                basic: `<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
+                options: `<template>
     <div class="card flex flex-column align-items-center">
         <div class="mb-3">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
@@ -346,8 +344,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center">
         <div class="mb-3">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
diff --git a/doc/panelmenu/pt/PTDoc.vue b/doc/panelmenu/pt/PTDoc.vue
index b04582853..f15fd3ee2 100644
--- a/doc/panelmenu/pt/PTDoc.vue
+++ b/doc/panelmenu/pt/PTDoc.vue
@@ -132,15 +132,13 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<PanelMenu
+                basic: `<PanelMenu
     :model="items"
     :pt="{
         root: { class: 'w-full md:w-25rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <PanelMenu
             :model="items"
@@ -275,8 +273,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <PanelMenu
             :model="items"
diff --git a/doc/panelmenu/theming/TailwindDoc.vue b/doc/panelmenu/theming/TailwindDoc.vue
index 94e66f9db..c82cbcfad 100644
--- a/doc/panelmenu/theming/TailwindDoc.vue
+++ b/doc/panelmenu/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -72,8 +72,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <PanelMenu :model="items" class="w-full md:w-96" />
     </div>
diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index d927ef3f2..1c5d8ccbb 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -48,8 +48,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Panel header="Header" toggleable
+                basic: `<Panel header="Header" toggleable
     :pt="{
         header: (options) => ({
             id: 'myPanelHeader',
@@ -73,8 +72,7 @@ export default {
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
 </Panel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
@@ -105,8 +103,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
diff --git a/doc/passthrough/LifecycleDoc.vue b/doc/passthrough/LifecycleDoc.vue
index 58acd467f..723f517f5 100644
--- a/doc/passthrough/LifecycleDoc.vue
+++ b/doc/passthrough/LifecycleDoc.vue
@@ -14,12 +14,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Panel header="Header" :pt="panelPT">
+                basic: `<Panel header="Header" :pt="panelPT">
     Content
 </Panel>`,
-                options: `
-<template>
+                options: `<template>
     <Panel header="Header" :pt="panelPT">
         Content
     </Panel>
@@ -43,8 +41,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <Panel header="Header" :pt="panelPT">
         Content
     </Panel>
diff --git a/doc/password/AccessibilityDoc.vue b/doc/password/AccessibilityDoc.vue
index 473beb1a4..df3155eb6 100644
--- a/doc/password/AccessibilityDoc.vue
+++ b/doc/password/AccessibilityDoc.vue
@@ -36,8 +36,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="pwd1">Password</label>
+                basic: `<label for="pwd1">Password</label>
 <Password inputId="pwd1" />
 
 <span id="pwd2">Password</span>
diff --git a/doc/password/BasicDoc.vue b/doc/password/BasicDoc.vue
index fd210fb9c..940f7265d 100644
--- a/doc/password/BasicDoc.vue
+++ b/doc/password/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password v-model="value" :feedback="false" />`,
-                options: `
-<template>
+                basic: `<Password v-model="value" :feedback="false" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" :feedback="false" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" :feedback="false" />
     </div>
diff --git a/doc/password/DisabledDoc.vue b/doc/password/DisabledDoc.vue
index c45709d4e..223466d10 100644
--- a/doc/password/DisabledDoc.vue
+++ b/doc/password/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password disabled placeholder="Disabled" />`,
-                options: `
-<template>
+                basic: `<Password disabled placeholder="Disabled" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Password disabled placeholder="Disabled" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Password disabled placeholder="Disabled" />
     </div>
diff --git a/doc/password/FloatLabelDoc.vue b/doc/password/FloatLabelDoc.vue
index 1da2da3cb..ae4798184 100644
--- a/doc/password/FloatLabelDoc.vue
+++ b/doc/password/FloatLabelDoc.vue
@@ -17,13 +17,11 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <Password v-model="value" inputId="password" />
     <label for="password">Password</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Password v-model="value" inputId="password" />
@@ -41,8 +39,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Password v-model="value" inputId="password" />
diff --git a/doc/password/InvalidDoc.vue b/doc/password/InvalidDoc.vue
index aabf7a937..c8de27307 100644
--- a/doc/password/InvalidDoc.vue
+++ b/doc/password/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<Password class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Password class="p-invalid" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Password class="p-invalid" />
     </div>
diff --git a/doc/password/LocaleDoc.vue b/doc/password/LocaleDoc.vue
index ab210f0a3..e49af8ec5 100644
--- a/doc/password/LocaleDoc.vue
+++ b/doc/password/LocaleDoc.vue
@@ -17,10 +17,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />`,
-                options: `
-<template>
+                basic: `<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />`,
+                options: `<template>
   <div class="card flex justify-content-center">
       <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
   </div>
@@ -35,8 +33,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
   <div class="card flex justify-content-center">
       <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
   </div>
diff --git a/doc/password/MeterDoc.vue b/doc/password/MeterDoc.vue
index 7e949be19..af1abd4b5 100644
--- a/doc/password/MeterDoc.vue
+++ b/doc/password/MeterDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password v-model="value" />`,
-                options: `
-<template>
+                basic: `<Password v-model="value" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" />
     </div>
diff --git a/doc/password/TemplateDoc.vue b/doc/password/TemplateDoc.vue
index f60293d68..8b7def0f4 100644
--- a/doc/password/TemplateDoc.vue
+++ b/doc/password/TemplateDoc.vue
@@ -28,8 +28,7 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password v-model="value">
+                basic: `<Password v-model="value">
     <template #header>
         <h6>Pick a password</h6>
     </template>
@@ -44,8 +43,7 @@ export default {
         </ul>
     </template>
 </Password>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value">
             <template #header>
@@ -74,8 +72,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value">
             <template #header>
diff --git a/doc/password/ToggleMaskDoc.vue b/doc/password/ToggleMaskDoc.vue
index aa20b4e16..1aea96587 100644
--- a/doc/password/ToggleMaskDoc.vue
+++ b/doc/password/ToggleMaskDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password v-model="value" toggleMask />`,
-                options: `
-<template>
+                basic: `<Password v-model="value" toggleMask />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" toggleMask />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" toggleMask />
     </div>
diff --git a/doc/password/form/VeeValidateDoc.vue b/doc/password/form/VeeValidateDoc.vue
index 1997e4d40..547bed75b 100644
--- a/doc/password/form/VeeValidateDoc.vue
+++ b/doc/password/form/VeeValidateDoc.vue
@@ -43,8 +43,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<template>
+                basic: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="value">Password</label>
@@ -55,8 +54,7 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="value">Password</label>
@@ -97,8 +95,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="value">Password</label>
diff --git a/doc/password/pt/PTDoc.vue b/doc/password/pt/PTDoc.vue
index 4dd3f00db..6bf9ed9a3 100644
--- a/doc/password/pt/PTDoc.vue
+++ b/doc/password/pt/PTDoc.vue
@@ -17,15 +17,13 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Password
+                basic: `<Password
     v-model="value"
     :pt="{
         info: { class: 'font-bold' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Password
             v-model="value"
@@ -45,8 +43,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Password
             v-model="value"
diff --git a/doc/password/theming/TailwindDoc.vue b/doc/password/theming/TailwindDoc.vue
index ddd90529c..925aa4e8e 100644
--- a/doc/password/theming/TailwindDoc.vue
+++ b/doc/password/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -60,8 +60,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Password v-model="value" />
     </div>
diff --git a/doc/picklist/AccessibilityDoc.vue b/doc/picklist/AccessibilityDoc.vue
index 59bc9d2d4..d5c2d6b84 100644
--- a/doc/picklist/AccessibilityDoc.vue
+++ b/doc/picklist/AccessibilityDoc.vue
@@ -126,8 +126,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="lb">Options</span>
+                basic: `<span id="lb">Options</span>
 <PickList aria-labelledby="lb" />
 
 <PickList aria-label="City" />`
diff --git a/doc/picklist/BasicDoc.vue b/doc/picklist/BasicDoc.vue
index 99ef84e6e..d21397af1 100644
--- a/doc/picklist/BasicDoc.vue
+++ b/doc/picklist/BasicDoc.vue
@@ -32,8 +32,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<PickList v-model="products" listStyle="height:342px" dataKey="id">
+                basic: `<PickList v-model="products" listStyle="height:342px" dataKey="id">
     <template #sourceheader> Available </template>
     <template #targetheader> Selected </template>
     <template #item="slotProps">
@@ -50,8 +49,7 @@ export default {
         </div>
     </template>
 </PickList>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceheader> Available </template>
@@ -86,8 +84,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceheader> Available </template>
diff --git a/doc/picklist/pt/PTDoc.vue b/doc/picklist/pt/PTDoc.vue
index 03c5d74be..1ed986b6e 100644
--- a/doc/picklist/pt/PTDoc.vue
+++ b/doc/picklist/pt/PTDoc.vue
@@ -43,8 +43,7 @@ export default {
         return {
             products: null,
             code: {
-                basic: `
-<PickList
+                basic: `<PickList
     v-model="products"
     dataKey="id"
     :pt="{
@@ -74,8 +73,7 @@ export default {
         </div>
     </template>
 </PickList>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <PickList
             v-model="products"
@@ -123,8 +121,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <PickList
             v-model="products"
diff --git a/doc/picklist/theming/TailwindDoc.vue b/doc/picklist/theming/TailwindDoc.vue
index 2e05b07d4..ffe9fb420 100644
--- a/doc/picklist/theming/TailwindDoc.vue
+++ b/doc/picklist/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['ProductService']" embedded />
     </DocSectionText>
 </template>
@@ -265,8 +265,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceheader> Available </template>
diff --git a/doc/progressbar/AccessibilityDoc.vue b/doc/progressbar/AccessibilityDoc.vue
index f6b0fd5b0..75b96b40d 100644
--- a/doc/progressbar/AccessibilityDoc.vue
+++ b/doc/progressbar/AccessibilityDoc.vue
@@ -18,8 +18,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="label_status" />
+                basic: `<span id="label_status" />
 <ProgressBar aria-labelledby="label_status" />
 
 <ProgressBar aria-label="Status" />`
diff --git a/doc/progressbar/BasicDoc.vue b/doc/progressbar/BasicDoc.vue
index 0746096b2..2f2b15db6 100644
--- a/doc/progressbar/BasicDoc.vue
+++ b/doc/progressbar/BasicDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ProgressBar :value="50"></ProgressBar>`,
-                options: `
-<template>
+                basic: `<ProgressBar :value="50"></ProgressBar>`,
+                options: `<template>
     <div class="card">
         <ProgressBar :value="50"></ProgressBar>
     </div>
@@ -25,8 +23,7 @@ export default {
 <script >
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ProgressBar :value="50"></ProgressBar>
     </div>
diff --git a/doc/progressbar/DynamicDoc.vue b/doc/progressbar/DynamicDoc.vue
index 865d20557..36d69a64f 100644
--- a/doc/progressbar/DynamicDoc.vue
+++ b/doc/progressbar/DynamicDoc.vue
@@ -15,10 +15,8 @@ export default {
             value: 0,
             interval: null,
             code: {
-                basic: `
-<ProgressBar :value="value"></ProgressBar>`,
-                options: `
-<template>
+                basic: `<ProgressBar :value="value"></ProgressBar>`,
+                options: `<template>
     <div class="card">
         <Toast></Toast>
         <ProgressBar :value="value1" />
@@ -59,8 +57,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toast></Toast>
         <ProgressBar :value="value1" />
diff --git a/doc/progressbar/IndeterminateDoc.vue b/doc/progressbar/IndeterminateDoc.vue
index 1147217b9..78ebe49a7 100644
--- a/doc/progressbar/IndeterminateDoc.vue
+++ b/doc/progressbar/IndeterminateDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>`,
-                options: `
-<template>
+                basic: `<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>`,
+                options: `<template>
     <div class="card">
         <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
     </div>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
     </div>
diff --git a/doc/progressbar/TemplateDoc.vue b/doc/progressbar/TemplateDoc.vue
index da0d644b9..f63c8b6e7 100644
--- a/doc/progressbar/TemplateDoc.vue
+++ b/doc/progressbar/TemplateDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 40,
             code: {
-                basic: `
-<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>`,
-                options: `
-<template>
+                basic: `<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>`,
+                options: `<template>
     <div class="card">
         <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
     </div>
diff --git a/doc/progressbar/pt/PTDoc.vue b/doc/progressbar/pt/PTDoc.vue
index b4d5e7b0d..9883bf7c3 100644
--- a/doc/progressbar/pt/PTDoc.vue
+++ b/doc/progressbar/pt/PTDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ProgressBar :value="50"
+                basic: `<ProgressBar :value="50"
     :pt="{
         value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
     }" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <ProgressBar :value="50"
             :pt="{
@@ -33,8 +31,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ProgressBar :value="50"
             :pt="{
diff --git a/doc/progressbar/theming/TailwindDoc.vue b/doc/progressbar/theming/TailwindDoc.vue
index 4801728b0..94bfadb76 100644
--- a/doc/progressbar/theming/TailwindDoc.vue
+++ b/doc/progressbar/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -64,8 +64,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ProgressBar :value="50"></ProgressBar>
     </div>
diff --git a/doc/progressspinner/AccessibilityDoc.vue b/doc/progressspinner/AccessibilityDoc.vue
index 927259d77..c84944233 100644
--- a/doc/progressspinner/AccessibilityDoc.vue
+++ b/doc/progressspinner/AccessibilityDoc.vue
@@ -14,8 +14,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ProgressSpinner aria-label="Loading" />`
+                basic: `<ProgressSpinner aria-label="Loading" />`
             }
         };
     }
diff --git a/doc/progressspinner/BasicDoc.vue b/doc/progressspinner/BasicDoc.vue
index dd163b8a1..7b9b3e16a 100644
--- a/doc/progressspinner/BasicDoc.vue
+++ b/doc/progressspinner/BasicDoc.vue
@@ -14,8 +14,7 @@ export default {
         return {
             code: {
                 basic: `<ProgressSpinner />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner />
     </div>
@@ -23,8 +22,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner />
     </div>
diff --git a/doc/progressspinner/CustomDoc.vue b/doc/progressspinner/CustomDoc.vue
index f85fb66eb..e2d924b80 100644
--- a/doc/progressspinner/CustomDoc.vue
+++ b/doc/progressspinner/CustomDoc.vue
@@ -13,11 +13,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
+                basic: `<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
     animationDuration=".5s" aria-label="Custom ProgressSpinner" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
@@ -26,8 +24,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
diff --git a/doc/progressspinner/pt/PTDoc.vue b/doc/progressspinner/pt/PTDoc.vue
index f054fd712..cddc49fd0 100644
--- a/doc/progressspinner/pt/PTDoc.vue
+++ b/doc/progressspinner/pt/PTDoc.vue
@@ -16,15 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ProgressSpinner
+                basic: `<ProgressSpinner
     :pt="{
         spinner: { style: { animationDuration: '0s' } },
         circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner
             :pt="{
@@ -37,8 +35,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner
             :pt="{
diff --git a/doc/progressspinner/theming/TailwindDoc.vue b/doc/progressspinner/theming/TailwindDoc.vue
index 2206c7f4e..492072b22 100644
--- a/doc/progressspinner/theming/TailwindDoc.vue
+++ b/doc/progressspinner/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -68,8 +68,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner />
     </div>
diff --git a/doc/radiobutton/AccessibilityDoc.vue b/doc/radiobutton/AccessibilityDoc.vue
index 75fd377e6..377d8d736 100644
--- a/doc/radiobutton/AccessibilityDoc.vue
+++ b/doc/radiobutton/AccessibilityDoc.vue
@@ -54,8 +54,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="rb1">One</label>
+                basic: `<label for="rb1">One</label>
 <RadioButton inputId="rb1" />
 
 <span id="rb2">Two</span>
diff --git a/doc/radiobutton/DisabledDoc.vue b/doc/radiobutton/DisabledDoc.vue
index 5f94cc6c3..ab2a59c92 100644
--- a/doc/radiobutton/DisabledDoc.vue
+++ b/doc/radiobutton/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: true,
             code: {
-                basic: `
-<RadioButton v-model="checked" disabled :value="checked" />`,
-                options: `
-<template>
+                basic: `<RadioButton v-model="checked" disabled :value="checked" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <RadioButton v-model="checked" disabled :value="checked" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <RadioButton v-model="checked" disabled :value="checked" />
     </div>
diff --git a/doc/radiobutton/DynamicDoc.vue b/doc/radiobutton/DynamicDoc.vue
index c90482e61..2abdb12f7 100644
--- a/doc/radiobutton/DynamicDoc.vue
+++ b/doc/radiobutton/DynamicDoc.vue
@@ -25,14 +25,12 @@ export default {
             ],
             selectedCategory: 'Production',
             code: {
-                basic: `
-<div v-for="category in categories" :key="category.key" class="flex align-items-center">
+                basic: `<div v-for="category in categories" :key="category.key" class="flex align-items-center">
     <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
 `,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category in categories" :key="category.key" class="flex align-items-center">
@@ -58,8 +56,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category in categories" :key="category.key" class="flex align-items-center">
diff --git a/doc/radiobutton/GroupDoc.vue b/doc/radiobutton/GroupDoc.vue
index 2b564755b..3c817c961 100644
--- a/doc/radiobutton/GroupDoc.vue
+++ b/doc/radiobutton/GroupDoc.vue
@@ -31,8 +31,7 @@ export default {
         return {
             ingredient: '',
             code: {
-                basic: `
-<div class="flex flex-wrap gap-3">
+                basic: `<div class="flex flex-wrap gap-3">
     <div class="flex align-items-center">
         <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
         <label for="ingredient1" class="ml-2">Cheese</label>
@@ -50,8 +49,7 @@ export default {
         <label for="ingredient4" class="ml-2">Onion</label>
     </div>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3">
             <div class="flex align-items-center">
@@ -83,8 +81,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3">
             <div class="flex align-items-center">
diff --git a/doc/radiobutton/InvalidDoc.vue b/doc/radiobutton/InvalidDoc.vue
index b17a2194f..a5ef61f6a 100644
--- a/doc/radiobutton/InvalidDoc.vue
+++ b/doc/radiobutton/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<RadioButton class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<RadioButton class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <RadioButton class="p-invalid" />
     </div>
@@ -25,8 +23,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <RadioButton class="p-invalid" />
     </div>
diff --git a/doc/radiobutton/form/VeeValidateDoc.vue b/doc/radiobutton/form/VeeValidateDoc.vue
index 51ac5d7f4..d47069ed6 100644
--- a/doc/radiobutton/form/VeeValidateDoc.vue
+++ b/doc/radiobutton/form/VeeValidateDoc.vue
@@ -60,8 +60,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
         <div>Please choose your ingredient.</div>
         <div class="flex flex-wrap gap-3">
@@ -87,8 +86,7 @@ export default {
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>Please choose your ingredient.</div>
@@ -146,8 +144,7 @@ export default {
     },
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>Please choose your ingredient.</div>
diff --git a/doc/radiobutton/pt/PTDoc.vue b/doc/radiobutton/pt/PTDoc.vue
index 5be582f90..3b3581348 100644
--- a/doc/radiobutton/pt/PTDoc.vue
+++ b/doc/radiobutton/pt/PTDoc.vue
@@ -33,8 +33,7 @@ export default {
             ],
             selectedCategory: 'Production',
             code: {
-                basic: `
-<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
+                basic: `<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
     <RadioButton
         v-model="selectedCategory"
         :inputId="category.key"
@@ -49,8 +48,7 @@ export default {
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
 `,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
@@ -86,8 +84,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
diff --git a/doc/radiobutton/theming/TailwindDoc.vue b/doc/radiobutton/theming/TailwindDoc.vue
index ccc2d4c78..7027a3709 100644
--- a/doc/radiobutton/theming/TailwindDoc.vue
+++ b/doc/radiobutton/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -50,8 +50,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <div class="flex flex-wrap gap-3">
             <div class="flex align-items-center">
diff --git a/doc/rating/BasicDoc.vue b/doc/rating/BasicDoc.vue
index e867463bd..d6c8f34ff 100644
--- a/doc/rating/BasicDoc.vue
+++ b/doc/rating/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Rating v-model="value" />`,
-                options: `
-<template>
+                basic: `<Rating v-model="value" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" />
     </div>
diff --git a/doc/rating/DisabledDoc.vue b/doc/rating/DisabledDoc.vue
index 36aa18899..3ff267a4e 100644
--- a/doc/rating/DisabledDoc.vue
+++ b/doc/rating/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 5,
             code: {
-                basic: `
-<Rating v-model="value" disabled />`,
-                options: `
-<template>
+                basic: `<Rating v-model="value" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" disabled />
     </div>
diff --git a/doc/rating/NumberOfStarsDoc.vue b/doc/rating/NumberOfStarsDoc.vue
index 11987f358..ae465e08e 100644
--- a/doc/rating/NumberOfStarsDoc.vue
+++ b/doc/rating/NumberOfStarsDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Rating v-model="value" :stars="10" />`,
-                options: `
-<template>
+                basic: `<Rating v-model="value" :stars="10" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :stars="10" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :stars="10" />
     </div>
diff --git a/doc/rating/ReadOnlyDoc.vue b/doc/rating/ReadOnlyDoc.vue
index 1a441bb7f..fa3446fe5 100644
--- a/doc/rating/ReadOnlyDoc.vue
+++ b/doc/rating/ReadOnlyDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 5,
             code: {
-                basic: `
-<Rating v-model="value" readonly />`,
-                options: `
-<template>
+                basic: `<Rating v-model="value" readonly />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" readonly />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" readonly />
     </div>
diff --git a/doc/rating/TemplateDoc.vue b/doc/rating/TemplateDoc.vue
index a58f65112..39c896b75 100644
--- a/doc/rating/TemplateDoc.vue
+++ b/doc/rating/TemplateDoc.vue
@@ -24,8 +24,7 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Rating v-model="value">
+                basic: `<Rating v-model="value">
     <template #cancelicon>
         <img src="/images/rating/cancel.png" height="24" width="24" />
     </template>
@@ -36,8 +35,7 @@ export default {
         <img src="/images/rating/custom-officon.png" height="24" width="24" />
     </template>
 </Rating>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value">
             <template #cancelicon>
@@ -62,8 +60,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value">
             <template #cancelicon>
diff --git a/doc/rating/WithoutCancelDoc.vue b/doc/rating/WithoutCancelDoc.vue
index 4f43cb18c..08a3124c7 100644
--- a/doc/rating/WithoutCancelDoc.vue
+++ b/doc/rating/WithoutCancelDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Rating v-model="value" :cancel="false" />`,
-                options: `
-<template>
+                basic: `<Rating v-model="value" :cancel="false" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :cancel="false"  />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :cancel="false"  />
     </div>
diff --git a/doc/rating/pt/PTDoc.vue b/doc/rating/pt/PTDoc.vue
index acdbe9ed7..c13d2769d 100644
--- a/doc/rating/pt/PTDoc.vue
+++ b/doc/rating/pt/PTDoc.vue
@@ -17,15 +17,13 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Rating
+                basic: `<Rating
     v-model="value"
     :pt="{
         onIcon: { class: 'text-orange-400' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Rating
             v-model="value"
@@ -45,8 +43,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Rating
             v-model="value"
diff --git a/doc/rating/theming/TailwindDoc.vue b/doc/rating/theming/TailwindDoc.vue
index 001b158e1..bb86ecdc7 100644
--- a/doc/rating/theming/TailwindDoc.vue
+++ b/doc/rating/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -61,8 +61,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Rating v-model="value" />
     </div>
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index f24058d9d..7558e2ac9 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -15,12 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
+                basic: `<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
 <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
 <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="flex justify-content-center align-items-center">
         <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
         <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
@@ -43,8 +41,7 @@ export default {
     background: rgba(156, 39, 176, 0.3);
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="flex justify-content-center align-items-center">
         <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
         <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue
index 1e9853f32..352cf2114 100644
--- a/doc/ripple/DefaultDoc.vue
+++ b/doc/ripple/DefaultDoc.vue
@@ -22,10 +22,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>`,
-                options: `
-<template>
+                basic: `<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>`,
+                options: `<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>
     </div>
@@ -33,8 +31,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>
     </div>
diff --git a/doc/ripple/pt/PTDoc.vue b/doc/ripple/pt/PTDoc.vue
index c03c32f04..87fb7e458 100644
--- a/doc/ripple/pt/PTDoc.vue
+++ b/doc/ripple/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div
+                basic: `<div
     v-ripple="{
         pt: {
             root: 'bg-yellow-400'
@@ -31,8 +30,7 @@ export default {
 >
     Default
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <div
             v-ripple="{
@@ -49,8 +47,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <div
             v-ripple="{
diff --git a/doc/ripple/theming/TailwindDoc.vue b/doc/ripple/theming/TailwindDoc.vue
index 53d135c9e..34cb921e7 100644
--- a/doc/ripple/theming/TailwindDoc.vue
+++ b/doc/ripple/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -46,8 +46,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Button label="Submit" />
     </div>
diff --git a/doc/scrollpanel/BasicDoc.vue b/doc/scrollpanel/BasicDoc.vue
index 8cb9425fc..a70b75752 100644
--- a/doc/scrollpanel/BasicDoc.vue
+++ b/doc/scrollpanel/BasicDoc.vue
@@ -26,15 +26,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ScrollPanel style="width: 100%; height: 200px">
+                basic: `<ScrollPanel style="width: 100%; height: 200px">
     <p>
         Lorem ipsum dolor ...
     </p>
 </ScrollPanel>
                 `,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <ScrollPanel style="width: 100%; height: 200px">
             <p>
@@ -55,8 +53,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ScrollPanel style="width: 100%; height: 200px">
             <p>
diff --git a/doc/scrollpanel/CustomDoc.vue b/doc/scrollpanel/CustomDoc.vue
index 5dc52cdc8..c57db7a3d 100644
--- a/doc/scrollpanel/CustomDoc.vue
+++ b/doc/scrollpanel/CustomDoc.vue
@@ -46,8 +46,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
+                basic: `<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
     <p>
         Lorem ipsum dolor ..
     </p>
@@ -58,8 +57,7 @@ export default {
         Lorem ipsum dolor ..
     </p>
 </ScrollPanel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-column md:flex-row gap-5">
             <div class="flex-auto">
@@ -128,8 +126,7 @@ export default {
     transition: background-color 0.3s;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-column md:flex-row gap-5">
             <div class="flex-auto">
diff --git a/doc/scrollpanel/pt/PTDoc.vue b/doc/scrollpanel/pt/PTDoc.vue
index 7b1a55081..dda33082d 100644
--- a/doc/scrollpanel/pt/PTDoc.vue
+++ b/doc/scrollpanel/pt/PTDoc.vue
@@ -24,8 +24,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ScrollPanel
+                basic: `<ScrollPanel
     :pt="{
         root: { 
             style: { width: '100%', height: '200px' }
@@ -45,8 +44,7 @@ export default {
         officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
     </p>
 </ScrollPanel>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <ScrollPanel
             :pt="{
@@ -70,8 +68,7 @@ export default {
         </ScrollPanel>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ScrollPanel
             :pt="{
diff --git a/doc/scrollpanel/theming/TailwindDoc.vue b/doc/scrollpanel/theming/TailwindDoc.vue
index 165c8de88..788f91064 100644
--- a/doc/scrollpanel/theming/TailwindDoc.vue
+++ b/doc/scrollpanel/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -31,8 +31,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ScrollPanel style="width: 100%; height: 200px">
             <p class="text-gray-700 dark:text-white/80">
diff --git a/doc/scrolltop/BasicDoc.vue b/doc/scrolltop/BasicDoc.vue
index c95081c99..6de822c06 100644
--- a/doc/scrolltop/BasicDoc.vue
+++ b/doc/scrolltop/BasicDoc.vue
@@ -16,8 +16,7 @@ export default {
         return {
             code: {
                 basic: `<ScrollTop />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
         <i class="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style="fontsize: 2rem"></i>
@@ -27,8 +26,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
         <i class="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style="fontsize: 2rem"></i>
diff --git a/doc/scrolltop/ElementDoc.vue b/doc/scrolltop/ElementDoc.vue
index b2019250a..efc48f86d 100644
--- a/doc/scrolltop/ElementDoc.vue
+++ b/doc/scrolltop/ElementDoc.vue
@@ -22,10 +22,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />`,
-                options: `
-<template>
+                basic: `<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />`,
+                options: `<template>
     <div class="card">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
@@ -60,8 +58,7 @@ export default {
     color: var(--primary-color-text);
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
diff --git a/doc/scrolltop/pt/PTDoc.vue b/doc/scrolltop/pt/PTDoc.vue
index cad334197..e73e0c1b6 100644
--- a/doc/scrolltop/pt/PTDoc.vue
+++ b/doc/scrolltop/pt/PTDoc.vue
@@ -20,15 +20,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<ScrollTop target="parent"
+                basic: `<ScrollTop target="parent"
     :pt="{ 
         root: { class: 'w-2rem h-2rem bg-primary' },
         icon: { class: 'w-1rem h-1rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
@@ -47,8 +45,7 @@ export default {
         </ScrollPanel>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
diff --git a/doc/scrolltop/theming/TailwindDoc.vue b/doc/scrolltop/theming/TailwindDoc.vue
index 23182d7f6..ce43295d1 100644
--- a/doc/scrolltop/theming/TailwindDoc.vue
+++ b/doc/scrolltop/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -39,8 +39,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
diff --git a/doc/selectbutton/AccessibilityDoc.vue b/doc/selectbutton/AccessibilityDoc.vue
index 56135f793..a0e09b38b 100644
--- a/doc/selectbutton/AccessibilityDoc.vue
+++ b/doc/selectbutton/AccessibilityDoc.vue
@@ -54,8 +54,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="label_number">Number</span>
+                basic: `<span id="label_number">Number</span>
 <Slider aria-labelledby="label_number" />
 
 <Slider aria-label="Number" />`
diff --git a/doc/selectbutton/BasicDoc.vue b/doc/selectbutton/BasicDoc.vue
index 5ccb6a922..d655fae56 100644
--- a/doc/selectbutton/BasicDoc.vue
+++ b/doc/selectbutton/BasicDoc.vue
@@ -19,10 +19,8 @@ export default {
             value: 'Off',
             options: ['Off', 'On'],
             code: {
-                basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" />`,
-                options: `
-<template>
+                basic: `<SelectButton v-model="value" :options="options" aria-labelledby="basic" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
@@ -38,8 +36,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
diff --git a/doc/selectbutton/DisabledDoc.vue b/doc/selectbutton/DisabledDoc.vue
index 77d4e8bc9..8d4ec351d 100644
--- a/doc/selectbutton/DisabledDoc.vue
+++ b/doc/selectbutton/DisabledDoc.vue
@@ -21,11 +21,9 @@ export default {
                 { name: 'Option 2', value: 2, constant: true }
             ],
             code: {
-                basic: `
-<SelectButton v-model="value" :options="options" disabled />
+                basic: `<SelectButton v-model="value" :options="options" disabled />
 <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
         <SelectButton v-model="value" :options="options" disabled />
         <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
@@ -47,8 +45,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
         <SelectButton v-model="value" :options="options" disabled />
         <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index d1b0603ee..fb639aa97 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/InvalidDoc.vue
@@ -15,10 +15,8 @@ export default {
             value: 'Off',
             options: ['Off', 'On'],
             code: {
-                basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />`,
-                options: `
-<template>
+                basic: `<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
     </div>
@@ -34,8 +32,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
     </div>
diff --git a/doc/selectbutton/MultipleDoc.vue b/doc/selectbutton/MultipleDoc.vue
index aa8c521e7..a042b972d 100644
--- a/doc/selectbutton/MultipleDoc.vue
+++ b/doc/selectbutton/MultipleDoc.vue
@@ -19,10 +19,8 @@ export default {
                 { name: 'Option 3', value: 3 }
             ],
             code: {
-                basic: `
-<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />`,
-                options: `
-<template>
+                basic: `<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
     </div>
@@ -42,8 +40,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
     </div>
diff --git a/doc/selectbutton/TemplateDoc.vue b/doc/selectbutton/TemplateDoc.vue
index 88263ddde..2b3ba38e7 100644
--- a/doc/selectbutton/TemplateDoc.vue
+++ b/doc/selectbutton/TemplateDoc.vue
@@ -24,14 +24,12 @@ export default {
                 { icon: 'pi pi-align-justify', value: 'Justify' }
             ],
             code: {
-                basic: `
-<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+                basic: `<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
     <template #option="slotProps">
         <i :class="slotProps.option.icon"></i>
     </template>
 </SelectButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
             <template #option="slotProps">
@@ -56,8 +54,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
             <template #option="slotProps">
diff --git a/doc/selectbutton/form/VeeValidateDoc.vue b/doc/selectbutton/form/VeeValidateDoc.vue
index 54a3e80d4..cf61313a4 100644
--- a/doc/selectbutton/form/VeeValidateDoc.vue
+++ b/doc/selectbutton/form/VeeValidateDoc.vue
@@ -43,8 +43,7 @@ export default {
         return {
             options: ['Off', 'On'],
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
         <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
         <SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
@@ -53,8 +52,7 @@ export default {
     </form>
     <Toast />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
@@ -99,8 +97,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
index 9f40b32bd..242118329 100644
--- a/doc/selectbutton/pt/PTDoc.vue
+++ b/doc/selectbutton/pt/PTDoc.vue
@@ -22,8 +22,7 @@ export default {
             value: 'Off',
             options: ['Off', 'On'],
             code: {
-                basic: `
-<SelectButton
+                basic: `<SelectButton
     v-model="value"
     :options="options"
     aria-labelledby="basic"
@@ -33,8 +32,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <SelectButton
             v-model="value"
@@ -59,8 +57,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <SelectButton
             v-model="value"
diff --git a/doc/selectbutton/theming/TailwindDoc.vue b/doc/selectbutton/theming/TailwindDoc.vue
index 87b1f9b0d..811481c4b 100644
--- a/doc/selectbutton/theming/TailwindDoc.vue
+++ b/doc/selectbutton/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -41,8 +41,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
diff --git a/doc/sidebar/AccessibilityDoc.vue b/doc/sidebar/AccessibilityDoc.vue
index 84a8d7a2a..79bb2fbfa 100644
--- a/doc/sidebar/AccessibilityDoc.vue
+++ b/doc/sidebar/AccessibilityDoc.vue
@@ -73,8 +73,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
 
 <Sidebar id="sbar" v-model:visible="visible" role="region" >
     <p>Content</p>
diff --git a/doc/sidebar/BasicDoc.vue b/doc/sidebar/BasicDoc.vue
index f38f62538..21edea17f 100644
--- a/doc/sidebar/BasicDoc.vue
+++ b/doc/sidebar/BasicDoc.vue
@@ -18,16 +18,14 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible">
         <h2>Sidebar</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
@@ -46,8 +44,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/FullScreenDoc.vue b/doc/sidebar/FullScreenDoc.vue
index 737cf3964..964829310 100644
--- a/doc/sidebar/FullScreenDoc.vue
+++ b/doc/sidebar/FullScreenDoc.vue
@@ -18,16 +18,14 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible" position="full">
         <h2>Sidebar</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" position="full">
             <h2>Sidebar</h2>
@@ -46,8 +44,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" position="full">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/PositionDoc.vue b/doc/sidebar/PositionDoc.vue
index d0f626b3a..9833f19a0 100644
--- a/doc/sidebar/PositionDoc.vue
+++ b/doc/sidebar/PositionDoc.vue
@@ -42,8 +42,7 @@ export default {
             visibleTop: false,
             visibleBottom: false,
             code: {
-                basic: `
-<div class="flex gap-2 justify-content-center">
+                basic: `<div class="flex gap-2 justify-content-center">
     <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
     <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
     <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
@@ -69,8 +68,7 @@ export default {
     <h2>Bottom Sidebar</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex gap-2 justify-content-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
@@ -113,8 +111,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex gap-2 justify-content-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
diff --git a/doc/sidebar/SizeDoc.vue b/doc/sidebar/SizeDoc.vue
index 0d4574dca..82d940db7 100644
--- a/doc/sidebar/SizeDoc.vue
+++ b/doc/sidebar/SizeDoc.vue
@@ -18,16 +18,14 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
         <h2>Sidebar</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
             <h2>Sidebar</h2>
@@ -46,8 +44,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/TemplateDoc.vue b/doc/sidebar/TemplateDoc.vue
index 1c142347e..67128204c 100644
--- a/doc/sidebar/TemplateDoc.vue
+++ b/doc/sidebar/TemplateDoc.vue
@@ -28,8 +28,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible">
         <h2>Sidebar</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
@@ -46,8 +45,7 @@ export default {
     </Sidebar>
     <Button icon="pi pi-plus" @click="visible = true" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
@@ -76,8 +74,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
index 12f72c1a4..13a7664d1 100644
--- a/doc/sidebar/pt/PTDoc.vue
+++ b/doc/sidebar/pt/PTDoc.vue
@@ -16,8 +16,7 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `
-<Sidebar v-model:visible="visible"
+                basic: `<Sidebar v-model:visible="visible"
     :pt="{
         root: { class: 'w-25rem' }
     }
@@ -26,8 +25,7 @@ export default {
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>
 <Button icon="pi pi-arrow-right" @click="visible = true" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible"
             :pt="{
@@ -50,8 +48,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible"
             :pt="{
diff --git a/doc/sidebar/theming/TailwindDoc.vue b/doc/sidebar/theming/TailwindDoc.vue
index faee7255e..6795e6773 100644
--- a/doc/sidebar/theming/TailwindDoc.vue
+++ b/doc/sidebar/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -82,8 +82,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex gap-2 justify-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
diff --git a/doc/skeleton/CardDoc.vue b/doc/skeleton/CardDoc.vue
index 919c655ef..b69d69a36 100644
--- a/doc/skeleton/CardDoc.vue
+++ b/doc/skeleton/CardDoc.vue
@@ -27,8 +27,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="border-round border-1 surface-border p-4 surface-card">
+                basic: `<div class="border-round border-1 surface-border p-4 surface-card">
     <div class="flex mb-3">
         <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
         <div>
@@ -43,8 +42,7 @@ export default {
         <Skeleton width="4rem" height="2rem"></Skeleton>
     </div>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="border-round border-1 surface-border p-4 surface-card">
             <div class="flex mb-3">
@@ -66,8 +64,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="border-round border-1 surface-border p-4 surface-card">
             <div class="flex mb-3">
diff --git a/doc/skeleton/DataTableDoc.vue b/doc/skeleton/DataTableDoc.vue
index 17cf2d3d9..ff786ec16 100644
--- a/doc/skeleton/DataTableDoc.vue
+++ b/doc/skeleton/DataTableDoc.vue
@@ -34,8 +34,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<DataTable :value="products">
+                basic: `<DataTable :value="products">
     <Column field="code" header="Code">
         <template #body>
             <Skeleton></Skeleton>
@@ -57,8 +56,7 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <DataTable :value="products">
             <Column field="code" header="Code">
@@ -94,8 +92,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <DataTable :value="products">
             <Column field="code" header="Code">
diff --git a/doc/skeleton/ListDoc.vue b/doc/skeleton/ListDoc.vue
index 4bda762f2..1151f7366 100644
--- a/doc/skeleton/ListDoc.vue
+++ b/doc/skeleton/ListDoc.vue
@@ -52,8 +52,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="border-round border-1 surface-border p-4 surface-card">
+                basic: `<div class="border-round border-1 surface-border p-4 surface-card">
     <ul class="m-0 p-0 list-none">
         <li class="mb-3">
             <div class="flex">
@@ -93,8 +92,7 @@ export default {
         </li>
     </ul>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="border-round border-1 surface-border p-4 surface-card">
         <ul class="m-0 p-0 list-none">
             <li class="mb-3">
@@ -139,8 +137,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="border-round border-1 surface-border p-4 surface-card">
         <ul class="m-0 p-0 list-none">
             <li class="mb-3">
diff --git a/doc/skeleton/ShapesDoc.vue b/doc/skeleton/ShapesDoc.vue
index 38a71ff68..287990c17 100644
--- a/doc/skeleton/ShapesDoc.vue
+++ b/doc/skeleton/ShapesDoc.vue
@@ -73,8 +73,7 @@ export default {
 <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="5rem"></Skeleton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex flex-wrap">
             <div class="w-full md:w-6 p-3">
@@ -117,8 +116,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex flex-wrap">
             <div class="w-full md:w-6 p-3">
diff --git a/doc/skeleton/pt/PTDoc.vue b/doc/skeleton/pt/PTDoc.vue
index 41fdaa146..f9b3a16ed 100644
--- a/doc/skeleton/pt/PTDoc.vue
+++ b/doc/skeleton/pt/PTDoc.vue
@@ -11,22 +11,19 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Skeleton
+                basic: `<Skeleton
     :pt="{
         root: { class: 'w-3rem h-3rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <Skeleton
         :pt="{
             root: { class: 'w-3rem h-3rem' }
         }"
     />
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <Skeleton
         :pt="{
             root: { class: 'w-3rem h-3rem' }
diff --git a/doc/skeleton/theming/TailwindDoc.vue b/doc/skeleton/theming/TailwindDoc.vue
index 28108628e..5f5156e09 100644
--- a/doc/skeleton/theming/TailwindDoc.vue
+++ b/doc/skeleton/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -35,8 +35,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card text-gray-700 dark:text-white/80">
         <div class="w-full">
             <h5>Rectangle</h5>
diff --git a/doc/slider/AccessibilityDoc.vue b/doc/slider/AccessibilityDoc.vue
index 305823b63..14d9463e1 100644
--- a/doc/slider/AccessibilityDoc.vue
+++ b/doc/slider/AccessibilityDoc.vue
@@ -67,8 +67,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="label_number">Number</span>
+                basic: `<span id="label_number">Number</span>
 <Slider aria-labelledby="label_number" />
 
 <Slider aria-label="Number" />`
diff --git a/doc/slider/BasicDoc.vue b/doc/slider/BasicDoc.vue
index c80365465..58834ace7 100644
--- a/doc/slider/BasicDoc.vue
+++ b/doc/slider/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Slider v-model="value" class="w-14rem" />`,
-                options: `
-<template>
+                basic: `<Slider v-model="value" class="w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" class="w-14rem" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" class="w-14rem" />
     </div>
diff --git a/doc/slider/InputDoc.vue b/doc/slider/InputDoc.vue
index bf1614d8d..1d1daae32 100644
--- a/doc/slider/InputDoc.vue
+++ b/doc/slider/InputDoc.vue
@@ -17,11 +17,9 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `
-<InputText v-model.number="value" />
+                basic: `<InputText v-model.number="value" />
 <Slider v-model="value" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <div class="w-14rem">
             <InputText v-model.number="value" class="w-full" />
@@ -39,8 +37,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <div class="w-14rem">
             <InputText v-model.number="value" class="w-full" />
diff --git a/doc/slider/RangeDoc.vue b/doc/slider/RangeDoc.vue
index d6b317fc7..22e077bc3 100644
--- a/doc/slider/RangeDoc.vue
+++ b/doc/slider/RangeDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: [20, 80],
             code: {
-                basic: `
-<Slider v-model="value" range class="w-14rem" />`,
-                options: `
-<template>
+                basic: `<Slider v-model="value" range class="w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" range class="w-14rem" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" range class="w-14rem" />
     </div>
diff --git a/doc/slider/StepDoc.vue b/doc/slider/StepDoc.vue
index b335fea0b..7739caf00 100644
--- a/doc/slider/StepDoc.vue
+++ b/doc/slider/StepDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 20,
             code: {
-                basic: `
-<Slider v-model="value" :step="20" class="w-14rem" />`,
-                options: `
-<template>
+                basic: `<Slider v-model="value" :step="20" class="w-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" :step="20" class="w-14rem" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" :step="20" class="w-14rem" />
     </div>
diff --git a/doc/slider/VerticalDoc.vue b/doc/slider/VerticalDoc.vue
index 1477be0e2..20afb80f8 100644
--- a/doc/slider/VerticalDoc.vue
+++ b/doc/slider/VerticalDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `
-<Slider v-model="value" orientation="vertical" class="h-14rem" />`,
-                options: `
-<template>
+                basic: `<Slider v-model="value" orientation="vertical" class="h-14rem" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" orientation="vertical" class="h-14rem" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" orientation="vertical" class="h-14rem" />
     </div>
diff --git a/doc/slider/pt/PTDoc.vue b/doc/slider/pt/PTDoc.vue
index 7db123da0..048f037fe 100644
--- a/doc/slider/pt/PTDoc.vue
+++ b/doc/slider/pt/PTDoc.vue
@@ -19,8 +19,7 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<Slider
+                basic: `<Slider
     v-model="value"
     :pt="{
         root: { class: 'w-14rem' },
@@ -28,8 +27,7 @@ export default {
         range: { class: 'bg-orange-400' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Slider
             v-model="value"
@@ -51,8 +49,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Slider
             v-model="value"
diff --git a/doc/slider/theming/TailwindDoc.vue b/doc/slider/theming/TailwindDoc.vue
index e85e55f2a..c33669687 100644
--- a/doc/slider/theming/TailwindDoc.vue
+++ b/doc/slider/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -77,8 +77,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Slider v-model="value" class="w-14rem" />
     </div>
diff --git a/doc/speeddial/AccessibilityDoc.vue b/doc/speeddial/AccessibilityDoc.vue
index 816f0eb94..db2addaf0 100644
--- a/doc/speeddial/AccessibilityDoc.vue
+++ b/doc/speeddial/AccessibilityDoc.vue
@@ -122,8 +122,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<SpeedDial aria-label="Options" />`
+                basic: `<SpeedDial aria-label="Options" />`
             }
         };
     }
diff --git a/doc/speeddial/CircleDoc.vue b/doc/speeddial/CircleDoc.vue
index e6ea31839..90028ea8b 100644
--- a/doc/speeddial/CircleDoc.vue
+++ b/doc/speeddial/CircleDoc.vue
@@ -52,10 +52,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />`,
-                options: `
-<template>
+                basic: `<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />`,
+                options: `<template>
     <div class="card">
         <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
@@ -109,8 +107,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
diff --git a/doc/speeddial/CustomDoc.vue b/doc/speeddial/CustomDoc.vue
index 8ff6a2616..8b5606056 100644
--- a/doc/speeddial/CustomDoc.vue
+++ b/doc/speeddial/CustomDoc.vue
@@ -52,11 +52,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Toast />
+                basic: `<Toast />
 <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
@@ -110,8 +108,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
diff --git a/doc/speeddial/LinearDoc.vue b/doc/speeddial/LinearDoc.vue
index f0270a94c..dcbfa59dc 100644
--- a/doc/speeddial/LinearDoc.vue
+++ b/doc/speeddial/LinearDoc.vue
@@ -55,13 +55,11 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+                basic: `<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
 <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
 <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
 <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
@@ -118,8 +116,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index cc8a39007..afc7433a4 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -52,10 +52,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />`,
-                options: `
-<template>
+                basic: `<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />`,
+                options: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
@@ -109,8 +107,7 @@ data() {
 }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
diff --git a/doc/speeddial/QuarterCircleDoc.vue b/doc/speeddial/QuarterCircleDoc.vue
index f749a6f91..2841e7f5b 100644
--- a/doc/speeddial/QuarterCircleDoc.vue
+++ b/doc/speeddial/QuarterCircleDoc.vue
@@ -55,13 +55,11 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
+                basic: `<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
 <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
 <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
 <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
@@ -118,8 +116,7 @@ data() {
 }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
diff --git a/doc/speeddial/SemiCircleDoc.vue b/doc/speeddial/SemiCircleDoc.vue
index c95e9fd47..b166f5809 100644
--- a/doc/speeddial/SemiCircleDoc.vue
+++ b/doc/speeddial/SemiCircleDoc.vue
@@ -55,13 +55,11 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+                basic: `<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
 <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
 <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
 <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
@@ -118,8 +116,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card" :style="{ position: 'relative', height: '500px' }">
         <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
         <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
diff --git a/doc/speeddial/TooltipDoc.vue b/doc/speeddial/TooltipDoc.vue
index 91617e726..c50b47e13 100644
--- a/doc/speeddial/TooltipDoc.vue
+++ b/doc/speeddial/TooltipDoc.vue
@@ -53,11 +53,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+                basic: `<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
 <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
@@ -112,8 +110,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
diff --git a/doc/speeddial/pt/PTDoc.vue b/doc/speeddial/pt/PTDoc.vue
index 89368149d..450152ea9 100644
--- a/doc/speeddial/pt/PTDoc.vue
+++ b/doc/speeddial/pt/PTDoc.vue
@@ -59,16 +59,14 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
+                basic: `<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
     :pt="{
         action: ({ props, state, context }) => ({
             class: context.active ? 'bg-primary' : undefined
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '300px' }">
             <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
@@ -128,8 +126,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '300px' }">
             <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
diff --git a/doc/speeddial/theming/TailwindDoc.vue b/doc/speeddial/theming/TailwindDoc.vue
index b6459d5ed..6d6358e68 100644
--- a/doc/speeddial/theming/TailwindDoc.vue
+++ b/doc/speeddial/theming/TailwindDoc.vue
@@ -138,8 +138,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
diff --git a/doc/splitbutton/AccessibilityDoc.vue b/doc/splitbutton/AccessibilityDoc.vue
index d77fa734c..0e8772ee6 100644
--- a/doc/splitbutton/AccessibilityDoc.vue
+++ b/doc/splitbutton/AccessibilityDoc.vue
@@ -139,8 +139,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />`
+                basic: `<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />`
             }
         };
     }
diff --git a/doc/splitbutton/BasicDoc.vue b/doc/splitbutton/BasicDoc.vue
index a93c80d03..17bf0b9d4 100644
--- a/doc/splitbutton/BasicDoc.vue
+++ b/doc/splitbutton/BasicDoc.vue
@@ -37,10 +37,8 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />`,
-                options: `
-<template>
+                basic: `<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
@@ -84,8 +82,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
diff --git a/doc/splitbutton/DisabledDoc.vue b/doc/splitbutton/DisabledDoc.vue
index 5abeaddd5..1867472e7 100644
--- a/doc/splitbutton/DisabledDoc.vue
+++ b/doc/splitbutton/DisabledDoc.vue
@@ -37,10 +37,8 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />`,
-                options: `
-<template>
+                basic: `<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
@@ -83,8 +81,7 @@ export default {
         }
     }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
diff --git a/doc/splitbutton/OutlinedDoc.vue b/doc/splitbutton/OutlinedDoc.vue
index bd4b28baf..62225c082 100644
--- a/doc/splitbutton/OutlinedDoc.vue
+++ b/doc/splitbutton/OutlinedDoc.vue
@@ -43,16 +43,14 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
+                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
@@ -102,8 +100,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/RaisedDoc.vue b/doc/splitbutton/RaisedDoc.vue
index 275cb58b2..7227d2297 100644
--- a/doc/splitbutton/RaisedDoc.vue
+++ b/doc/splitbutton/RaisedDoc.vue
@@ -43,16 +43,14 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
+                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
@@ -102,8 +100,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/RaisedTextDoc.vue b/doc/splitbutton/RaisedTextDoc.vue
index 0f716a522..c27ecf223 100644
--- a/doc/splitbutton/RaisedTextDoc.vue
+++ b/doc/splitbutton/RaisedTextDoc.vue
@@ -43,16 +43,14 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
+                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
@@ -102,8 +100,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/RoundedDoc.vue b/doc/splitbutton/RoundedDoc.vue
index d27a84f2b..eb5866436 100644
--- a/doc/splitbutton/RoundedDoc.vue
+++ b/doc/splitbutton/RoundedDoc.vue
@@ -43,16 +43,14 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
+                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
@@ -102,8 +100,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/SeverityDoc.vue b/doc/splitbutton/SeverityDoc.vue
index 69ba1ab79..92d735d16 100644
--- a/doc/splitbutton/SeverityDoc.vue
+++ b/doc/splitbutton/SeverityDoc.vue
@@ -43,16 +43,14 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
+                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
@@ -102,8 +100,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/SizesDoc.vue b/doc/splitbutton/SizesDoc.vue
index b576739df..c6cfa922f 100644
--- a/doc/splitbutton/SizesDoc.vue
+++ b/doc/splitbutton/SizesDoc.vue
@@ -39,12 +39,10 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
diff --git a/doc/splitbutton/TemplateDoc.vue b/doc/splitbutton/TemplateDoc.vue
index d28f8e47c..07b05d1dd 100644
--- a/doc/splitbutton/TemplateDoc.vue
+++ b/doc/splitbutton/TemplateDoc.vue
@@ -42,15 +42,13 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
+                basic: `<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
     <Button @click="save">
         <img alt="logo" src="/images/logo.svg" style="width: 1rem" />
         <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
     </Button>
 </SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
@@ -99,8 +97,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
diff --git a/doc/splitbutton/TextDoc.vue b/doc/splitbutton/TextDoc.vue
index 79dca4714..ba5b89348 100644
--- a/doc/splitbutton/TextDoc.vue
+++ b/doc/splitbutton/TextDoc.vue
@@ -43,16 +43,14 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
+                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
@@ -102,8 +100,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/pt/PTDoc.vue b/doc/splitbutton/pt/PTDoc.vue
index db9ca20a5..e4058b4cc 100644
--- a/doc/splitbutton/pt/PTDoc.vue
+++ b/doc/splitbutton/pt/PTDoc.vue
@@ -44,8 +44,7 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `
-<SplitButton label="Save"
+                basic: `<SplitButton label="Save"
     @click="save"
     :model="items"
     :pt="{
@@ -54,8 +53,7 @@ export default {
         }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <SplitButton
             label="Save"
@@ -109,8 +107,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <SplitButton
             label="Save"
diff --git a/doc/splitbutton/theming/TailwindDoc.vue b/doc/splitbutton/theming/TailwindDoc.vue
index 42a105913..dc7060e76 100644
--- a/doc/splitbutton/theming/TailwindDoc.vue
+++ b/doc/splitbutton/theming/TailwindDoc.vue
@@ -4,10 +4,8 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <div class="overflow-auto" style="max-height: 40rem">
-            <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        </div>
-        <p class="mt-6">A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -17,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export const TRANSITIONS = {
+                basic: `export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -160,8 +157,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center flex-wrap">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
diff --git a/doc/splitter/HorizontalDoc.vue b/doc/splitter/HorizontalDoc.vue
index b2da03886..b676bd51d 100644
--- a/doc/splitter/HorizontalDoc.vue
+++ b/doc/splitter/HorizontalDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Splitter style="height: 300px" class="mb-5">
+                basic: `<Splitter style="height: 300px" class="mb-5">
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
 </Splitter>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Splitter style="height: 300px" class="mb-5">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
@@ -33,8 +31,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Splitter style="height: 300px" class="mb-5">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/NestedDoc.vue b/doc/splitter/NestedDoc.vue
index 3b2718292..56a680f20 100644
--- a/doc/splitter/NestedDoc.vue
+++ b/doc/splitter/NestedDoc.vue
@@ -26,8 +26,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Splitter style="height: 300px">
+                basic: `<Splitter style="height: 300px">
     <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
     <SplitterPanel :size="80">
         <Splitter layout="vertical">
@@ -41,8 +40,7 @@ export default {
         </Splitter>
     </SplitterPanel>
 </Splitter>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
@@ -63,8 +61,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/SizeDoc.vue b/doc/splitter/SizeDoc.vue
index 8b2491c31..9d4af236e 100644
--- a/doc/splitter/SizeDoc.vue
+++ b/doc/splitter/SizeDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Splitter style="height: 300px">
+                basic: `<Splitter style="height: 300px">
     <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
     <SplitterPanel class="flex align-items-center justify-content-center" :size="75"> Panel 2 </SplitterPanel>
 </Splitter>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
@@ -33,8 +31,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/VerticalDoc.vue b/doc/splitter/VerticalDoc.vue
index 92b2b781a..02e924e7a 100644
--- a/doc/splitter/VerticalDoc.vue
+++ b/doc/splitter/VerticalDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Splitter style="height: 300px" layout="vertical">
+                basic: `<Splitter style="height: 300px" layout="vertical">
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
 </Splitter>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Splitter style="height: 300px" layout="vertical">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
@@ -33,8 +31,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Splitter style="height: 300px" layout="vertical">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/pt/PTDoc.vue b/doc/splitter/pt/PTDoc.vue
index 4ccd5f46b..db58e26fd 100644
--- a/doc/splitter/pt/PTDoc.vue
+++ b/doc/splitter/pt/PTDoc.vue
@@ -14,8 +14,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Splitter
+                basic: `<Splitter
     :pt="{
         root: { style: { height: '300px' } },
         gutterHandler: { class: 'bg-primary' }
@@ -23,8 +22,7 @@ export default {
     <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
     <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
 </Splitter>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Splitter
             :pt="{
@@ -36,8 +34,7 @@ export default {
         </Splitter>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Splitter
             :pt="{
diff --git a/doc/splitter/theming/TailwindDoc.vue b/doc/splitter/theming/TailwindDoc.vue
index 035ffc21a..7b4cd8055 100644
--- a/doc/splitter/theming/TailwindDoc.vue
+++ b/doc/splitter/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -51,8 +51,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Splitter style="height: 300px" class="mb-5">
             <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
diff --git a/doc/steps/BasicDoc.vue b/doc/steps/BasicDoc.vue
index 6a7615282..181611af8 100644
--- a/doc/steps/BasicDoc.vue
+++ b/doc/steps/BasicDoc.vue
@@ -31,10 +31,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Steps :model="items" aria-label="Form Steps" />`,
-                options: `
-<template>
+                basic: `<Steps :model="items" aria-label="Form Steps" />`,
+                options: `<template>
     <div>        
         <div class="card">
             <Steps :model="items" :readonly="false" aria-label="Form Steps" />
@@ -68,8 +66,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <div class="card">
             <Steps :model="items" :readonly="false" aria-label="Form Steps" />
diff --git a/doc/steps/InteractiveDoc.vue b/doc/steps/InteractiveDoc.vue
index 3913aa154..d439c215b 100644
--- a/doc/steps/InteractiveDoc.vue
+++ b/doc/steps/InteractiveDoc.vue
@@ -39,8 +39,7 @@ export default {
             ],
             formObject: {},
             code: {
-                basic: `
-<div class="card">
+                basic: `<div class="card">
     <Steps :model="items" aria-label="Form Steps" />
 </div>
 
@@ -49,8 +48,7 @@ export default {
         <component :is="Component" />
     </keep-alive>
 </router-view>`,
-                options: `
-<template>
+                options: `<template>
     <div>
         <Toast />
         
@@ -118,8 +116,7 @@ export default {
     padding: 2rem;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <Toast />
 
diff --git a/doc/steps/pt/PTDoc.vue b/doc/steps/pt/PTDoc.vue
index ada9b9f59..8a57389e5 100644
--- a/doc/steps/pt/PTDoc.vue
+++ b/doc/steps/pt/PTDoc.vue
@@ -35,16 +35,14 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Steps
+                basic: `<Steps
     :model="items"
     :readonly="false"
     :pt="{
         root: { class: 'w-30rem' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div>        
         <div class="card">
             <Steps
@@ -84,8 +82,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <div class="card">
             <Steps
diff --git a/doc/steps/theming/TailwindDoc.vue b/doc/steps/theming/TailwindDoc.vue
index f393ebe33..14027d55f 100644
--- a/doc/steps/theming/TailwindDoc.vue
+++ b/doc/steps/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -41,8 +41,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <div class="card">
             <Steps :model="items" :readonly="false" aria-label="Form Steps" />
diff --git a/doc/styleclass/AnimationDoc.vue b/doc/styleclass/AnimationDoc.vue
index f6545ec4f..4eb8afff1 100644
--- a/doc/styleclass/AnimationDoc.vue
+++ b/doc/styleclass/AnimationDoc.vue
@@ -22,14 +22,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+                basic: `<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
 <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
 <div class="hidden animation-duration-500 box">
     <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
@@ -87,8 +85,7 @@ export default {
     animation: my-fadeout 150ms linear;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
diff --git a/doc/styleclass/ToggleClassDoc.vue b/doc/styleclass/ToggleClassDoc.vue
index e25685c95..70959a851 100644
--- a/doc/styleclass/ToggleClassDoc.vue
+++ b/doc/styleclass/ToggleClassDoc.vue
@@ -14,11 +14,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
+                basic: `<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
 <InputText />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
         <InputText />
@@ -27,8 +25,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
         <InputText />
diff --git a/doc/tabmenu/BasicDoc.vue b/doc/tabmenu/BasicDoc.vue
index 9afb5d82f..ff9985033 100644
--- a/doc/tabmenu/BasicDoc.vue
+++ b/doc/tabmenu/BasicDoc.vue
@@ -21,11 +21,9 @@ export default {
                 { label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
             ],
             code: {
-                basic: `
-<TabMenu :model="items" />
+                basic: `<TabMenu :model="items" />
 <router-view />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabMenu :model="items" />
         <router-view />
@@ -67,8 +65,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabMenu :model="items" />
         <router-view />
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index e182f0f3c..7981947cb 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -37,11 +37,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Button @click="active = 0" text outlined label="Activate 1st" />
+                basic: `<Button @click="active = 0" text outlined label="Activate 1st" />
 <TabMenu v-model:activeIndex="active" :model="items" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Button @click="active = 0" text outlined label="Activate 1st" />
         <TabMenu v-model:activeIndex="active" :model="items" />
@@ -79,8 +77,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Button @click="active = 0" text outlined label="Activate 1st" />
         <TabMenu v-model:activeIndex="active" :model="items" />
diff --git a/doc/tabmenu/pt/PTDoc.vue b/doc/tabmenu/pt/PTDoc.vue
index d5b5a5b67..e8ec14a25 100644
--- a/doc/tabmenu/pt/PTDoc.vue
+++ b/doc/tabmenu/pt/PTDoc.vue
@@ -40,8 +40,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<TabMenu
+                basic: `<TabMenu
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -49,8 +48,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabMenu
             :model="items"
@@ -93,8 +91,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabMenu
             :model="items"
diff --git a/doc/tabmenu/theming/TailwindDoc.vue b/doc/tabmenu/theming/TailwindDoc.vue
index 05e48a3da..0578baf65 100644
--- a/doc/tabmenu/theming/TailwindDoc.vue
+++ b/doc/tabmenu/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -41,8 +41,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabMenu :model="items" />
         <router-view />
diff --git a/doc/tabview/BasicDoc.vue b/doc/tabview/BasicDoc.vue
index b8b9b2a13..955da8124 100644
--- a/doc/tabview/BasicDoc.vue
+++ b/doc/tabview/BasicDoc.vue
@@ -32,8 +32,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<TabView>
+                basic: `<TabView>
     <TabPanel header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -54,8 +53,7 @@ export default {
     </TabPanel>
 </TabView>
                 `,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
@@ -83,8 +81,7 @@ export default {
 <script>
 <\/script>
     `,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
diff --git a/doc/tabview/ControlledDoc.vue b/doc/tabview/ControlledDoc.vue
index 6117428b9..da0a6b2d0 100644
--- a/doc/tabview/ControlledDoc.vue
+++ b/doc/tabview/ControlledDoc.vue
@@ -39,8 +39,7 @@ export default {
         return {
             active: 0,
             code: {
-                basic: `
-<div class="py-2">
+                basic: `<div class="py-2">
     <Button @click="active = 0" text label="Activate 1st" />
     <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
     <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
@@ -66,8 +65,7 @@ export default {
         </p>
     </TabPanel>
 </TabView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="py-2">
             <Button @click="active = 0" text label="Activate 1st" />
@@ -107,8 +105,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="py-2">
             <Button @click="active = 0" text label="Activate 1st" />
diff --git a/doc/tabview/DisabledDoc.vue b/doc/tabview/DisabledDoc.vue
index 642f195ec..3fd159393 100644
--- a/doc/tabview/DisabledDoc.vue
+++ b/doc/tabview/DisabledDoc.vue
@@ -33,8 +33,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<TabView>
+                basic: `<TabView>
     <TabPanel header="Header I">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -56,8 +55,7 @@ export default {
     </TabPanel>
     <TabPanel header="Header IV" :disabled="true"></TabPanel>
 </TabView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
@@ -85,8 +83,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
diff --git a/doc/tabview/DynamicDoc.vue b/doc/tabview/DynamicDoc.vue
index 508dde470..9d956dfa3 100644
--- a/doc/tabview/DynamicDoc.vue
+++ b/doc/tabview/DynamicDoc.vue
@@ -22,14 +22,12 @@ export default {
                 { title: 'Tab 3', content: 'Tab 3 Content' }
             ],
             code: {
-                basic: `
-<TabView>
+                basic: `<TabView>
     <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
 </TabView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
@@ -52,8 +50,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
diff --git a/doc/tabview/ScrollableDoc.vue b/doc/tabview/ScrollableDoc.vue
index 1734f2e64..9544c7a17 100644
--- a/doc/tabview/ScrollableDoc.vue
+++ b/doc/tabview/ScrollableDoc.vue
@@ -18,14 +18,12 @@ export default {
         return {
             scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` })),
             code: {
-                basic: `
-<TabView :scrollable="true">
+                basic: `<TabView :scrollable="true">
     <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
 </TabView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabView :scrollable="true">
             <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
@@ -44,8 +42,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabView :scrollable="true">
             <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
diff --git a/doc/tabview/TemplateDoc.vue b/doc/tabview/TemplateDoc.vue
index ac174aaa1..5940276df 100644
--- a/doc/tabview/TemplateDoc.vue
+++ b/doc/tabview/TemplateDoc.vue
@@ -45,8 +45,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<TabView class="tabview-custom">
+                basic: `<TabView class="tabview-custom">
     <TabPanel>
         <template #header>
             <i class="pi pi-calendar mr-2"></i>
@@ -79,8 +78,7 @@ export default {
         </p>
     </TabPanel>
 </TabView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabView class="tabview-custom">
             <TabPanel>
@@ -120,8 +118,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabView class="tabview-custom">
             <TabPanel>
diff --git a/doc/tabview/pt/PTDoc.vue b/doc/tabview/pt/PTDoc.vue
index 118f50b61..612c8497c 100644
--- a/doc/tabview/pt/PTDoc.vue
+++ b/doc/tabview/pt/PTDoc.vue
@@ -28,8 +28,7 @@ export default {
                 content: `Tab ${i + 1} Content`
             })),
             code: {
-                basic: `
-<TabView>
+                basic: `<TabView>
     <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
         :pt="{
             headerAction: ({ props, parent }) => ({
@@ -39,8 +38,7 @@ export default {
         <p>{{ tab.content }}</p>
     </TabPanel>
 </TabView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
@@ -76,8 +74,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
diff --git a/doc/tabview/theming/TailwindDoc.vue b/doc/tabview/theming/TailwindDoc.vue
index c3a41851b..ed4ecfa64 100644
--- a/doc/tabview/theming/TailwindDoc.vue
+++ b/doc/tabview/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -64,8 +64,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
diff --git a/doc/tag/BasicDoc.vue b/doc/tag/BasicDoc.vue
index cd9a6ba87..39adc0a03 100644
--- a/doc/tag/BasicDoc.vue
+++ b/doc/tag/BasicDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Tag value="New"></Tag>`,
-                options: `
-<template>
+                basic: `<Tag value="New"></Tag>`,
+                options: `<template>
     <div class="flex justify-content-center">
         <Tag value="New"></Tag>
     </div>
@@ -25,8 +23,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="flex justify-content-center">
         <Tag value="New"></Tag>
     </div>
diff --git a/doc/tag/IconDoc.vue b/doc/tag/IconDoc.vue
index 59fda5a9d..2407bb8f5 100644
--- a/doc/tag/IconDoc.vue
+++ b/doc/tag/IconDoc.vue
@@ -17,14 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Tag icon="pi pi-user" value="Primary"></Tag>
+                basic: `<Tag icon="pi pi-user" value="Primary"></Tag>
 <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
 <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
 <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
 <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
@@ -37,8 +35,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
diff --git a/doc/tag/PillDoc.vue b/doc/tag/PillDoc.vue
index 8de58a274..ad698aa80 100644
--- a/doc/tag/PillDoc.vue
+++ b/doc/tag/PillDoc.vue
@@ -17,14 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Tag value="Primary" rounded></Tag>
+                basic: `<Tag value="Primary" rounded></Tag>
 <Tag severity="success" value="Success" rounded></Tag>
 <Tag severity="info" value="Info" rounded></Tag>
 <Tag severity="warning" value="Warning" rounded></Tag>
 <Tag severity="danger" value="Danger" rounded></Tag>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
@@ -37,8 +35,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
diff --git a/doc/tag/SeverityDoc.vue b/doc/tag/SeverityDoc.vue
index 378b1fb26..e85052ed0 100644
--- a/doc/tag/SeverityDoc.vue
+++ b/doc/tag/SeverityDoc.vue
@@ -17,14 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Tag value="Primary"></Tag>
+                basic: `<Tag value="Primary"></Tag>
 <Tag severity="success" value="Success"></Tag>
 <Tag severity="info" value="Info"></Tag>
 <Tag severity="warning" value="Warning"></Tag>
 <Tag severity="danger" value="Danger"></Tag>`,
-                options: `
-<template>
+                options: `<template>
     <div class="flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="success" value="Success"></Tag>
@@ -37,8 +35,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="success" value="Success"></Tag>
diff --git a/doc/tag/TemplateDoc.vue b/doc/tag/TemplateDoc.vue
index d20517bd7..45c583436 100644
--- a/doc/tag/TemplateDoc.vue
+++ b/doc/tag/TemplateDoc.vue
@@ -19,16 +19,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
+                basic: `<Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
     <div class="flex align-items-center gap-2">
         <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
         <span class="text-base">Italia</span>
         <i class="pi pi-times text-xs"></i>
     </div>
 </Tag>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
             <div class="flex align-items-center gap-2">
@@ -43,8 +41,7 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
             <div class="flex align-items-center gap-2">
diff --git a/doc/tag/pt/PTDoc.vue b/doc/tag/pt/PTDoc.vue
index 2dc739d50..46ed0100b 100644
--- a/doc/tag/pt/PTDoc.vue
+++ b/doc/tag/pt/PTDoc.vue
@@ -11,14 +11,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Tag icon="pi pi-user" value="Waiting"
+                basic: `<Tag icon="pi pi-user" value="Waiting"
     :pt="{
         root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Tag icon="pi pi-user" value="Waiting"
             :pt="{
@@ -27,8 +25,7 @@ export default {
         />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Tag icon="pi pi-user" value="Waiting"
             :pt="{
diff --git a/doc/tag/theming/TailwindDoc.vue b/doc/tag/theming/TailwindDoc.vue
index c443fde55..4c8edede0 100644
--- a/doc/tag/theming/TailwindDoc.vue
+++ b/doc/tag/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -43,8 +43,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="success" value="Success"></Tag>
diff --git a/doc/terminal/BasicDoc.vue b/doc/terminal/BasicDoc.vue
index 58584a5f9..9ec33221a 100644
--- a/doc/terminal/BasicDoc.vue
+++ b/doc/terminal/BasicDoc.vue
@@ -19,10 +19,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />`,
-                options: `
-<template>
+                basic: `<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />`,
+                options: `<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
@@ -88,8 +86,7 @@ p {
     color: #9fa8da;
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
diff --git a/doc/terminal/pt/PTDoc.vue b/doc/terminal/pt/PTDoc.vue
index 075f3b3fe..79ab71d5a 100644
--- a/doc/terminal/pt/PTDoc.vue
+++ b/doc/terminal/pt/PTDoc.vue
@@ -23,8 +23,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Terminal
+                basic: `<Terminal
     welcomeMessage="Welcome to PrimeVue"
     prompt="primevue $"
     :pt="{
@@ -34,8 +33,7 @@ export default {
         response: { class: 'text-purple-500' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal
@@ -89,8 +87,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal
diff --git a/doc/terminal/theming/TailwindDoc.vue b/doc/terminal/theming/TailwindDoc.vue
index 22eb42910..910485a71 100644
--- a/doc/terminal/theming/TailwindDoc.vue
+++ b/doc/terminal/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -29,8 +29,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
diff --git a/doc/textarea/AccessibilityDoc.vue b/doc/textarea/AccessibilityDoc.vue
index ad9f05280..51317b842 100644
--- a/doc/textarea/AccessibilityDoc.vue
+++ b/doc/textarea/AccessibilityDoc.vue
@@ -33,8 +33,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<label for="address1">Address 1</label>
+                basic: `<label for="address1">Address 1</label>
 <Textarea id="address1" />
 
 <span id="address2">Address 2</span>
diff --git a/doc/textarea/AutoResizeDoc.vue b/doc/textarea/AutoResizeDoc.vue
index f03850db8..0bacfb1fc 100644
--- a/doc/textarea/AutoResizeDoc.vue
+++ b/doc/textarea/AutoResizeDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<Textarea v-model="value" autoResize rows="5" cols="30" />`,
-                options: `
-<template>
+                basic: `<Textarea v-model="value" autoResize rows="5" cols="30" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
diff --git a/doc/textarea/BasicDoc.vue b/doc/textarea/BasicDoc.vue
index eb9b65e58..ddb15fb20 100644
--- a/doc/textarea/BasicDoc.vue
+++ b/doc/textarea/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<Textarea v-model="value" rows="5" cols="30" />`,
-                options: `
-<template>
+                basic: `<Textarea v-model="value" rows="5" cols="30" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
diff --git a/doc/textarea/DisabledDoc.vue b/doc/textarea/DisabledDoc.vue
index dd51f217c..8d0730a14 100644
--- a/doc/textarea/DisabledDoc.vue
+++ b/doc/textarea/DisabledDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: 'Disabled',
             code: {
-                basic: `
-<Textarea v-model="value" rows="5" cols="30" disabled />`,
-                options: `
-<template>
+                basic: `<Textarea v-model="value" rows="5" cols="30" disabled />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" disabled />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" disabled />
     </div>
diff --git a/doc/textarea/FloatLabelDoc.vue b/doc/textarea/FloatLabelDoc.vue
index 8836f35ae..507c0b66e 100644
--- a/doc/textarea/FloatLabelDoc.vue
+++ b/doc/textarea/FloatLabelDoc.vue
@@ -17,13 +17,11 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <Textarea v-model="value" rows="5" cols="30" />
     <label>Username</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Textarea v-model="value" rows="5" cols="30" />
@@ -41,8 +39,7 @@ export default {
   }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Textarea v-model="value" rows="5" cols="30" />
diff --git a/doc/textarea/InvalidDoc.vue b/doc/textarea/InvalidDoc.vue
index f8295fcce..93befa1b7 100644
--- a/doc/textarea/InvalidDoc.vue
+++ b/doc/textarea/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<Textarea v-model="value" rows="5" cols="30" />`,
-                options: `
-<template>
+                basic: `<Textarea v-model="value" rows="5" cols="30" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" class="p-invalid" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30"   class="p-invalid" />
     </div>
diff --git a/doc/textarea/form/VeeValidateDoc.vue b/doc/textarea/form/VeeValidateDoc.vue
index 4b23d2420..be2ae5250 100644
--- a/doc/textarea/form/VeeValidateDoc.vue
+++ b/doc/textarea/form/VeeValidateDoc.vue
@@ -44,8 +44,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
         <span class="p-float-label">
             <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
@@ -56,8 +55,7 @@ export default {
     </form>
     <Toast />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -99,8 +97,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
diff --git a/doc/textarea/pt/PTDoc.vue b/doc/textarea/pt/PTDoc.vue
index 7e19c6980..1bb660988 100644
--- a/doc/textarea/pt/PTDoc.vue
+++ b/doc/textarea/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
         return {
             value: '',
             code: {
-                basic: `
-<Textarea
+                basic: `<Textarea
     v-model="value"
     :pt="{
         root: {
@@ -30,8 +29,7 @@ export default {
         }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Textarea
             v-model="value"
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Textarea
             v-model="value"
diff --git a/doc/textarea/theming/TailwindDoc.vue b/doc/textarea/theming/TailwindDoc.vue
index a7d20e5df..601c5dde4 100644
--- a/doc/textarea/theming/TailwindDoc.vue
+++ b/doc/textarea/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -31,8 +31,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
diff --git a/doc/theming/CSSModulesDoc.vue b/doc/theming/CSSModulesDoc.vue
index 51db35b32..f2a209c3b 100644
--- a/doc/theming/CSSModulesDoc.vue
+++ b/doc/theming/CSSModulesDoc.vue
@@ -17,8 +17,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-<style module>
+                basic: `<style module>
 .myinput {
     border-radius: 2rem;
     padding: 1rem 2rem;
@@ -29,8 +28,7 @@ export default {
             },
 
             code2: {
-                basic: `
-<template>
+                basic: `<template>
     <InputText :class="$style.myinput" placeholder="Search" />
 </template>
         `
diff --git a/doc/theming/CustomThemeDoc.vue b/doc/theming/CustomThemeDoc.vue
index 0f5fecf13..713a9ceaa 100644
--- a/doc/theming/CustomThemeDoc.vue
+++ b/doc/theming/CustomThemeDoc.vue
@@ -59,8 +59,7 @@ sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
         `
             },
             code2: {
-                basic: `
-import './assets/theme.css';
+                basic: `import './assets/theme.css';
         `
             }
         };
diff --git a/doc/theming/PrimeFlexDoc.vue b/doc/theming/PrimeFlexDoc.vue
index ea7acf932..4ae0c78af 100644
--- a/doc/theming/PrimeFlexDoc.vue
+++ b/doc/theming/PrimeFlexDoc.vue
@@ -21,8 +21,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
+                basic: `<div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
     <Button type="button" label="Button 1"></Button>
     <Button type="button" label="Button 2" severity="secondary"></Button>
     <Button type="button" label="Button 3" severity="help"></Button>
diff --git a/doc/theming/ScopedCSSDoc.vue b/doc/theming/ScopedCSSDoc.vue
index 91477b2e5..95cf5acda 100644
--- a/doc/theming/ScopedCSSDoc.vue
+++ b/doc/theming/ScopedCSSDoc.vue
@@ -19,8 +19,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-<style scoped>
+                basic: `<style scoped>
 :deep(.p-panel .p-panel-header) {
     background-color: var(--teal-500);
     border-color: var(--teal-500);
@@ -35,8 +34,7 @@ export default {
             },
 
             code2: {
-                basic: `
-<template>
+                basic: `<template>
     <Panel header="Scoped Panel">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
index 5050b9341..95e6e6bf8 100644
--- a/doc/theming/SwitchThemesDoc.vue
+++ b/doc/theming/SwitchThemesDoc.vue
@@ -46,8 +46,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {}
         `
             },
             code4: {
-                basic: `
-<link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">
+                basic: `<link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">
         `
             },
             code5: {
diff --git a/doc/tieredmenu/BasicDoc.vue b/doc/tieredmenu/BasicDoc.vue
index 8c268968b..e5c67b971 100644
--- a/doc/tieredmenu/BasicDoc.vue
+++ b/doc/tieredmenu/BasicDoc.vue
@@ -139,10 +139,8 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<TieredMenu :model="items" />`,
-                options: `
-<template>
+                basic: `<TieredMenu :model="items" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items" />
     </div>
@@ -282,8 +280,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items" />
     </div>
diff --git a/doc/tieredmenu/PopupDoc.vue b/doc/tieredmenu/PopupDoc.vue
index 09ac06b34..8b3aa8001 100644
--- a/doc/tieredmenu/PopupDoc.vue
+++ b/doc/tieredmenu/PopupDoc.vue
@@ -140,11 +140,9 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
+                basic: `<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
 <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
         <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
@@ -290,8 +288,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
         <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
diff --git a/doc/tieredmenu/pt/PTDoc.vue b/doc/tieredmenu/pt/PTDoc.vue
index 45cf18d0d..80987ec1a 100644
--- a/doc/tieredmenu/pt/PTDoc.vue
+++ b/doc/tieredmenu/pt/PTDoc.vue
@@ -144,8 +144,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<TieredMenu
+                basic: `<TieredMenu
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -153,8 +152,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <TieredMenu
             :model="items"
@@ -301,8 +299,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TieredMenu
             :model="items"
diff --git a/doc/tieredmenu/theming/TailwindDoc.vue b/doc/tieredmenu/theming/TailwindDoc.vue
index 81dd48c37..60ebcd873 100644
--- a/doc/tieredmenu/theming/TailwindDoc.vue
+++ b/doc/tieredmenu/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -68,8 +68,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <TieredMenu :model="items" />
     </div>
diff --git a/doc/timeline/AlignmentDoc.vue b/doc/timeline/AlignmentDoc.vue
index e08df8ba4..c7a1c2c0e 100644
--- a/doc/timeline/AlignmentDoc.vue
+++ b/doc/timeline/AlignmentDoc.vue
@@ -35,8 +35,7 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `
-<Timeline :value="events" class="w-full md:w-20rem">
+                basic: `<Timeline :value="events" class="w-full md:w-20rem">
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
@@ -53,8 +52,7 @@ export default {
         {{ slotProps.item.status }}
     </template>
 </Timeline>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap gap-6">
         <Timeline :value="events" class="w-full md:w-20rem">
             <template #content="slotProps">
@@ -90,8 +88,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-6">
         <Timeline :value="events" class="w-full md:w-20rem">
             <template #content="slotProps">
diff --git a/doc/timeline/BasicDoc.vue b/doc/timeline/BasicDoc.vue
index 72950c920..d6eab2b27 100644
--- a/doc/timeline/BasicDoc.vue
+++ b/doc/timeline/BasicDoc.vue
@@ -23,14 +23,12 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `
-<Timeline :value="events">
+                basic: `<Timeline :value="events">
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
 </Timeline>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Timeline :value="events">
             <template #content="slotProps">
@@ -54,8 +52,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Timeline :value="events">
             <template #content="slotProps">
diff --git a/doc/timeline/HorizontalDoc.vue b/doc/timeline/HorizontalDoc.vue
index 4e77afb35..600a1bb2c 100644
--- a/doc/timeline/HorizontalDoc.vue
+++ b/doc/timeline/HorizontalDoc.vue
@@ -31,8 +31,7 @@ export default {
         return {
             events: ['2020', '2021', '2022', '2023'],
             code: {
-                basic: `
-<Timeline :value="events" layout="horizontal" align="top">
+                basic: `<Timeline :value="events" layout="horizontal" align="top">
     <template #content="slotProps">
         {{ slotProps.item }}
     </template>
@@ -50,8 +49,7 @@ export default {
         {{ slotProps.item }}
     </template>
 </Timeline>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column gap-3">
         <Timeline :value="events" layout="horizontal" align="top">
             <template #content="slotProps">
@@ -83,8 +81,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column gap-3">
         <Timeline :value="events" layout="horizontal" align="top">
             <template #content="slotProps">
diff --git a/doc/timeline/OppositeDoc.vue b/doc/timeline/OppositeDoc.vue
index 5f199d950..267d29409 100644
--- a/doc/timeline/OppositeDoc.vue
+++ b/doc/timeline/OppositeDoc.vue
@@ -26,8 +26,7 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `
-<Timeline :value="events">
+                basic: `<Timeline :value="events">
     <template #opposite="slotProps">
         <small class="p-text-secondary">{{slotProps.item.date}}</small>
     </template>
@@ -35,8 +34,7 @@ export default {
         {{slotProps.item.status}}
     </template>
 </Timeline>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
@@ -63,8 +61,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
index 8c1dc7488..7ae7a6cac 100644
--- a/doc/timeline/TemplateDoc.vue
+++ b/doc/timeline/TemplateDoc.vue
@@ -43,8 +43,7 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `
-<Timeline :value="events" align="alternate" class="customized-timeline">
+                basic: `<Timeline :value="events" align="alternate" class="customized-timeline">
     <template #marker="slotProps">
         <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :style="{ backgroundColor: slotProps.item.color }">
             <i :class="slotProps.item.icon"></i>
@@ -69,8 +68,7 @@ export default {
         </Card>
     </template>
 </Timeline>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Timeline :value="events" align="alternate" class="customized-timeline">
             <template #marker="slotProps">
@@ -136,8 +134,7 @@ export default {
     }
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Timeline :value="events" align="alternate" class="customized-timeline">
             <template #marker="slotProps">
diff --git a/doc/timeline/pt/PTDoc.vue b/doc/timeline/pt/PTDoc.vue
index ce52d4123..fcd83985e 100644
--- a/doc/timeline/pt/PTDoc.vue
+++ b/doc/timeline/pt/PTDoc.vue
@@ -26,8 +26,7 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `
-<Timeline
+                basic: `<Timeline
     :value="events"
     :pt="{
         marker: { class: 'border-orange-400' }
@@ -37,8 +36,7 @@ export default {
         {{ slotProps.item.status }}
     </template>
 </Timeline>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Timeline
             :value="events"
@@ -67,8 +65,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Timeline
             :value="events"
diff --git a/doc/timeline/theming/TailwindDoc.vue b/doc/timeline/theming/TailwindDoc.vue
index 6323bc72f..093960e42 100644
--- a/doc/timeline/theming/TailwindDoc.vue
+++ b/doc/timeline/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -91,8 +91,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap gap-6">
         <Timeline :value="events" class="w-full md:w-80">
             <template #content="slotProps">
diff --git a/doc/toast/AccessibilityDoc.vue b/doc/toast/AccessibilityDoc.vue
index 8f0ccab7b..25ef9ebb4 100644
--- a/doc/toast/AccessibilityDoc.vue
+++ b/doc/toast/AccessibilityDoc.vue
@@ -41,16 +41,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
+                basic: `<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
 
 `
             },
             code2: {
-                basic: `
-<script setup>
+                basic: `<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/toast/BasicDoc.vue b/doc/toast/BasicDoc.vue
index 1d605388c..06cf12cde 100644
--- a/doc/toast/BasicDoc.vue
+++ b/doc/toast/BasicDoc.vue
@@ -16,11 +16,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Toast />
+                basic: `<Toast />
 <Button label="Show" @click="show()" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button label="Show" @click="show()" />
@@ -36,8 +34,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button label="Show" @click="show()" />
diff --git a/doc/toast/MultipleDoc.vue b/doc/toast/MultipleDoc.vue
index d0dc27623..1106faaad 100644
--- a/doc/toast/MultipleDoc.vue
+++ b/doc/toast/MultipleDoc.vue
@@ -16,14 +16,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Toast />
+                basic: `<Toast />
 <div class="flex flex-wrap gap-2">
     <Button label="Multiple" severity="warning" @click="showMultiple()" />
     <Button label="Clear" @click="clear()" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
@@ -48,8 +46,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
diff --git a/doc/toast/PositionDoc.vue b/doc/toast/PositionDoc.vue
index 15b8cedc4..1a30a4a83 100644
--- a/doc/toast/PositionDoc.vue
+++ b/doc/toast/PositionDoc.vue
@@ -17,8 +17,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Toast position="top-left" group="tl" />
+                basic: `<Toast position="top-left" group="tl" />
 <Toast position="bottom-left" group="bl" />
 <Toast position="bottom-right" group="br" />
 
@@ -27,8 +26,7 @@ export default {
     <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
     <Button label="Bottom Right" severity="success" @click="showBottomRight" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
@@ -57,8 +55,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
index 327443c65..f65cd1834 100644
--- a/doc/toast/SeverityDoc.vue
+++ b/doc/toast/SeverityDoc.vue
@@ -18,16 +18,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Toast />
+                basic: `<Toast />
 <div class="flex flex-wrap gap-2">
     <Button label="Success" severity="success" @click="showSuccess" />
     <Button label="Info" severity="info" @click="showInfo" />
     <Button label="Warn" severity="warning" @click="showWarn" />
     <Button label="Error" severity="danger" @click="showError" />
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
@@ -57,8 +55,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
diff --git a/doc/toast/StickyDoc.vue b/doc/toast/StickyDoc.vue
index 3797a91d6..62e7c6361 100644
--- a/doc/toast/StickyDoc.vue
+++ b/doc/toast/StickyDoc.vue
@@ -13,11 +13,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Toast />
+                basic: `<Toast />
 <Button @click="showSticky" label="Sticky" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button @click="showSticky" label="Sticky" />
@@ -33,8 +31,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button @click="showSticky" label="Sticky" />
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index 4cad53d9b..423e229c9 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -27,8 +27,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Toast position="bottom-center" group="bc">
+                basic: `<Toast position="bottom-center" group="bc">
     <template #message="slotProps">
         <div class="flex flex-column align-items-center" style="flex: 1">
             <div class="text-center">
@@ -43,8 +42,7 @@ export default {
     </template>
 </Toast>
 <Button @click="showTemplate" label="Confirm" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc">
             <template #message="slotProps">
@@ -73,8 +71,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc">
             <template #message="slotProps">
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index 1ff9475ba..ca831156c 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -14,16 +14,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-import {createApp} from 'vue';
+                basic: `import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
 
 const app = createApp(App);
 app.use(ToastService);`
             },
             code2: {
-                basic: `
-import { useToast } from 'primevue/usetoast';
+                basic: `import { useToast } from 'primevue/usetoast';
 
 const toast = useToast();`
             }
diff --git a/doc/toast/pt/PTDoc.vue b/doc/toast/pt/PTDoc.vue
index 89a043eec..b632b6ef3 100644
--- a/doc/toast/pt/PTDoc.vue
+++ b/doc/toast/pt/PTDoc.vue
@@ -17,16 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Toast
+                basic: `<Toast
     group="pt"
     :pt="{
         container: { class: 'bg-yellow-100' }
     }"
 />
 <Button label="Show" @click="show()" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast
             group="pt"
@@ -47,8 +45,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast
             group="pt"
diff --git a/doc/toast/theming/TailwindDoc.vue b/doc/toast/theming/TailwindDoc.vue
index f5673622d..4a355e969 100644
--- a/doc/toast/theming/TailwindDoc.vue
+++ b/doc/toast/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -54,8 +54,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
diff --git a/doc/togglebutton/AccessibilityDoc.vue b/doc/togglebutton/AccessibilityDoc.vue
index 5b60891f2..c5d054652 100644
--- a/doc/togglebutton/AccessibilityDoc.vue
+++ b/doc/togglebutton/AccessibilityDoc.vue
@@ -39,8 +39,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="rememberme">Remember Me</span>
+                basic: `<span id="rememberme">Remember Me</span>
 <ToggleButton aria-labelledby="rememberme" />
 
 <ToggleButton aria-label="Remember Me" />`
diff --git a/doc/togglebutton/BasicDoc.vue b/doc/togglebutton/BasicDoc.vue
index b1950e185..b101ad878 100644
--- a/doc/togglebutton/BasicDoc.vue
+++ b/doc/togglebutton/BasicDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<ToggleButton v-model="checked" />`,
-                options: `
-<template>
+                basic: `<ToggleButton v-model="checked" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" class="w-8rem" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" class="w-8rem" />
     </div>
diff --git a/doc/togglebutton/CustomizedDoc.vue b/doc/togglebutton/CustomizedDoc.vue
index e3e866c90..46b0f7896 100644
--- a/doc/togglebutton/CustomizedDoc.vue
+++ b/doc/togglebutton/CustomizedDoc.vue
@@ -14,11 +14,9 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
+                basic: `<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
     onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject"
             onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
@@ -34,8 +32,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject"
             onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
diff --git a/doc/togglebutton/DisabledDoc.vue b/doc/togglebutton/DisabledDoc.vue
index 2bd9929a0..d707022af 100644
--- a/doc/togglebutton/DisabledDoc.vue
+++ b/doc/togglebutton/DisabledDoc.vue
@@ -14,11 +14,9 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
+                basic: `<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
     class="w-full sm:w-10rem" aria-label="Confirmation" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
             class="w-full sm:w-10rem" aria-label="Confirmation" />
@@ -34,8 +32,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
             class="w-full sm:w-10rem" aria-label="Confirmation" />
diff --git a/doc/togglebutton/InvalidDoc.vue b/doc/togglebutton/InvalidDoc.vue
index a794086e5..427a88d3e 100644
--- a/doc/togglebutton/InvalidDoc.vue
+++ b/doc/togglebutton/InvalidDoc.vue
@@ -14,10 +14,8 @@ export default {
         return {
             checked: true,
             code: {
-                basic: `
-<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />`,
-                options: `
-<template>
+                basic: `<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
@@ -32,8 +30,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
diff --git a/doc/togglebutton/form/VeeValidateDoc.vue b/doc/togglebutton/form/VeeValidateDoc.vue
index 864d0873f..eb83a50c2 100644
--- a/doc/togglebutton/form/VeeValidateDoc.vue
+++ b/doc/togglebutton/form/VeeValidateDoc.vue
@@ -42,16 +42,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
         <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
@@ -91,8 +89,7 @@ export default {
     },
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
diff --git a/doc/togglebutton/pt/PTDoc.vue b/doc/togglebutton/pt/PTDoc.vue
index d9f43a558..55daca9b2 100644
--- a/doc/togglebutton/pt/PTDoc.vue
+++ b/doc/togglebutton/pt/PTDoc.vue
@@ -19,8 +19,7 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `
-<ToggleButton
+                basic: `<ToggleButton
     v-model="checked"
     :pt="{
         root: {
@@ -28,8 +27,7 @@ export default {
         }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton
             v-model="checked"
@@ -51,8 +49,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <ToggleButton
             v-model="checked"
diff --git a/doc/togglebutton/theming/TailwindDoc.vue b/doc/togglebutton/theming/TailwindDoc.vue
index 0e3d1ce24..4a64a5cae 100644
--- a/doc/togglebutton/theming/TailwindDoc.vue
+++ b/doc/togglebutton/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -49,8 +49,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <ToggleButton v-model="checked" class="w-8rem" />
     </div>
diff --git a/doc/toolbar/BasicDoc.vue b/doc/toolbar/BasicDoc.vue
index 18abf17e3..5798791e3 100644
--- a/doc/toolbar/BasicDoc.vue
+++ b/doc/toolbar/BasicDoc.vue
@@ -50,8 +50,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Toolbar>
+                basic: `<Toolbar>
     <template #start>
         <Button label="New" icon="pi pi-plus" class="mr-2" />
         <Button label="Upload" icon="pi pi-upload" severity="success" />
@@ -65,8 +64,7 @@ export default {
         <Button icon="pi pi-times" severity="danger" />
     </template>
 </Toolbar>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Toolbar>
             <template #start>
@@ -117,8 +115,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toolbar>
             <template #start>
diff --git a/doc/toolbar/pt/PTDoc.vue b/doc/toolbar/pt/PTDoc.vue
index 0ccfd78eb..66fa901d9 100644
--- a/doc/toolbar/pt/PTDoc.vue
+++ b/doc/toolbar/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<TabView>
+                basic: `<TabView>
     <Toolbar
         :pt="{
             root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
@@ -36,8 +35,7 @@ export default {
         </template>
     </Toolbar>
 </TabView>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Toolbar
             :pt="{
@@ -54,8 +52,7 @@ export default {
         </Toolbar>
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toolbar
             :pt="{
diff --git a/doc/toolbar/theming/TailwindDoc.vue b/doc/toolbar/theming/TailwindDoc.vue
index d341d0a79..ae63af77e 100644
--- a/doc/toolbar/theming/TailwindDoc.vue
+++ b/doc/toolbar/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -29,8 +29,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Toolbar>
             <template #start>
diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue
index e9923ee79..a25e915ad 100644
--- a/doc/tooltip/DelayDoc.vue
+++ b/doc/tooltip/DelayDoc.vue
@@ -13,16 +13,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />`,
-                options: `
-<template>
+                basic: `<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />`,
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
     </div>
diff --git a/doc/tooltip/EventDoc.vue b/doc/tooltip/EventDoc.vue
index 773b504b6..37f3dfc3b 100644
--- a/doc/tooltip/EventDoc.vue
+++ b/doc/tooltip/EventDoc.vue
@@ -14,18 +14,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
+                basic: `<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
 <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
         <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
         <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
diff --git a/doc/tooltip/PositionDoc.vue b/doc/tooltip/PositionDoc.vue
index 1be9ced13..07095b566 100644
--- a/doc/tooltip/PositionDoc.vue
+++ b/doc/tooltip/PositionDoc.vue
@@ -16,13 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+                basic: `<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
 <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
 <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
 <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
@@ -30,8 +28,7 @@ export default {
         <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
     </div>
 </template>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
diff --git a/doc/tooltip/TemplateDoc.vue b/doc/tooltip/TemplateDoc.vue
index c0c9b8aaf..409af237c 100644
--- a/doc/tooltip/TemplateDoc.vue
+++ b/doc/tooltip/TemplateDoc.vue
@@ -13,10 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />`,
-                options: `
-<template>
+                basic: `<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />`,
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
     </div>
@@ -31,8 +29,7 @@ export default {
     border-right-color: var(--pink-800);
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
     </div>
diff --git a/doc/tooltip/pt/PTDoc.vue b/doc/tooltip/pt/PTDoc.vue
index a1f29fb4c..0a0d8cfd5 100644
--- a/doc/tooltip/pt/PTDoc.vue
+++ b/doc/tooltip/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<InputText
+                basic: `<InputText
     v-tooltip.right="{
         value: \`PrimeVue Rocks!\`,
         pt: {
@@ -31,8 +30,7 @@ export default {
     type="text"
     placeholder="PassThrough Tooltip"
 />`,
-                options: `
-<div class="card flex flex-wrap justify-content-center gap-2">
+                options: `<div class="card flex flex-wrap justify-content-center gap-2">
     <InputText
         v-tooltip.right="{
             value: \`PrimeVue Rocks!\`,
diff --git a/doc/tooltip/theming/TailwindDoc.vue b/doc/tooltip/theming/TailwindDoc.vue
index a8871bd2d..f1c8188a5 100644
--- a/doc/tooltip/theming/TailwindDoc.vue
+++ b/doc/tooltip/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -48,8 +48,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
diff --git a/doc/tree/BasicDoc.vue b/doc/tree/BasicDoc.vue
index 58cd5f839..7591b68be 100644
--- a/doc/tree/BasicDoc.vue
+++ b/doc/tree/BasicDoc.vue
@@ -15,10 +15,8 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<Tree :value="nodes" class="w-full md:w-30rem"></Tree>`,
-                options: `
-<template>
+                basic: `<Tree :value="nodes" class="w-full md:w-30rem"></Tree>`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem"></Tree>
     </div>
@@ -38,8 +36,7 @@ export default {
     } 
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem"></Tree>
     </div>
diff --git a/doc/tree/ControlledDoc.vue b/doc/tree/ControlledDoc.vue
index 05f5018bb..cfc83f929 100644
--- a/doc/tree/ControlledDoc.vue
+++ b/doc/tree/ControlledDoc.vue
@@ -24,14 +24,12 @@ export default {
             nodes: null,
             expandedKeys: {},
             code: {
-                basic: `
-<div class="flex flex-wrap gap-2 mb-4">
+                basic: `<div class="flex flex-wrap gap-2 mb-4">
     <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
     <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
 </div>
 <Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-cente">
         <div class="flex flex-wrap gap-2 mb-4">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
@@ -77,8 +75,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-cente">
         <div class="flex flex-wrap gap-2 mb-4">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
diff --git a/doc/tree/EventsDoc.vue b/doc/tree/EventsDoc.vue
index 4e63827a4..a61342e5a 100644
--- a/doc/tree/EventsDoc.vue
+++ b/doc/tree/EventsDoc.vue
@@ -26,11 +26,9 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-30rem"
+                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-30rem"
     @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-30rem"></Tree>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@@ -66,8 +64,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
diff --git a/doc/tree/FilterDoc.vue b/doc/tree/FilterDoc.vue
index 19773dea6..e5dbb7cbc 100644
--- a/doc/tree/FilterDoc.vue
+++ b/doc/tree/FilterDoc.vue
@@ -21,11 +21,9 @@ export default {
             nodes: null,
             expandedKeys: {},
             code: {
-                basic: `
-<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
+                basic: `<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
 <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
         <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>
@@ -67,8 +65,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
         <Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>
diff --git a/doc/tree/LazyDoc.vue b/doc/tree/LazyDoc.vue
index 327af7a3f..a08d0931f 100644
--- a/doc/tree/LazyDoc.vue
+++ b/doc/tree/LazyDoc.vue
@@ -15,10 +15,8 @@ export default {
             nodes: null,
             loading: false,
             code: {
-                basic: `
-<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>`,
-                options: `
-<template>
+                basic: `<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
     </div>
@@ -87,8 +85,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
     </div>
diff --git a/doc/tree/TemplateDoc.vue b/doc/tree/TemplateDoc.vue
index 871ca5a59..3fe6a3512 100644
--- a/doc/tree/TemplateDoc.vue
+++ b/doc/tree/TemplateDoc.vue
@@ -42,8 +42,7 @@ export default {
                 }
             ],
             code: {
-                basic: `
-<Tree :value="nodes" class="w-full md:w-30rem">
+                basic: `<Tree :value="nodes" class="w-full md:w-30rem">
     <template #default="slotProps">
         <b>{{ slotProps.node.label }}</b>
     </template>
@@ -51,8 +50,7 @@ export default {
         <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
     </template>
 </Tree>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem">
             <template #default="slotProps">
@@ -95,8 +93,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem">
             <template #default="slotProps">
diff --git a/doc/tree/pt/PTDoc.vue b/doc/tree/pt/PTDoc.vue
index a4a924e6a..c15664e74 100644
--- a/doc/tree/pt/PTDoc.vue
+++ b/doc/tree/pt/PTDoc.vue
@@ -22,8 +22,7 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<Tree
+                basic: `<Tree
     :value="nodes"
     :pt="{
         root: { class: 'w-full md:w-30rem' },
@@ -32,8 +31,7 @@ export default {
         })
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Tree
             :value="nodes"
@@ -61,8 +59,7 @@ export default {
     } 
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Tree
             :value="nodes"
diff --git a/doc/tree/selection/CheckboxDoc.vue b/doc/tree/selection/CheckboxDoc.vue
index 46a9fa4c4..d76920bd4 100644
--- a/doc/tree/selection/CheckboxDoc.vue
+++ b/doc/tree/selection/CheckboxDoc.vue
@@ -21,10 +21,8 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>`,
-                options: `
-<template>
+                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
@@ -53,8 +51,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
diff --git a/doc/tree/selection/MultipleDoc.vue b/doc/tree/selection/MultipleDoc.vue
index ec43b1a61..7a60c6ca2 100644
--- a/doc/tree/selection/MultipleDoc.vue
+++ b/doc/tree/selection/MultipleDoc.vue
@@ -26,11 +26,9 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-30rem" 
+                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-30rem" 
     selectionMode="multiple" :metaKeySelection="checked"></Tree>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center justify-content-center">
         <div class="flex align-items-center mb-4 gap-2">
             <InputSwitch v-model="checked" inputId="input-metakey" />
@@ -56,8 +54,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center justify-content-center">
         <div class="flex align-items-center mb-4 gap-2">
             <InputSwitch v-model="checked" inputId="input-metakey" />
diff --git a/doc/tree/selection/SingleDoc.vue b/doc/tree/selection/SingleDoc.vue
index 8d6becc80..62f819bf6 100644
--- a/doc/tree/selection/SingleDoc.vue
+++ b/doc/tree/selection/SingleDoc.vue
@@ -16,10 +16,8 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>`,
-                options: `
-<template>
+                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
@@ -48,8 +46,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
diff --git a/doc/tree/theming/TailwindDoc.vue b/doc/tree/theming/TailwindDoc.vue
index 0b8206ab0..7345e1c56 100644
--- a/doc/tree/theming/TailwindDoc.vue
+++ b/doc/tree/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVuePrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVuePrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['NodeService']" embedded />
     </DocSectionText>
 </template>
@@ -84,8 +84,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
diff --git a/doc/treeselect/AccessibilityDoc.vue b/doc/treeselect/AccessibilityDoc.vue
index 9119535f0..906702890 100644
--- a/doc/treeselect/AccessibilityDoc.vue
+++ b/doc/treeselect/AccessibilityDoc.vue
@@ -96,8 +96,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="dd1">Options</span>
+                basic: `<span id="dd1">Options</span>
 <TreeSelect aria-labelledby="dd1" />
 
 <TreeSelect aria-label="Options" />`
diff --git a/doc/treeselect/BasicDoc.vue b/doc/treeselect/BasicDoc.vue
index 95540a7fd..ff4d20894 100644
--- a/doc/treeselect/BasicDoc.vue
+++ b/doc/treeselect/BasicDoc.vue
@@ -21,10 +21,8 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />`,
-                options: `
-<template>
+                basic: `<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
@@ -45,8 +43,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div> 
diff --git a/doc/treeselect/CheckboxDoc.vue b/doc/treeselect/CheckboxDoc.vue
index 7bf9cfd2c..69beb7e6e 100644
--- a/doc/treeselect/CheckboxDoc.vue
+++ b/doc/treeselect/CheckboxDoc.vue
@@ -31,10 +31,8 @@ export default {
 }`
             },
             code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />`,
-                options: `
-<template>
+                basic: `<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
@@ -55,8 +53,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
diff --git a/doc/treeselect/DisabledDoc.vue b/doc/treeselect/DisabledDoc.vue
index 9d871f9f8..a8e278373 100644
--- a/doc/treeselect/DisabledDoc.vue
+++ b/doc/treeselect/DisabledDoc.vue
@@ -16,10 +16,8 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `
-<TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />`,
-                options: `
-<template>
+                basic: `<TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
@@ -40,8 +38,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index b632d5a1c..9ee0151ec 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -20,13 +20,11 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `
-<span class="p-float-label">
+                basic: `<span class="p-float-label">
     <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
     <label>Tree Select</label>
 </span>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
@@ -50,8 +48,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
diff --git a/doc/treeselect/InvalidDoc.vue b/doc/treeselect/InvalidDoc.vue
index 7c5af593e..847b7ccad 100644
--- a/doc/treeselect/InvalidDoc.vue
+++ b/doc/treeselect/InvalidDoc.vue
@@ -17,10 +17,8 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `
-<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />`,
-                options: `
-<template>
+                basic: `<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
     </div>
@@ -41,8 +39,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
     </div>
diff --git a/doc/treeselect/MultipleDoc.vue b/doc/treeselect/MultipleDoc.vue
index 59eaeda46..37e3b4cda 100644
--- a/doc/treeselect/MultipleDoc.vue
+++ b/doc/treeselect/MultipleDoc.vue
@@ -28,10 +28,8 @@ export default {
 }`
             },
             code: {
-                basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />`,
-                options: `
-<template>
+                basic: `<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />`,
+                options: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
@@ -52,8 +50,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
diff --git a/doc/treeselect/form/VeeValidateDoc.vue b/doc/treeselect/form/VeeValidateDoc.vue
index 43cf9d0f5..97876e569 100644
--- a/doc/treeselect/form/VeeValidateDoc.vue
+++ b/doc/treeselect/form/VeeValidateDoc.vue
@@ -43,16 +43,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
         <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
             <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
@@ -101,8 +99,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
             <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
diff --git a/doc/treeselect/pt/PTDoc.vue b/doc/treeselect/pt/PTDoc.vue
index 53765a3a3..850c626e6 100644
--- a/doc/treeselect/pt/PTDoc.vue
+++ b/doc/treeselect/pt/PTDoc.vue
@@ -26,8 +26,7 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `
-<TreeSelect
+                basic: `<TreeSelect
     v-model="selectedValue"
     :options="nodes"
     placeholder="Select Item"
@@ -40,8 +39,7 @@ export default {
         }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect
             v-model="selectedValue"
@@ -74,8 +72,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <TreeSelect
             v-model="selectedValue"
diff --git a/doc/treeselect/theming/TailwindDoc.vue b/doc/treeselect/theming/TailwindDoc.vue
index 506925d36..6e271be03 100644
--- a/doc/treeselect/theming/TailwindDoc.vue
+++ b/doc/treeselect/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['NodeService']" embedded />
     </DocSectionText>
 </template>
@@ -119,8 +119,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-center">
         <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div> 
diff --git a/doc/treetable/BasicDoc.vue b/doc/treetable/BasicDoc.vue
index 4cfe9343c..5d91f336a 100644
--- a/doc/treetable/BasicDoc.vue
+++ b/doc/treetable/BasicDoc.vue
@@ -20,14 +20,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes">
+                basic: `<TreeTable :value="nodes">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" expander></Column>
@@ -51,8 +49,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/ColumnToggleDoc.vue b/doc/treetable/ColumnToggleDoc.vue
index f049b59f3..a3d1b095a 100644
--- a/doc/treetable/ColumnToggleDoc.vue
+++ b/doc/treetable/ColumnToggleDoc.vue
@@ -26,8 +26,7 @@ export default {
             selectedColumns: null,
             columns: null,
             code: {
-                basic: `
-<TreeTable :value="nodes">
+                basic: `<TreeTable :value="nodes">
     <template #header>
         <div style="text-align:left">
             <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
@@ -36,8 +35,7 @@ export default {
     <Column field="name" header="Name" :expander="true"></Column>
     <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
@@ -80,8 +78,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
diff --git a/doc/treetable/ControlledDoc.vue b/doc/treetable/ControlledDoc.vue
index b4a27a7af..13bdf17f4 100644
--- a/doc/treetable/ControlledDoc.vue
+++ b/doc/treetable/ControlledDoc.vue
@@ -22,15 +22,13 @@ export default {
             nodes: null,
             expandedKeys: {},
             code: {
-                basic: `
-<Button @click="toggleApplications" label="Toggle Applications" />
+                basic: `<Button @click="toggleApplications" label="Toggle Applications" />
 <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
         <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
@@ -66,8 +64,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
         <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
diff --git a/doc/treetable/DynamicColumnsDoc.vue b/doc/treetable/DynamicColumnsDoc.vue
index 65f4c7dd9..8a0844c89 100644
--- a/doc/treetable/DynamicColumnsDoc.vue
+++ b/doc/treetable/DynamicColumnsDoc.vue
@@ -19,12 +19,10 @@ export default {
             nodes: null,
             columns: null,
             code: {
-                basic: `
-<TreeTable :value="nodes">
+                basic: `<TreeTable :value="nodes">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
@@ -54,8 +52,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index 507501f47..cbb90f9b5 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -53,8 +53,7 @@ export default {
                 { label: 'Strict', value: 'strict' }
             ],
             code: {
-                basic: `
-<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+                basic: `<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
 <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
     <template #header>
         <div class="text-right">
@@ -80,8 +79,7 @@ export default {
         </template>
     </Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
@@ -134,8 +132,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
diff --git a/doc/treetable/LazyLoadDoc.vue b/doc/treetable/LazyLoadDoc.vue
index 168ea202b..42683cda6 100644
--- a/doc/treetable/LazyLoadDoc.vue
+++ b/doc/treetable/LazyLoadDoc.vue
@@ -29,15 +29,13 @@ export default {
             loading: false,
             totalRecords: 0,
             code: {
-                basic: `
-<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+                basic: `<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
     @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
             @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
@@ -136,8 +134,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div>
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
             @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
diff --git a/doc/treetable/ResponsiveDoc.vue b/doc/treetable/ResponsiveDoc.vue
index 1a5a98759..92f59e0cc 100644
--- a/doc/treetable/ResponsiveDoc.vue
+++ b/doc/treetable/ResponsiveDoc.vue
@@ -20,14 +20,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
+                basic: `<TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
             <Column field="name" header="Name" expander></Column>
@@ -51,8 +49,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/SizeDoc.vue b/doc/treetable/SizeDoc.vue
index 98232557e..2e1f19606 100644
--- a/doc/treetable/SizeDoc.vue
+++ b/doc/treetable/SizeDoc.vue
@@ -29,14 +29,12 @@ export default {
                 { label: 'Large', value: 'large', class: 'lg' }
             ],
             code: {
-                basic: `
-<TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
+                basic: `<TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
             <Column field="name" header="Name" expander></Column>
@@ -66,8 +64,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue
index 0e6f18ae6..277c142b2 100644
--- a/doc/treetable/TemplateDoc.vue
+++ b/doc/treetable/TemplateDoc.vue
@@ -36,8 +36,7 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes">
+                basic: `<TreeTable :value="nodes">
     <template #header>
         <div class="text-xl font-bold">File Viewer</div>
     </template>
@@ -58,8 +57,7 @@ export default {
         </div>
     </template>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
@@ -99,8 +97,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
diff --git a/doc/treetable/paginator/PaginatorBasicDoc.vue b/doc/treetable/paginator/PaginatorBasicDoc.vue
index c37acd50d..6d47f195a 100644
--- a/doc/treetable/paginator/PaginatorBasicDoc.vue
+++ b/doc/treetable/paginator/PaginatorBasicDoc.vue
@@ -18,14 +18,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
+                basic: `<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
             <Column field="name" header="Name" expander></Column>
@@ -72,8 +70,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/paginator/PaginatorTemplateDoc.vue b/doc/treetable/paginator/PaginatorTemplateDoc.vue
index a1c37e192..caea00b5c 100644
--- a/doc/treetable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/treetable/paginator/PaginatorTemplateDoc.vue
@@ -34,8 +34,7 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
+                basic: `<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
     paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
     currentPageReportTemplate="{first} to {last} of {totalRecords}">
     <template #paginatorstart>
@@ -48,8 +47,7 @@ export default {
         <Button type="button" icon="pi pi-download" text />
     </template>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
@@ -104,8 +102,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
diff --git a/doc/treetable/pt/PTDoc.vue b/doc/treetable/pt/PTDoc.vue
index 4c4fbd477..f2c68fba1 100644
--- a/doc/treetable/pt/PTDoc.vue
+++ b/doc/treetable/pt/PTDoc.vue
@@ -40,8 +40,7 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" sortMode="multiple">
+                basic: `<TreeTable :value="nodes" sortMode="multiple">
     <Column
         field="name"
         header="Name"
@@ -68,8 +67,7 @@ export default {
         }"
     />
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column
@@ -115,8 +113,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column
diff --git a/doc/treetable/resize/ExpandModeDoc.vue b/doc/treetable/resize/ExpandModeDoc.vue
index db00ee5dd..69af972c1 100644
--- a/doc/treetable/resize/ExpandModeDoc.vue
+++ b/doc/treetable/resize/ExpandModeDoc.vue
@@ -20,14 +20,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+                basic: `<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
@@ -51,8 +49,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/resize/FitModeDoc.vue b/doc/treetable/resize/FitModeDoc.vue
index 27aa61e69..ad7b08c18 100644
--- a/doc/treetable/resize/FitModeDoc.vue
+++ b/doc/treetable/resize/FitModeDoc.vue
@@ -23,14 +23,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+                basic: `<TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
@@ -54,8 +52,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/scroll/FlexibleScrollDoc.vue b/doc/treetable/scroll/FlexibleScrollDoc.vue
index 19d4c095d..8359f87bf 100644
--- a/doc/treetable/scroll/FlexibleScrollDoc.vue
+++ b/doc/treetable/scroll/FlexibleScrollDoc.vue
@@ -31,8 +31,7 @@ export default {
             nodes: null,
             dialogVisible: false,
             code: {
-                basic: `
-<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+                basic: `<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
     <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
         <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
@@ -43,8 +42,7 @@ export default {
         <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
     </template>
 </Dialog>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
@@ -75,8 +73,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
diff --git a/doc/treetable/scroll/FrozenColumnsDoc.vue b/doc/treetable/scroll/FrozenColumnsDoc.vue
index 882b0ac55..ba6849152 100644
--- a/doc/treetable/scroll/FrozenColumnsDoc.vue
+++ b/doc/treetable/scroll/FrozenColumnsDoc.vue
@@ -23,8 +23,7 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+                basic: `<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
     <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
     <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
     <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@@ -32,8 +31,7 @@ export default {
     <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
     <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
@@ -60,8 +58,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
diff --git a/doc/treetable/scroll/HorizontalScrollDoc.vue b/doc/treetable/scroll/HorizontalScrollDoc.vue
index 59a5af7b0..e068f8009 100644
--- a/doc/treetable/scroll/HorizontalScrollDoc.vue
+++ b/doc/treetable/scroll/HorizontalScrollDoc.vue
@@ -23,8 +23,7 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+                basic: `<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
     <Column field="name" header="Name" expander style="width: 250px"></Column>
     <Column field="size" header="Size" style="width: 250px"></Column>
     <Column field="type" header="Type 2" style="width: 250px"></Column>
@@ -32,8 +31,7 @@ export default {
     <Column field="type" header="Type 3" style="width: 250px"></Column>
     <Column field="size" header="Size 3" style="width: 250px"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander style="width: 250px"></Column>
@@ -60,8 +58,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander style="width: 250px"></Column>
diff --git a/doc/treetable/scroll/VerticalScrollDoc.vue b/doc/treetable/scroll/VerticalScrollDoc.vue
index 9101f27f3..e45fef966 100644
--- a/doc/treetable/scroll/VerticalScrollDoc.vue
+++ b/doc/treetable/scroll/VerticalScrollDoc.vue
@@ -20,14 +20,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="200px">
+                basic: `<TreeTable :value="nodes" scrollable scrollHeight="200px">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px">
             <Column field="name" header="Name" expander></Column>
@@ -51,8 +49,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
index 6bcd249dd..09dc1b1c3 100644
--- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -32,14 +32,12 @@ export default {
 }`
             },
             code: {
-                basic: `
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
+                basic: `<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
             <Column field="name" header="Name" expander></Column>
@@ -64,8 +62,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
index 3d07eb0bd..f7f87df67 100644
--- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -30,16 +30,14 @@ export default {
             selectedKey: null,
             metaKey: true,
             code: {
-                basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -69,8 +67,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/treetable/selection/RowSelectionEventsDoc.vue b/doc/treetable/selection/RowSelectionEventsDoc.vue
index 0f7dc5715..d0c909b89 100644
--- a/doc/treetable/selection/RowSelectionEventsDoc.vue
+++ b/doc/treetable/selection/RowSelectionEventsDoc.vue
@@ -21,15 +21,13 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
+                basic: `<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
     @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
@@ -64,8 +62,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue
index e1f18238b..444c44bb3 100644
--- a/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ b/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -30,16 +30,14 @@ export default {
             selectedKey: null,
             metaKey: true,
             code: {
-                basic: `
-<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -69,8 +67,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/treetable/sort/MultipleColumnsDoc.vue b/doc/treetable/sort/MultipleColumnsDoc.vue
index 4a7a9de81..163e5d88c 100644
--- a/doc/treetable/sort/MultipleColumnsDoc.vue
+++ b/doc/treetable/sort/MultipleColumnsDoc.vue
@@ -20,14 +20,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" sortMode="multiple">
+                basic: `<TreeTable :value="nodes" sortMode="multiple">
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column field="name" header="Name" sortable expander></Column>
@@ -51,8 +49,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/treetable/sort/RemovableSortDoc.vue b/doc/treetable/sort/RemovableSortDoc.vue
index de78b710c..1d8e2f0aa 100644
--- a/doc/treetable/sort/RemovableSortDoc.vue
+++ b/doc/treetable/sort/RemovableSortDoc.vue
@@ -20,14 +20,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes" sortMode="multiple" removableSort>
+                basic: `<TreeTable :value="nodes" sortMode="multiple" removableSort>
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple" removableSort>
             <Column field="name" header="Name" sortable expander></Column>
@@ -51,8 +49,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple" removableSort>
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/treetable/sort/SingleColumnDoc.vue b/doc/treetable/sort/SingleColumnDoc.vue
index 537a02bab..7c459da3c 100644
--- a/doc/treetable/sort/SingleColumnDoc.vue
+++ b/doc/treetable/sort/SingleColumnDoc.vue
@@ -20,14 +20,12 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `
-<TreeTable :value="nodes">
+                basic: `<TreeTable :value="nodes">
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
 </TreeTable>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" sortable expander></Column>
@@ -51,8 +49,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/treetable/theming/TailwindDoc.vue b/doc/treetable/theming/TailwindDoc.vue
index 89ce1f529..8634ed7e4 100644
--- a/doc/treetable/theming/TailwindDoc.vue
+++ b/doc/treetable/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['NodeService']" embedded />
     </DocSectionText>
 </template>
@@ -173,8 +173,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/tristatecheckbox/AccessibilityDoc.vue b/doc/tristatecheckbox/AccessibilityDoc.vue
index e9fe89c12..8eb02c649 100644
--- a/doc/tristatecheckbox/AccessibilityDoc.vue
+++ b/doc/tristatecheckbox/AccessibilityDoc.vue
@@ -41,8 +41,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<span id="chkbox1">Remember Me</span>
+                basic: `<span id="chkbox1">Remember Me</span>
 <TriStateCheckbox aria-labelledby="chkbox1" />
 
 <TriStateCheckbox aria-label="Remember Me" />`
diff --git a/doc/tristatecheckbox/BasicDoc.vue b/doc/tristatecheckbox/BasicDoc.vue
index 127498eb1..e6c991d69 100644
--- a/doc/tristatecheckbox/BasicDoc.vue
+++ b/doc/tristatecheckbox/BasicDoc.vue
@@ -16,8 +16,7 @@ export default {
             value: null,
             code: {
                 basic: `<TriStateCheckbox v-model="value" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
@@ -33,8 +32,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
diff --git a/doc/tristatecheckbox/DisabledDoc.vue b/doc/tristatecheckbox/DisabledDoc.vue
index ef1bdc2bb..6520e65cc 100644
--- a/doc/tristatecheckbox/DisabledDoc.vue
+++ b/doc/tristatecheckbox/DisabledDoc.vue
@@ -15,8 +15,7 @@ export default {
             value: null,
             code: {
                 basic: `<TriStateCheckbox v-model="value" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" disabled />
     </div>  
@@ -31,8 +30,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" disabled />
     </div>  
diff --git a/doc/tristatecheckbox/InvalidDoc.vue b/doc/tristatecheckbox/InvalidDoc.vue
index cd705852a..9445ec8b8 100644
--- a/doc/tristatecheckbox/InvalidDoc.vue
+++ b/doc/tristatecheckbox/InvalidDoc.vue
@@ -16,8 +16,7 @@ export default {
             value: null,
             code: {
                 basic: `<TriStateCheckbox v-model="value" class="p-invalid" />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" class="p-invalid" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
@@ -33,8 +32,7 @@ export default {
   }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" class="p-invalid" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
diff --git a/doc/tristatecheckbox/form/VeeValidateDoc.vue b/doc/tristatecheckbox/form/VeeValidateDoc.vue
index cb451ec12..f06efce0f 100644
--- a/doc/tristatecheckbox/form/VeeValidateDoc.vue
+++ b/doc/tristatecheckbox/form/VeeValidateDoc.vue
@@ -43,8 +43,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<div class="card flex justify-content-center">
+                basic: `<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
         <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
         <div>* I've read and accept the terms & conditions.</div>
@@ -52,8 +51,7 @@ export default {
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
@@ -93,8 +91,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
diff --git a/doc/tristatecheckbox/pt/PTDoc.vue b/doc/tristatecheckbox/pt/PTDoc.vue
index 2cd927ad4..772aa9eed 100644
--- a/doc/tristatecheckbox/pt/PTDoc.vue
+++ b/doc/tristatecheckbox/pt/PTDoc.vue
@@ -20,8 +20,7 @@ export default {
         return {
             value: null,
             code: {
-                basic: `
-<TriStateCheckbox
+                basic: `<TriStateCheckbox
     v-model="value"
     :pt="{
         checkbox: {
@@ -29,8 +28,7 @@ export default {
         }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox
             v-model="value"
@@ -53,8 +51,7 @@ export default {
     }
 }
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox
             v-model="value"
diff --git a/doc/tristatecheckbox/theming/TailwindDoc.vue b/doc/tristatecheckbox/theming/TailwindDoc.vue
index ed9ac701b..8ea5437d8 100644
--- a/doc/tristatecheckbox/theming/TailwindDoc.vue
+++ b/doc/tristatecheckbox/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
 </template>
@@ -40,8 +40,7 @@ export default {
 `
             },
             code2: {
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-col items-center">
         <TriStateCheckbox v-model="value" />
         <label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
diff --git a/doc/unstyled/ExampleDoc.vue b/doc/unstyled/ExampleDoc.vue
index 21d17dff2..95072ed30 100644
--- a/doc/unstyled/ExampleDoc.vue
+++ b/doc/unstyled/ExampleDoc.vue
@@ -25,16 +25,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Button label="Check" icon="pi pi-check" unstyled
+                basic: `<Button label="Check" icon="pi pi-check" unstyled
     :pt="{
         root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
         label: { class: 'text-white font-bold text-xl' },
         icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
     }"
 />`,
-                options: `
-<template>
+                options: `<template>
     <div class="card">
         <Button label="Check" icon="pi pi-check" unstyled
             :pt="{
@@ -48,8 +46,7 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <Button label="Check" icon="pi pi-check" unstyled
         :pt="{
             root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
diff --git a/doc/unstyled/SetupDoc.vue b/doc/unstyled/SetupDoc.vue
index 572c3424a..a57886e1b 100644
--- a/doc/unstyled/SetupDoc.vue
+++ b/doc/unstyled/SetupDoc.vue
@@ -22,8 +22,7 @@ const app = createApp(App);
 app.use(PrimeVue, { unstyled: true });`
             },
             code2: {
-                basic: `
-<Button label="Check" icon="pi pi-check" unstyled></Button>
+                basic: `<Button label="Check" icon="pi pi-check" unstyled></Button>
 `
             }
         };
diff --git a/doc/virtualscroller/BasicDoc.vue b/doc/virtualscroller/BasicDoc.vue
index bc731f1c0..9cdf9f3f9 100644
--- a/doc/virtualscroller/BasicDoc.vue
+++ b/doc/virtualscroller/BasicDoc.vue
@@ -21,14 +21,12 @@ export default {
         return {
             items: null,
             code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -50,8 +48,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/DelayDoc.vue b/doc/virtualscroller/DelayDoc.vue
index 0234f5b65..45d7cfe55 100644
--- a/doc/virtualscroller/DelayDoc.vue
+++ b/doc/virtualscroller/DelayDoc.vue
@@ -37,8 +37,7 @@ export default {
         return {
             items: null,
             code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
@@ -55,8 +54,7 @@ export default {
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">No Delay</span>
@@ -97,8 +95,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">No Delay</span>
diff --git a/doc/virtualscroller/GridDoc.vue b/doc/virtualscroller/GridDoc.vue
index 07ff425c0..9b0c6ed02 100644
--- a/doc/virtualscroller/GridDoc.vue
+++ b/doc/virtualscroller/GridDoc.vue
@@ -22,8 +22,7 @@ export default {
         return {
             items: null,
             code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
             <template v-for="(el, index) of item" :key="index">
@@ -32,8 +31,7 @@ export default {
         </div>
     </template>
 </VirtualScroller>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -59,8 +57,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/HorizontalDoc.vue b/doc/virtualscroller/HorizontalDoc.vue
index 35e3ef48e..15abd20fc 100644
--- a/doc/virtualscroller/HorizontalDoc.vue
+++ b/doc/virtualscroller/HorizontalDoc.vue
@@ -18,14 +18,12 @@ export default {
         return {
             items: null,
             code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
     </template>
 </VirtualScroller>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -56,8 +54,7 @@ export default {
     }
 }
 </style>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/LazyDoc.vue b/doc/virtualscroller/LazyDoc.vue
index 06d07f4be..d7e55e835 100644
--- a/doc/virtualscroller/LazyDoc.vue
+++ b/doc/virtualscroller/LazyDoc.vue
@@ -23,14 +23,12 @@ export default {
             lazyLoading: false,
             loadLazyTimeout: null,
             code: {
-                basic: `
-<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -77,8 +75,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/LoadingDoc.vue b/doc/virtualscroller/LoadingDoc.vue
index 44520ffa0..0d9751142 100644
--- a/doc/virtualscroller/LoadingDoc.vue
+++ b/doc/virtualscroller/LoadingDoc.vue
@@ -37,8 +37,7 @@ export default {
         return {
             items: null,
             code: {
-                basic: `
-<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
@@ -54,8 +53,7 @@ export default {
         </div>
     </template>
 </VirtualScroller>`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">Modal</span>
@@ -93,8 +91,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">Modal</span>
diff --git a/doc/virtualscroller/pt/PTDoc.vue b/doc/virtualscroller/pt/PTDoc.vue
index a80a89575..1c66816ad 100644
--- a/doc/virtualscroller/pt/PTDoc.vue
+++ b/doc/virtualscroller/pt/PTDoc.vue
@@ -25,8 +25,7 @@ export default {
         return {
             items: null,
             code: {
-                basic: `
-<VirtualScroller
+                basic: `<VirtualScroller
     :items="items"
     :itemSize="50"
     :pt="{
@@ -36,8 +35,7 @@ export default {
         }
     }"
 >`,
-                options: `
-<template>
+                options: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller
             :items="items"
@@ -64,8 +62,7 @@ export default {
     }
 };
 <\/script>`,
-                composition: `
-<template>
+                composition: `<template>
     <div class="card flex justify-content-center">
         <VirtualScroller
             :items="items"