From e7dab1199cccf48c2bb3ff54ee022df232a414b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 19 Mar 2021 12:46:06 +0300
Subject: [PATCH] csb updated for components

---
 src/views/avatar/AvatarDoc.vue                | 616 +++++++-------
 src/views/badge/BadgeDoc.vue                  | 345 ++++----
 src/views/blockui/BlockUIDoc.vue              | 368 ++++----
 src/views/carousel/CarouselDoc.vue            | 799 +++++++++---------
 src/views/chip/ChipDoc.vue                    | 389 +++++----
 src/views/inplace/InplaceDoc.vue              | 229 +++--
 src/views/liveeditor/LiveEditor.vue           |   6 +
 src/views/message/MessageDoc.vue              | 652 +++++++-------
 src/views/progressbar/ProgressBarDoc.vue      | 297 ++++---
 .../progressspinner/ProgressSpinnerDoc.vue    | 208 +++--
 src/views/ripple/RippleDoc.vue                | 179 ++--
 src/views/scrolltop/ScrollTopDoc.vue          | 301 ++++---
 src/views/skeleton/SkeletonDoc.vue            | 750 ++++++++--------
 src/views/steps/StepsDoc.vue                  |   2 +-
 src/views/tag/TagDoc.vue                      | 304 ++++---
 src/views/terminal/TerminalDoc.vue            | 328 ++++---
 src/views/toast/ToastDoc.vue                  | 568 ++++++-------
 17 files changed, 3090 insertions(+), 3251 deletions(-)

diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 966af8d02..89a365c98 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -1,16 +1,14 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="AvatarDemo" :sources="sources">
+		<h5>Import</h5>
 <pre v-code.script><code>
 import Avatar from 'primevue/avatar';
 import AvatarGroup from 'primevue/avatargroup';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
+		<h5>Getting Started</h5>
+		<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
 <pre v-code><code>
 &lt;Avatar label="P" /&gt;
 &lt;Avatar icon="pi pi-search" /&gt;
@@ -18,15 +16,15 @@ import AvatarGroup from 'primevue/avatargroup';
 
 </code></pre>
 
-				<h5>Sizes</h5>
-				<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
+		<h5>Sizes</h5>
+		<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
 <pre v-code><code>
 &lt;Avatar label="P" size="large"/&gt;
 
 </code></pre>
 
-				<h5>AvatarGroup</h5>
-				<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
+		<h5>AvatarGroup</h5>
+		<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
 <pre v-code><code>
 &lt;AvatarGroup&gt;
 	&lt;Avatar label="P" /&gt;
@@ -36,22 +34,22 @@ import AvatarGroup from 'primevue/avatargroup';
 &lt;/AvatarGroup&gt;
 </code></pre>
 
-				<h5>Shape</h5>
-				<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
+		<h5>Shape</h5>
+		<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
 <pre v-code><code>
 &lt;Avatar label="P" shape="circle"/&gt;
 
 </code></pre>
 
-				<h5>Badge</h5>
-				<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
+		<h5>Badge</h5>
+		<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
 <pre v-code><code>
 &lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
 
 </code></pre>
 
-				<h5>Templating</h5>
-				<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+		<h5>Templating</h5>
+		<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
 <pre v-code><code>
 &lt;Avatar&gt;
    Content
@@ -59,316 +57,310 @@ import AvatarGroup from 'primevue/avatargroup';
 
 </code></pre>
 
-				<h5>Properties of Avatar</h5>
-				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td>label</td>
-								<td>string</td>
-								<td>null</td>
-								<td>Defines the text to display.</td>
-							</tr>
-							<tr>
-								<td>icon</td>
-								<td>string</td>
-								<td>null</td>
-								<td>Defines the icon to display.</td>
-							</tr>
-							<tr>
-								<td>image</td>
-								<td>string</td>
-								<td>null</td>
-								<td>Defines the image to display.</td>
-							</tr>
-							<tr>
-								<td>size</td>
-								<td>string</td>
-								<td>null</td>
-								<td>Size of the element, valid options are "large" and "xlarge".</td>
-							</tr>
-							<tr>
-								<td>shape</td>
-								<td>string</td>
-								<td>square</td>
-								<td>Shape of the element, valid options are "square" and "circle".</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties of Avatar</h5>
+		<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>label</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Defines the text to display.</td>
+					</tr>
+					<tr>
+						<td>icon</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Defines the icon to display.</td>
+					</tr>
+					<tr>
+						<td>image</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Defines the image to display.</td>
+					</tr>
+					<tr>
+						<td>size</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Size of the element, valid options are "large" and "xlarge".</td>
+					</tr>
+					<tr>
+						<td>shape</td>
+						<td>string</td>
+						<td>square</td>
+						<td>Shape of the element, valid options are "square" and "circle".</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Properties of AvatarGroup</h5>
-				<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
+		<h5>Properties of AvatarGroup</h5>
+		<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
 				
-				<h5>Styling of Avatar</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-								<td>p-avatar</td>
-								<td>Container element.</td>
-                            </tr>
-							<tr>
-								<td>p-avatar-image</td>
-								<td>Container element in image mode.</td>
-                            </tr>
-							<tr>
-								<td>p-avatar-circle</td>
-								<td>Container element with a circle shape.</td>
-                            </tr>
-							<tr>
-								<td>p-avatar-text</td>
-								<td>Text of the Avatar.</td>
-                            </tr>
-							<tr>
-								<td>p-avatar-icon</td>
-								<td>Icon of the Avatar.</td>
-                            </tr>
-							<tr>
-								<td>p-avatar-lg</td>
-								<td>Container element with a large size.</td>
-                            </tr>
-							<tr>
-								<td>p-avatar-xl</td>
-								<td>Container element with an xlarge size.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling of Avatar</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+						<td>p-avatar</td>
+						<td>Container element.</td>
+                    </tr>
+					<tr>
+						<td>p-avatar-image</td>
+						<td>Container element in image mode.</td>
+                    </tr>
+					<tr>
+						<td>p-avatar-circle</td>
+						<td>Container element with a circle shape.</td>
+                    </tr>
+					<tr>
+						<td>p-avatar-text</td>
+						<td>Text of the Avatar.</td>
+                    </tr>
+					<tr>
+						<td>p-avatar-icon</td>
+						<td>Icon of the Avatar.</td>
+                    </tr>
+					<tr>
+						<td>p-avatar-lg</td>
+						<td>Container element with a large size.</td>
+                    </tr>
+					<tr>
+						<td>p-avatar-xl</td>
+						<td>Container element with an xlarge size.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling of AvatarGroup</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-								<td>p-avatar-group</td>
-								<td>Container element.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling of AvatarGroup</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+						<td>p-avatar-group</td>
+						<td>Container element.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<div class="p-d-flex p-jc-between">
-					<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-						<span>View on GitHub</span>
-					</a>
-					<LiveEditor name="AvatarDemo" :sources="sources" :directives="['Badge']" :components="['AvatarGroup']" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Label&lt;/h5&gt;
-			&lt;Avatar label="P" class="p-mr-2" size="xlarge" /&gt;
-			&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
-			&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-	&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Label - Circle&lt;/h5&gt;
-			&lt;Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" /&gt;
-			&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  /&gt;
-			&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  /&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-	&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Label - Badge&lt;/h5&gt;
-			&lt;Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" /&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Icon&lt;/h5&gt;
-			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
-			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
-			&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-	&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Icon - Circle&lt;/h5&gt;
-			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /&gt;
-			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /&gt;
-			&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-		&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Icon - Badge&lt;/h5&gt;
-			&lt;Avatar icon="pi pi-user" size="xlarge" v-badge="4"/&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Image&lt;/h5&gt;
-			&lt;Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" /&gt;
-			&lt;Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" /&gt;
-			&lt;Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" /&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-	&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Avatar Group&lt;/h5&gt;
-			&lt;AvatarGroup class="p-mb-3"&gt;
-				&lt;Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/&gt;
-				&lt;Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/&gt;
-				&lt;Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/&gt;
-				&lt;Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/&gt;
-				&lt;Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/&gt;
-				&lt;Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" /&gt;
-			&lt;/AvatarGroup&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-		&lt;div class="p-col-12 p-md-4"&gt;
-		&lt;div class="card"&gt;
-			&lt;h5&gt;Image - Badge&lt;/h5&gt;
-			&lt;Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" /&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-</template>
-</code></pre>
-
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+	</AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Label</h5>
-                        <Avatar label="P" class="p-mr-2" size="xlarge" />
-                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
-                    </div>
-                </div>
-
-                <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Label - Circle</h5>
-                        <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
-                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
-                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
-                    </div>
-                </div>
-
-                <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Label - Badge</h5>
-                        <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
-                    </div>
-                </div>
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="p-grid">
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Label</h5>
+                <Avatar label="P" class="p-mr-2" size="xlarge" />
+                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
             </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Label - Circle</h5>
+                <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+            </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Label - Badge</h5>
+                <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
+            </div>
+        </div>
+    </div>
            
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Icon</h5>
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
-                    </div>
-                </div>
-
-                <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Icon - Circle</h5>
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
-                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
-                    </div>
-                </div>
-
-                 <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Icon - Badge</h5>
-                        <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
-                    </div>
-                </div>
+    <div class="p-grid">
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
             </div>
+        </div>
 
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Image</h5>
-                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="p-mr-2" size="xlarge" shape="circle" />
-                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
-                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
-                    </div>
-                </div>
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Icon - Circle</h5>
+                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+            </div>
+        </div>
 
-                <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Avatar Group</h5>
-                        <AvatarGroup class="p-mb-3">
-                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
-                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
-                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
-                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
-                            <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
-                            <Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
-                        </AvatarGroup>
-                    </div>
-                </div>
+         <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Icon - Badge</h5>
+                <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
+            </div>
+        </div>
+    </div>
 
-                 <div class="p-col-12 p-md-4">
-                    <div class="card">
-                        <h5>Image - Badge</h5>
-                        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
-                    </div>
-                </div>
+    <div class="p-grid">
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Image</h5>
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="p-mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
+            </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Avatar Group</h5>
+                <AvatarGroup class="p-mb-3">
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
+                </AvatarGroup>
+            </div>
+        </div>
+
+    	 <div class="p-col-12 p-md-4">
+    	    <div class="card">
+    	        <h5>Image - Badge</h5>
+    	        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
+    	    </div>
+    	</div>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+`
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="p-grid">
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Label</h5>
+                <Avatar label="P" class="p-mr-2" size="xlarge" />
+                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+            </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Label - Circle</h5>
+                <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+            </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Label - Badge</h5>
+                <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
+            </div>
+        </div>
+    </div>
+           
+    <div class="p-grid">
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+            </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Icon - Circle</h5>
+                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+            </div>
+        </div>
+
+         <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Icon - Badge</h5>
+                <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
+            </div>
+        </div>
+    </div>
+
+    <div class="p-grid">
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Image</h5>
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="p-mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
+            </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Avatar Group</h5>
+                <AvatarGroup class="p-mb-3">
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
+                    <Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
+                </AvatarGroup>
+            </div>
+        </div>
+
+        <div class="p-col-12 p-md-4">
+            <div class="card">
+                <h5>Image - Badge</h5>
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
             </div>
         </div>
     </div>
@@ -376,13 +368,11 @@ export default {
 
 <script>
 export default {
-}`
+}
+<\\/script>`
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index 7af21ccb3..e4fa0b74e 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -1,29 +1,27 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Getting Started</h5>
-                <p>Badge can either be used as a standalone component or as a directive.</p>
+	<AppDoc name="BadgeDemo" :sources="sources">
+        <h5>Getting Started</h5>
+        <p>Badge can either be used as a standalone component or as a directive.</p>
 
-                <h6>Component</h6>
+        <h6>Component</h6>
 <pre v-code.script><code>
 import Badge from 'primevue/badge';
 
 </code></pre>
 
-				<p>Content of the badge is specified using the <i>value</i> property.</p>
+		<p>Content of the badge is specified using the <i>value</i> property.</p>
 <pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 
 </code></pre>
 
-                <h6>Directive</h6>
-                <pre v-code.script><code>
+        <h6>Directive</h6>
+        <pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
 </code></pre>
 
-				<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
+		<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
 <pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
@@ -31,22 +29,22 @@ Vue.directive('badge', BadgeDirective);
 
 </code></pre>
 
-                <p>Next step is attaching it to an element.</p>
+        <p>Next step is attaching it to an element.</p>
 <pre v-code><code>
 &lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
 
 </code></pre>
 
-                <h5>Severities</h5>
-                <p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property
-                to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
+        <h5>Severities</h5>
+        <p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property
+        to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
 
-				<ul>
-					<li>success</li>
-					<li>info</li>
-					<li>warning</li>
-					<li>danger</li>
-				</ul>
+		<ul>
+			<li>success</li>
+			<li>info</li>
+			<li>warning</li>
+			<li>danger</li>
+		</ul>
 
 <pre v-code><code>
 &lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
@@ -55,8 +53,8 @@ Vue.directive('badge', BadgeDirective);
 
 </code></pre>
 
-                <h5>Button Badges</h5>
-                <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
+        <h5>Button Badges</h5>
+        <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
 
 <pre v-code><code>
 &lt;Button type="button" label="Emails" badge="8" /&gt;
@@ -64,9 +62,9 @@ Vue.directive('badge', BadgeDirective);
 
 </code></pre>
 
-                <h5>Sizes</h5>
-                <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
-                sizes only apply to component mode.</p>
+        <h5>Sizes</h5>
+        <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
+        sizes only apply to component mode.</p>
 <pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 &lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
@@ -74,183 +72,178 @@ Vue.directive('badge', BadgeDirective);
 
 </code></pre>
 
-                <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
+        <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
 <pre v-code><code>
 &lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
 &lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;
 
 </code></pre>
 
-				<h5>Properties</h5>
-				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>value</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Value to display inside the badge.</td>
-                            </tr>
-							<tr>
-                                <td>severity</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Severity type of the badge.</td>
-                            </tr>
-							<tr>
-                                <td>size</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Size of the badge, valid options are "large" and "xlarge".</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value to display inside the badge.</td>
+                    </tr>
+					<tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Severity type of the badge.</td>
+                    </tr>
+					<tr>
+                        <td>size</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Size of the badge, valid options are "large" and "xlarge".</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-badge</td>
-                                <td>Badge element</td>
-                            </tr>
-                            <tr>
-                                <td>p-overlay-badge</td>
-                                <td>Wrapper of a badge and its target.</td>
-                            </tr>
-                            <tr>
-                                <td>p-badge-dot</td>
-                                <td>Badge element with no value.</td>
-                            </tr>
-                            <tr>
-                                <td>p-badge-success</td>
-                                <td>Badge element with success severity.</td>
-                            </tr>
-                            <tr>
-                                <td>p-badge-info</td>
-                                <td>Badge element with info severity.</td>
-                            </tr>
-                            <tr>
-                                <td>p-badge-warning</td>
-                                <td>Badge element with warning severity.</td>
-                            </tr>
-                            <tr>
-                                <td>p-badge-danger</td>
-                                <td>Badge element with danger severity.</td>
-                            </tr>
-                            <tr>
-                                <td>p-badge-lg</td>
-                                <td>Large badge element</td>
-                            </tr>
-                            <tr>
-                                <td>p-badge-xl</td>
-                                <td>Extra large badge element</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+				<tr>
+					<th>Name</th>
+					<th>Element</th>
+				</tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-badge</td>
+                        <td>Badge element</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlay-badge</td>
+                        <td>Wrapper of a badge and its target.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-dot</td>
+                        <td>Badge element with no value.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-success</td>
+                        <td>Badge element with success severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-info</td>
+                        <td>Badge element with info severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-warning</td>
+                        <td>Badge element with warning severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-danger</td>
+                        <td>Badge element with danger severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-lg</td>
+                        <td>Large badge element</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-xl</td>
+                        <td>Extra large badge element</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/badge" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="BadgeDemo" :sources="sources" :directives="['Badge']" :components="['Button']" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;h5&gt;Numbers&lt;/h5&gt;
-&lt;Badge value="2" class="p-mr-2"&gt;&lt;/Badge&gt;
-&lt;Badge value="8" severity="success" class="p-mr-2"&gt;&lt;/Badge&gt;
-&lt;Badge value="4" severity="info" class="p-mr-2"&gt;&lt;/Badge&gt;
-&lt;Badge value="12" severity="warning" class="p-mr-2"&gt;&lt;/Badge&gt;
-&lt;Badge value="3" severity="danger"&gt;&lt;/Badge&gt;
-
-&lt;h5 class="p-mb-4"&gt;Positioned Badge&lt;/h5&gt;
-&lt;i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"&gt;&lt;/i&gt;
-&lt;i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"&gt;&lt;/i&gt;
-&lt;i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger&gt;&lt;/i&gt;
-
-&lt;h5&gt;Button Badge&lt;/h5&gt;
-&lt;Button type="button" label="Emails" badge="8" class="p-mr-2" /&gt;
-&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
-
-&lt;h5&gt;Sizes&lt;/h5&gt;
-&lt;Badge value="2" class="p-mr-2"&gt;&lt;/Badge&gt;
-&lt;Badge value="4" class="p-mr-2" size="large" severity="warning"&gt;&lt;/Badge&gt;
-&lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
-</template>
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Numbers</h5>
-                <Badge value="2" class="p-mr-2"></Badge>
-                <Badge value="8" severity="success" class="p-mr-2"></Badge>
-                <Badge value="4" severity="info" class="p-mr-2"></Badge>
-                <Badge value="12" severity="warning" class="p-mr-2"></Badge>
-                <Badge value="3" severity="danger"></Badge>
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Numbers</h5>
+        <Badge value="2" class="p-mr-2"></Badge>
+        <Badge value="8" severity="success" class="p-mr-2"></Badge>
+        <Badge value="4" severity="info" class="p-mr-2"></Badge>
+        <Badge value="12" severity="warning" class="p-mr-2"></Badge>
+        <Badge value="3" severity="danger"></Badge>
 
-                <h5 class="p-mb-4">Positioned Badge</h5>
-                <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-                <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
-                <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
+        <h5 class="p-mb-4">Positioned Badge</h5>
+        <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+        <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+        <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
 
-                <h5>Button Badge</h5>
-                <Button type="button" label="Emails" badge="8" class="p-mr-2" />
-                <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+        <h5>Button Badge</h5>
+        <Button type="button" label="Emails" badge="8" class="p-mr-2" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
-                <h5>Sizes</h5>
-                <Badge value="2" class="p-mr-2"></Badge>
-                <Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
-                <Badge value="6" size="xlarge" severity="success"></Badge>
-            </div>
-        </div>
+        <h5>Sizes</h5>
+        <Badge value="2" class="p-mr-2"></Badge>
+        <Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
+        <Badge value="6" size="xlarge" severity="success"></Badge>
     </div>
 </template>
 
 <script>
 export default {
-}`
+}
+<\\/script>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Numbers</h5>
+        <Badge value="2" class="p-mr-2"></Badge>
+        <Badge value="8" severity="success" class="p-mr-2"></Badge>
+        <Badge value="4" severity="info" class="p-mr-2"></Badge>
+        <Badge value="12" severity="warning" class="p-mr-2"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+
+        <h5 class="p-mb-4">Positioned Badge</h5>
+        <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+        <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+        <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
+
+        <h5>Button Badge</h5>
+        <Button type="button" label="Emails" badge="8" class="p-mr-2" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+
+        <h5>Sizes</h5>
+        <Badge value="2" class="p-mr-2"></Badge>
+        <Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
+        <Badge value="6" size="xlarge" severity="success"></Badge>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>`
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue
index 73df34860..36bd916d1 100755
--- a/src/views/blockui/BlockUIDoc.vue
+++ b/src/views/blockui/BlockUIDoc.vue
@@ -1,17 +1,15 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="BlockUIDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import BlockUI from 'primevue/blockui';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked
-                    with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
-                </p>
+		<h5>Getting Started</h5>
+		<p>BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked
+            with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
+        </p>
 <pre v-code><code>
 &lt;BlockUI :blocked="blockedPanel"&gt;
     &lt;Panel header="Header"&gt;
@@ -40,196 +38,135 @@ export default {
 
 </code></pre>
 
-                <h5>Full Screen</h5>
-                <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
+        <h5>Full Screen</h5>
+        <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
 
 <pre v-code><code>
 &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
 
 </code></pre>
 
-                <h5>Properties</h5>
-                <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>blocked</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>Controls the blocked state.</td>
-                            </tr>
-                            <tr>
-                                <td>fullscreen</td>
-                                <td>menuitem</td>
-                                <td>null</td>
-                                <td>When enabled, the whole document gets blocked.</td>
-                            </tr>
-                             <tr>
-                                <td>baseZIndex</td>
-                                <td>number</td>
-                                <td>0</td>
-                                <td>Base zIndex value to use in layering.</td>
-                            </tr>
-                            <tr>
-                                <td>autoZIndex</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether to automatically manage layering.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>blocked</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Controls the blocked state.</td>
+                    </tr>
+                    <tr>
+                        <td>fullscreen</td>
+                        <td>menuitem</td>
+                        <td>null</td>
+                        <td>When enabled, the whole document gets blocked.</td>
+                    </tr>
+                     <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-                <h5>Events</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Parameters</th>
-							<th>Description</th>
-						</tr>
-						</thead>
-						<tbody>
-						<tr>
-							<td>block</td>
-							<td>-</td>
-							<td>Fired when the element gets blocked.</td>
-						</tr>
-						<tr>
-							<td>unblock</td>
-							<td>-</td>
-							<td>Fired when the element gets unblocked.</td>
-						</tr>
-						</tbody>
-					</table>
-				</div>
+        <h5>Events</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+				<tr>
+					<th>Name</th>
+					<th>Parameters</th>
+					<th>Description</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr>
+					<td>block</td>
+					<td>-</td>
+					<td>Fired when the element gets blocked.</td>
+				</tr>
+				<tr>
+					<td>unblock</td>
+					<td>-</td>
+					<td>Fired when the element gets unblocked.</td>
+				</tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-blockui</td>
-                                <td>Mask element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-blockui-document</td>
-                                <td>Mask element in full screen mode.</td>
-                            </tr>
-                        </tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-blockui</td>
+                        <td>Mask element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-blockui-document</td>
+                        <td>Mask element in full screen mode.</td>
+                    </tr>
+                </tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/blockui" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="BlockUIDemo" :sources="sources" :components="['Button', 'Panel']" />
-                </div>
-<pre v-code><code>
-&lt;h3&gt;Document&lt;/h3&gt;
-&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
-
-&lt;Button type="button" label="Block" @click="blockDocument()"&gt;&lt;/Button&gt;
-
-&lt;h3&gt;Panel&lt;/h3&gt;
-&lt;Button type="button" label="Block" @click="blockPanel()"&gt;&lt;/Button&gt;
-&lt;Button type="button" label="Unblock" @click="unblockPanel()"&gt;&lt;/Button&gt;
-
-&lt;BlockUI :blocked="blockedPanel"&gt;
-    &lt;Panel header="Godfather I" style="margin-top: 20px"&gt;
-        &lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
-    &lt;/Panel&gt;
-&lt;/BlockUI&gt;
-
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-    data() {
-        return {
-            blockedPanel: false,
-            blockedDocument: false
-        }
-    },
-    methods: {
-        blockDocument() {
-            this.blockedDocument = true;
-
-            setTimeout(() => {
-                this.blockedDocument = false;
-            }, 3000);
-        },
-        blockPanel() {
-            this.blockedPanel = true;
-        },
-        unblockPanel() {
-            this.blockedPanel = false;
-        }
-    }
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Document</h5>
-                <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Document</h5>
+        <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
 
-                <Button type="button" label="Block" @click="blockDocument()"></Button>
+        <Button type="button" label="Block" @click="blockDocument()"></Button>
 
-                <h5>Panel</h5>
-                <Button type="button" label="Block" @click="blockPanel()"></Button>
-                <Button type="button" label="Unblock" @click="unblockPanel()"></Button>
+        <h5>Panel</h5>
+        <Button type="button" label="Block" @click="blockPanel()"></Button>
+        <Button type="button" label="Unblock" @click="unblockPanel()"></Button>
 
-                <BlockUI :blocked="blockedPanel">
-                    <Panel header="Godfather I" style="margin-top: 20px">
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Panel>
-                </BlockUI>
-            </div>
-        </div>
+        <BlockUI :blocked="blockedPanel">
+            <Panel header="Godfather I" style="margin-top: 20px">
+                <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
+            </Panel>
+        </BlockUI>
     </div>
 </template>
 
@@ -256,8 +193,72 @@ export default {
             this.blockedPanel = false;
         }
     }
-}`,
-                    style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.p-panel p {
+    line-height: 1.5;
+    margin: 0;
+}
+
+button {
+    margin-right: .5rem;
+}
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Document</h5>
+        <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
+
+        <Button type="button" label="Block" @click="blockDocument()"></Button>
+
+        <h5>Panel</h5>
+        <Button type="button" label="Block" @click="blockPanel()"></Button>
+        <Button type="button" label="Unblock" @click="unblockPanel()"></Button>
+
+        <BlockUI :blocked="blockedPanel">
+            <Panel header="Godfather I" style="margin-top: 20px">
+                <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
+            </Panel>
+        </BlockUI>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    data() {
+        const blockedPanel = ref(false);
+        const blockedDocument = ref(false);
+        const blockDocument = () => {
+            blockedDocument.value = true;
+
+            setTimeout(() => {
+                blockedDocument.value = false;
+            }, 3000);
+        };
+        const blockPanel = () => {
+            blockedPanel.value = true;
+        };
+        const unblockPanel = () => {
+            blockedPanel.value = false;
+        };
+
+        return { blockedPanel, blockedDocument, blockDocument, blockPanel, unblockPanel }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
 .p-panel p {
     line-height: 1.5;
     margin: 0;
@@ -270,9 +271,6 @@ button {
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
-    }    
+    }  
 }
 </script>
\ No newline at end of file
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index b1f1847ed..3f36a6da1 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -1,15 +1,13 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" data="products-small">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
+		<h5>Getting Started</h5>
+		<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
 <pre v-code><code>
 &lt;Carousel :value="cars"&gt;
     &lt;template #item="slotProps"&gt;
@@ -18,8 +16,8 @@ import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-				<h5>Items per page and Scroll Items</h5>
-				<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
+		<h5>Items per page and Scroll Items</h5>
+		<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
 <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
 	&lt;template #item="slotProps"&gt;
@@ -28,9 +26,9 @@ import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-				<h5>Responsive</h5>
-				<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
-					objects whose breakpoint defines the max-width to apply the settings.</p>
+		<h5>Responsive</h5>
+		<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
+			objects whose breakpoint defines the max-width to apply the settings.</p>
 <pre v-code><code><template v-pre>
 &lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #header&gt;
@@ -83,8 +81,8 @@ data() {
 
 </code></pre>
 
-				<h5>Header and Footer</h5>
-				<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
+		<h5>Header and Footer</h5>
+		<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
 
 <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
@@ -101,8 +99,8 @@ data() {
 
 </code></pre>
 
-				<h5>Orientation</h5>
-				<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
+		<h5>Orientation</h5>
+		<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
 <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #item="slotProps"&gt;
@@ -112,8 +110,8 @@ data() {
 
 </code></pre>
 
-				<h5>AutoPlay and Circular</h5>
-				<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
+		<h5>AutoPlay and Circular</h5>
+		<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
 <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
 	&lt;template #header&gt;
@@ -126,265 +124,269 @@ data() {
 
 </code></pre>
 
-				<h5>Properties</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>value</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>An array of objects to display.</td>
-                            </tr>
-                            <tr>
-                                <td>page</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Index of the first item.</td>
-                            </tr>
-                            <tr>
-                                <td>circular</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Defines if scrolling would be infinite.</td>
-                            </tr>
-                            <tr>
-                                <td>autoplayInterval</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Time in milliseconds to scroll items automatically.</td>
-                            </tr>
-                            <tr>
-                                <td>numVisible</td>
-                                <td>number</td>
-                                <td>1</td>
-                                <td>Number of items per page.</td>
-                            </tr>
-                            <tr>
-                                <td>numScroll</td>
-                                <td>number</td>
-                                <td>1</td>
-                                <td>Number of items to scroll.</td>
-                            </tr>
-                            <tr>
-                                <td>responsiveOptions</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>An array of options for responsive design.</td>
-                            </tr>
-                            <tr>
-                                <td>orientation</td>
-                                <td>string</td>
-                                <td>horizontal</td>
-                                <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
-                            </tr>
-                            <tr>
-                                <td>verticalViewPortHeight</td>
-                                <td>string</td>
-                                <td>300px</td>
-                                <td>Height of the viewport in vertical layout.</td>
-                            </tr>
-                            <tr>
-                                <td>contentClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of main content.</td>
-                            </tr>
-                            <tr>
-                                <td>containerClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the viewport container.</td>
-                            </tr>
-                            <tr>
-                                <td>indicatorsContentClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the indicator items.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of objects to display.</td>
+                    </tr>
+                    <tr>
+                        <td>page</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>circular</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if scrolling would be infinite.</td>
+                    </tr>
+                    <tr>
+                        <td>autoplayInterval</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Time in milliseconds to scroll items automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>numVisible</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Number of items per page.</td>
+                    </tr>
+                    <tr>
+                        <td>numScroll</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Number of items to scroll.</td>
+                    </tr>
+                    <tr>
+                        <td>responsiveOptions</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>An array of options for responsive design.</td>
+                    </tr>
+                    <tr>
+                        <td>orientation</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
+                    </tr>
+                    <tr>
+                        <td>verticalViewPortHeight</td>
+                        <td>string</td>
+                        <td>300px</td>
+                        <td>Height of the viewport in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of main content.</td>
+                    </tr>
+                    <tr>
+                        <td>containerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the viewport container.</td>
+                    </tr>
+                    <tr>
+                        <td>indicatorsContentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the indicator items.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-                <h5>Slots</h5>
-				<div class="doc-tablewrapper">
-                    <table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>header</td>
-                                <td>-</td>
-                            </tr>
-                            <tr>
-                                <td>item</td>
-                                <td>data: Data of the component<br />
-                                    index: Index of the item</td>
-                            </tr>
-                            <tr>
-                                <td>footer</td>
-                                <td>-</td>
-                            </tr>
-						</tbody>
-					</table>
-                </div>
+        <h5>Slots</h5>
+		<div class="doc-tablewrapper">
+            <table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>item</td>
+                        <td>data: Data of the component<br />
+                            index: Index of the item</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+				</tbody>
+			</table>
+        </div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>p-carousel</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-carousel-header</td>
-                                <td>Header section.</td>
-                            </tr>
-                            <tr>
-                                <td>p-carousel-footer</td>
-                                <td>Footer section.</td>
-                            </tr>
-                            <tr>
-                                <td>p-carousel-content</td>
-                                <td>Main content element. It contains the container of the viewport.</td>
-                            </tr>
-                            <tr>
-                                <td>p-carousel-container</td>
-                                <td>Container of the viewport. It contains navigation buttons and viewport.</td>
-                            </tr>
-                            <tr>
-                                <td>p-carousel-items-content</td>
-                                <td>Viewport.</td>
-                            </tr>
-                            <tr>
-                                <td>p-carousel-indicators</td>
-                                <td>Container of the indicators.</td>
-                            </tr>
-                            <tr>
-                                <td>p-carousel-indicator</td>
-                                <td>Indicator element.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-carousel</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-header</td>
+                        <td>Header section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-footer</td>
+                        <td>Footer section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-content</td>
+                        <td>Main content element. It contains the container of the viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-container</td>
+                        <td>Container of the viewport. It contains navigation buttons and viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-items-content</td>
+                        <td>Viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-indicators</td>
+                        <td>Container of the indicators.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-indicator</td>
+                        <td>Indicator element.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/carousel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="CarouselDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button']" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;div class="card"&gt;
-&lt;Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
-    &lt;template #header&gt;
-        &lt;h5&gt;Basic&lt;/h5&gt;
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;div class="product-item"&gt;
-            &lt;div class="product-item-content"&gt;
-                &lt;div class="p-mb-3"&gt;
-                    &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
-                &lt;/div&gt;
-                &lt;div&gt;
-                    &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
-                    &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
-                    &lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
-                    &lt;div class="car-buttons p-mt-5"&gt;
-                        &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
-                        &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
-                        &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Carousel&gt;
-&lt;/div&gt;
-
-&lt;div class="card"&gt;
-&lt;Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"&gt;
-    &lt;template #header&gt;
-        &lt;h5&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h5&gt;
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;div class="product-item"&gt;
-            &lt;div class="product-item-content"&gt;
-                &lt;div class="p-mb-3"&gt;
-                    &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
-                &lt;/div&gt;
-                &lt;div&gt;
-                    &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
-                    &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
-                    &lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
-                    &lt;div class="car-buttons p-mt-5"&gt;
-                        &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
-                        &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
-                        &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Carousel&gt;
-&lt;/div&gt;
-
-&lt;div class="card"&gt;
-&lt;Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
-            style="max-width: 400px; margin-top: 2em"&gt;
-    &lt;template #header&gt;
-        &lt;h5&gt;Vertical&lt;/h5&gt;
-    &lt;/template&gt;
-    &lt;template #item="slotProps"&gt;
-        &lt;div class="product-item"&gt;
-            &lt;div class="product-item-content"&gt;
-                &lt;div class="p-mb-3"&gt;
-                    &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
-                &lt;/div&gt;
-                &lt;div&gt;
-                    &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
-                    &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
-                    &lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
-                    &lt;div class="car-buttons p-mt-5"&gt;
-                        &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
-                        &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
-                        &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/template&gt;
-&lt;/Carousel&gt;
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
-</code></pre>
 
-<pre v-code.script><code>
-import ProductService from '../../service/ProductService';
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+	<div class="card">
+        <div class="card">
+            <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+                <template #header>
+                    <h5>Basic</h5>
+                </template>
+                <template #item="slotProps">
+                    <div class="product-item">
+                        <div class="product-item-content">
+                            <div class="p-mb-3">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                            </div>
+                            <div>
+                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                <div class="car-buttons p-mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Carousel>
+        </div>
+
+        <div class="card">
+            <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
+                <template #header>
+                    <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
+                </template>
+                <template #item="slotProps">
+                    <div class="product-item">
+                        <div class="product-item-content">
+                            <div class="p-mb-3">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                            </div>
+                            <div>
+                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                <div class="car-buttons p-mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Carousel>
+        </div>
+
+        <div class="card">
+            <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
+                        style="max-width: 400px; margin-top: 2em">
+                <template #header>
+                    <h5>Vertical</h5>
+                </template>
+                <template #item="slotProps">
+                    <div class="product-item">
+                        <div class="product-item-content">
+                            <div class="p-mb-3">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                            </div>
+                            <div>
+                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                <div class="car-buttons p-mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Carousel>
+        </div>
+	</div>
+</template>
+
+<script>
+import ProductService from './service/ProductService';
 
 export default {
 	data() {
@@ -417,10 +419,9 @@ export default {
         this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
 	}
 }
+<\\/script>
 
-</code></pre>
-
-<pre v-code.css><code>
+<style lang="scss" scoped>
 .product-item {
     .product-item-content {
         border: 1px solid var(--surface-d);
@@ -435,143 +436,132 @@ export default {
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
     }
 }
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+	<div>
+        <div class="card">
+            <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+                <template #header>
+                    <h5>Basic</h5>
+                </template>
+                <template #item="slotProps">
+                    <div class="product-item">
+                        <div class="product-item-content">
+                            <div class="p-mb-3">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                            </div>
+                            <div>
+                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                <div class="car-buttons p-mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Carousel>
+        </div>
 
-</code></pre>
-			</TabPanel>
-		</TabView>
+        <div class="card">
+            <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
+                <template #header>
+                    <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
+                </template>
+                <template #item="slotProps">
+                    <div class="product-item">
+                        <div class="product-item-content">
+                            <div class="p-mb-3">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                            </div>
+                            <div>
+                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                <div class="car-buttons p-mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Carousel>
+        </div>
+
+        <div class="card">
+            <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
+                        style="max-width: 400px; margin-top: 2em">
+                <template #header>
+                    <h5>Vertical</h5>
+                </template>
+                <template #item="slotProps">
+                    <div class="product-item">
+                        <div class="product-item-content">
+                            <div class="p-mb-3">
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
+                            </div>
+                            <div>
+                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                                <div class="car-buttons p-mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Carousel>
+        </div>
 	</div>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
-export default {
-    data() {
-        return {
-            sources: {
-                'template': {
-                    content: `<template>
-	<div class="layout-content">
-		<div class="content-section implementation">
-            <div class="card">
-                <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
-                    <template #header>
-                        <h5>Basic</h5>
-                    </template>
-                    <template #item="slotProps">
-                        <div class="product-item">
-                            <div class="product-item-content">
-                                <div class="p-mb-3">
-                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
-                                </div>
-                                <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
-                                    <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </Carousel>
-            </div>
-
-            <div class="card">
-                <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
-                    <template #header>
-                        <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
-                    </template>
-                    <template #item="slotProps">
-                        <div class="product-item">
-                            <div class="product-item-content">
-                                <div class="p-mb-3">
-                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
-                                </div>
-                                <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
-                                    <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </Carousel>
-            </div>
-
-            <div class="card">
-                <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="352px"
-                            style="max-width: 400px; margin-top: 2em">
-                    <template #header>
-                        <h5>Vertical</h5>
-                    </template>
-                    <template #item="slotProps">
-                        <div class="product-item">
-                            <div class="product-item-content">
-                                <div class="p-mb-3">
-                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
-                                </div>
-                                <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
-                                    <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </Carousel>
-            </div>
-		</div>
-	</div>
-</template>
-
-<script>
-import ProductService from '../service/ProductService';
+import { ref, onMounted } from 'vue';
+import ProductService from './service/ProductService';
 
 export default {
-	data() {
-		return {
-            products: null,
-			responsiveOptions: [
-				{
-					breakpoint: '1024px',
-					numVisible: 3,
-					numScroll: 3
-				},
-				{
-					breakpoint: '600px',
-					numVisible: 2,
-					numScroll: 2
-				},
-				{
-					breakpoint: '480px',
-					numVisible: 1,
-					numScroll: 1
-				}
-			]
-		}
-	},
-    productService: null,
-	created() {
-        this.productService = new ProductService();
-	},
-	mounted() {
-        this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
+	setup() {
+        onMounted(() => {
+            productService.value.getProductsSmall().then(data => products.value = data.slice(0,9));
+        })
+        const products = ref(null);
+        const productService = ref(new ProductService());
+		const responsiveOptions = ref([
+			{
+				breakpoint: '1024px',
+				numVisible: 3,
+				numScroll: 3
+			},
+			{
+				breakpoint: '600px',
+				numVisible: 2,
+				numScroll: 2
+			},
+			{
+				breakpoint: '480px',
+				numVisible: 1,
+				numScroll: 1
+			}
+		]);
+
+        return {products, productService, responsiveOptions }
 	}
-}`,
-                    style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
 .product-item {
     .product-item-content {
         border: 1px solid var(--surface-d);
@@ -590,9 +580,6 @@ export default {
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index 9ea5418f0..5adb30bdc 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -1,15 +1,13 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="ChipDemo" :sources="sources">
+		<h5>Import</h5>
 <pre v-code.script><code>
 import Chip from 'primevue/chip';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Chip can display labels, icons and images.</p>
+		<h5>Getting Started</h5>
+		<p>Chip can display labels, icons and images.</p>
 <pre v-code><code>
 &lt;Chip label="Text Only" /&gt;
 &lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
@@ -17,16 +15,16 @@ import Chip from 'primevue/chip';
 
 </code></pre>
 
-				<h5>Removable</h5>
-				<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i>
-				event is available to get notified when a chip is hidden.</p>
+		<h5>Removable</h5>
+		<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i>
+		event is available to get notified when a chip is hidden.</p>
 <pre v-code><code>
 &lt;Chip label="Text" removable /&gt;
 
 </code></pre>
 
-				<h5>Templating</h5>
-				<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+		<h5>Templating</h5>
+		<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
 <pre v-code><code>
 &lt;Chip&gt;
    Content
@@ -34,206 +32,210 @@ import Chip from 'primevue/chip';
 
 </code></pre>
 
-				<h5>Properties</h5>
-				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td>label</td>
-								<td>string</td>
-								<td>null</td>
-								<td>Defines the text to display.</td>
-							</tr>
-							<tr>
-								<td>icon</td>
-								<td>string</td>
-								<td>null</td>
-								<td>Defines the icon to display.</td>
-							</tr>
-							<tr>
-								<td>image</td>
-								<td>string</td>
-								<td>null</td>
-								<td>Defines the image to display.</td>
-							</tr>
-							<tr>
-								<td>removable</td>
-								<td>boolean</td>
-								<td>false</td>
-								<td>Whether to display a remove icon.</td>
-							</tr>
-							<tr>
-								<td>removeIconClass</td>
-								<td>string</td>
-								<td>pi pi-times-circle</td>
-								<td>Icon of the remove element.</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>label</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Defines the text to display.</td>
+					</tr>
+					<tr>
+						<td>icon</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Defines the icon to display.</td>
+					</tr>
+					<tr>
+						<td>image</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Defines the image to display.</td>
+					</tr>
+					<tr>
+						<td>removable</td>
+						<td>boolean</td>
+						<td>false</td>
+						<td>Whether to display a remove icon.</td>
+					</tr>
+					<tr>
+						<td>removeIconClass</td>
+						<td>string</td>
+						<td>pi pi-times-circle</td>
+						<td>Icon of the remove element.</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Events</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>remove</td>
-                                <td>event: Browser event</td>
-                                <td>Callback to invoke when a chip is removed.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Events</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>remove</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when a chip is removed.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-								<td>p-chip</td>
-								<td>Container element.</td>
-                            </tr>
-							<tr>
-								<td>p-chip-image</td>
-								<td>Container element in image mode.</td>
-                            </tr>
-							<tr>
-								<td>p-chip-text</td>
-								<td>Text of the chip.</td>
-                            </tr>
-							<tr>
-								<td>pi-chip-remove-icon</td>
-								<td>Remove icon.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+						<td>p-chip</td>
+						<td>Container element.</td>
+                    </tr>
+					<tr>
+						<td>p-chip-image</td>
+						<td>Container element in image mode.</td>
+                    </tr>
+					<tr>
+						<td>p-chip-text</td>
+						<td>Text of the chip.</td>
+                    </tr>
+					<tr>
+						<td>pi-chip-remove-icon</td>
+						<td>Remove icon.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<div class="p-d-flex p-jc-between">
-					<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-						<span>View on GitHub</span>
-					</a>
-					<LiveEditor name="ChipDemo" :sources="sources" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;h5&gt;Basic&lt;/h5&gt;
-&lt;div class="p-d-flex p-ai-center"&gt;
-	&lt;Chip label="Action" class="p-mr-2" /&gt;
-	&lt;Chip label="Comedy" class="p-mr-2" /&gt;
-	&lt;Chip label="Mystery" class="p-mr-2" /&gt;
-	&lt;Chip label="Thriller" removable /&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Icon&lt;/h5&gt;
-&lt;div class="p-d-flex p-ai-center"&gt;
-	&lt;Chip label="Apple" icon="pi pi-apple" class="p-mr-2" /&gt;
-	&lt;Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" /&gt;
-	&lt;Chip label="Google" icon="pi pi-google" class="p-mr-2" /&gt;
-	&lt;Chip label="Microsoft" icon="pi pi-microsoft" removable /&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Image&lt;/h5&gt;
-&lt;div class="p-d-flex p-ai-center"&gt;
-	&lt;Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" /&gt;
-	&lt;Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" /&gt;
-	&lt;Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" /&gt;
-	&lt;Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable /&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Styling&lt;/h5&gt;
-&lt;div class="p-d-flex p-ai-center"&gt;
-	&lt;Chip label="Action" class="p-mr-2 custom-chip" /&gt;
-	&lt;Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" /&gt;
-	&lt;Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" /&gt;
-	&lt;Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable /&gt;
-&lt;/div&gt;
-</template>
-</code></pre>
-
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+	</AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Basic</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Action" class="p-mr-2" />
-                    <Chip label="Comedy" class="p-mr-2" />
-                    <Chip label="Mystery" class="p-mr-2" />
-                    <Chip label="Thriller" removable />
-                </div>
+				'options-api': {
+					tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <h5>Basic</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Action" class="p-mr-2 p-mb-2" />
+            <Chip label="Comedy" class="p-mr-2 p-mb-2" />
+            <Chip label="Mystery" class="p-mr-2 p-mb-2" />
+            <Chip label="Thriller" class="p-mb-2" removable />
+        </div>
 
-                <h5>Icon</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
-                    <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
-                    <Chip label="Google" icon="pi pi-google" class="p-mr-2" />
-                    <Chip label="Microsoft" icon="pi pi-microsoft" removable />
-                </div>
+        <h5>Icon</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
+            <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
+            <Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
+            <Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
+        </div>
 
-                <h5>Image</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
-                    <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
-                    <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
-                    <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" removable />
-                </div>
+        <h5>Image</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
+            <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
+        </div>
 
-                <h5>Styling</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Action" class="p-mr-2 custom-chip" />
-                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
-                    <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 custom-chip" />
-                    <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip" removable />
-                </div>
-            </div>
+        <h5>Styling</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
+            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
         </div>
     </div>
 </template>
 
 <script>
 export default {
-}`,
-					style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.p-chip.custom-chip {
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+}
+</style>`
+				},
+				'composition-api': {
+					tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <h5>Basic</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Action" class="p-mr-2 p-mb-2" />
+            <Chip label="Comedy" class="p-mr-2 p-mb-2" />
+            <Chip label="Mystery" class="p-mr-2 p-mb-2" />
+            <Chip label="Thriller" class="p-mb-2" removable />
+        </div>
+
+        <h5>Icon</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
+            <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
+            <Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
+            <Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
+        </div>
+
+        <h5>Image</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
+            <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
+        </div>
+
+        <h5>Styling</h5>
+        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
+            <Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
+            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+
+<style lang="scss" scoped>
 .p-chip.custom-chip {
     background: var(--primary-color);
     color: var(--primary-color-text);
@@ -242,9 +244,6 @@ export default {
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index 04dcf3b11..7e816e520 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -1,8 +1,6 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" >
+        <h5>Import</h5>
 <pre v-code.script><code>
 import Inplace from 'primevue/inplace';
 
@@ -184,134 +182,59 @@ export default {
 
 				<h5>Dependencies</h5>
 				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                <a href="https://github.com/primefaces/primevue/tree/master/src/views/inplace" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-                <LiveEditor name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" :components="['InputText', 'DataTable', 'Column']" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;h3&gt;Input&lt;/h3&gt;
-&lt;Inplace :closable="true"&gt;
-    &lt;template #display&gt;
-        &#123;&#123;text || 'Click to Edit'&#125;&#125;
-    &lt;/template&gt;
-    &lt;template #content&gt;
-        &lt;InputText v-model="text" autoFocus /&gt;
-    &lt;/template&gt;
-&lt;/Inplace&gt;
-
-&lt;h3&gt;Image&lt;/h3&gt;
-&lt;Inplace&gt;
-    &lt;template #display&gt;
-        &lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
-        &lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt;
-    &lt;/template&gt;
-    &lt;template #content&gt;
-        &lt;img src="demo/images/nature/nature1.jpg" /&gt;
-    &lt;/template&gt;
-&lt;/Inplace&gt;
-
-&lt;h3&gt;Lazy Data&lt;/h3&gt;
-&lt;Inplace @open="loadData"&gt;
-    &lt;template #display&gt;
-        View Data
-    &lt;/template&gt;
-    &lt;template #content&gt;
-        &lt;DataTable :value="products"&gt;
-            &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
-            &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
-            &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
-            &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
-        &lt;/DataTable&gt;
-    &lt;/template&gt;
-&lt;/Inplace&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-import ProductService from '../../service/ProductService';
-
-export default {
-     data() {
-        return {
-            text: null,
-            products: null
-        }
-    },
-    productService: null,
-    created() {
-        this.productService = new ProductService();
-    },
-    methods: {
-        loadData() {
-             this.productService.getProductsSmall().then(data => this.products = data);
-        }
-    }
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Input</h5>
-                <Inplace :closable="true">
-                    <template #display>
-                        {{text || 'Click to Edit'}}
-                    </template>
-                    <template #content>
-                        <InputText v-model="text" autoFocus />
-                    </template>
-                </Inplace>
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Input</h5>
+        <Inplace :closable="true">
+            <template #display>
+                {{text || 'Click to Edit'}}
+            </template>
+            <template #content>
+                <InputText v-model="text" autoFocus />
+            </template>
+        </Inplace>
 
-                <h5>Image</h5>
-                <Inplace>
-                    <template #display>
-                        <span class="pi pi-search" style="vertical-align: middle"></span>
-                        <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
-                    </template>
-                    <template #content>
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
-                    </template>
-                </Inplace>
+        <h5>Image</h5>
+        <Inplace>
+            <template #display>
+                <span class="pi pi-search" style="vertical-align: middle"></span>
+                <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
+            </template>
+            <template #content>
+                <img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
+            </template>
+        </Inplace>
 
-                <h5>Lazy Data</h5>
-                <Inplace @open="loadData">
-                    <template #display>
-                        View Data
-                    </template>
-                    <template #content>
-                        <DataTable :value="products">
-                            <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>
-                    </template>
-                </Inplace>
-            </div>
-        </div>
+        <h5>Lazy Data</h5>
+        <Inplace @open="loadData">
+            <template #display>
+                View Data
+            </template>
+            <template #content>
+                <DataTable :value="products" responsiveLayout="scroll" >
+                    <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>
+            </template>
+        </Inplace>
     </div>
 </template>
 
 <script>
-import ProductService from '../service/ProductService';
+import ProductService from './service/ProductService';
 
 export default {
      data() {
@@ -329,13 +252,73 @@ export default {
              this.productService.getProductsSmall().then(data => this.products = data);
         }
     }
-}`
+}
+<\\/script>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Input</h5>
+        <Inplace :closable="true">
+            <template #display>
+                {{text || 'Click to Edit'}}
+            </template>
+            <template #content>
+                <InputText v-model="text" autoFocus />
+            </template>
+        </Inplace>
+
+        <h5>Image</h5>
+        <Inplace>
+            <template #display>
+                <span class="pi pi-search" style="vertical-align: middle"></span>
+                <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
+            </template>
+            <template #content>
+                <img src="https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width="200" />
+            </template>
+        </Inplace>
+
+        <h5>Lazy Data</h5>
+        <Inplace @open="loadData">
+            <template #display>
+                View Data
+            </template>
+            <template #content>
+                <DataTable :value="products" responsiveLayout="scroll" >
+                    <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>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import ProductService from './service/ProductService';
+
+export default {
+    setup() {
+        const productService = ref(new ProductService());
+        const text = ref(null);
+        const products = ref(null);
+        const loadData = () => {
+            productService.value.getProductsSmall().then(data => products.value = data);
+        }
+
+        return { productService, text, products, loadData }
+    }
+}
+<\\/script>`
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index 63b481e79..ba7ef6e39 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -198,6 +198,7 @@ import Avatar from 'primevue/avatar';
 import AvatarGroup from 'primevue/avatargroup';
 import Badge from 'primevue/badge';
 import BadgeDirective from "primevue/badgedirective";
+import BlockUI from 'primevue/blockui';
 import Button from 'primevue/button';
 import Breadcrumb from 'primevue/breadcrumb';
 import Calendar from 'primevue/calendar';
@@ -247,6 +248,7 @@ import PanelMenu from 'primevue/panelmenu';
 import Password from 'primevue/password';
 import PickList from 'primevue/picklist';
 import ProgressBar from 'primevue/progressbar';
+import ProgressSpinner from 'primevue/progressspinner';
 import Rating from 'primevue/rating';
 import RadioButton from 'primevue/radiobutton';
 import Ripple from 'primevue/ripple';
@@ -269,6 +271,7 @@ import Toolbar from 'primevue/toolbar';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import Tag from 'primevue/tag';
+import Terminal from 'primevue/terminal';
 import Timeline from 'primevue/timeline';
 import ToggleButton from 'primevue/togglebutton';
 import Tooltip from 'primevue/tooltip';
@@ -299,6 +302,7 @@ app.component('AutoComplete', AutoComplete);
 app.component('Avatar', Avatar);
 app.component('AvatarGroup', AvatarGroup);
 app.component('Badge', Badge);
+app.component('BlockUI', BlockUI);
 app.component('Breadcrumb', Breadcrumb);
 app.component('Button', Button);
 app.component('Calendar', Calendar);
@@ -347,6 +351,7 @@ app.component('PanelMenu', PanelMenu);
 app.component('Password', Password);
 app.component('PickList', PickList);
 app.component('ProgressBar', ProgressBar);
+app.component('ProgressSpinner', ProgressSpinner);
 app.component('RadioButton', RadioButton);
 app.component('Rating', Rating);
 app.component('SelectButton', SelectButton);
@@ -364,6 +369,7 @@ app.component('TabView', TabView);
 app.component('TabPanel', TabPanel);
 app.component('Tag', Tag);
 app.component('Textarea', Textarea);
+app.component('Terminal', Terminal);
 app.component('TieredMenu', TieredMenu);
 app.component('Timeline', Timeline);
 app.component('Toast', Toast);
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 96475c3c0..c517d26f5 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -1,21 +1,19 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="MessageDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import Message from 'primevue/message';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Message component requires a content to display.</p>
+		<h5>Getting Started</h5>
+		<p>Message component requires a content to display.</p>
 <pre v-code><code>
 &lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt;
 
 </code></pre>
 
-                <p>Multiple messages can be displayed using the standard v-for directive.</p>
+        <p>Multiple messages can be displayed using the standard v-for directive.</p>
 
 <pre v-code><code><template v-pre>
 &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
@@ -35,38 +33,38 @@ data() {
 
 </code></pre>
 
-				<h5>Severities</h5>
-				<p>There are four possible values for the severity of a message. Default one is "info".</p>
+		<h5>Severities</h5>
+		<p>There are four possible values for the severity of a message. Default one is "info".</p>
 
-				<ul>
-					<li>success</li>
-					<li>info</li>
-					<li>warn</li>
-					<li>error</li>
-				</ul>
+		<ul>
+			<li>success</li>
+			<li>info</li>
+			<li>warn</li>
+			<li>error</li>
+		</ul>
 
-				<h5>Closable</h5>
-				<p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
+		<h5>Closable</h5>
+		<p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
 <pre v-code><code>
 &lt;Message severity="success" :closable="false"&gt;Order Submitted&lt;/Message&gt;
 
 </code></pre>
 
-				<h5>Sticky</h5>
-				<p>Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message
-                should be displayed which is 3000 ms by default.</p>
+		<h5>Sticky</h5>
+		<p>Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message
+        should be displayed which is 3000 ms by default.</p>
 <pre v-code><code>
 &lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
 
 </code></pre>
 
-				<h5>Inline Message Component</h5>
+		<h5>Inline Message Component</h5>
 <pre v-code.script><code>
 import InlineMessage from 'primevue/inlinemessage';
 
 </code></pre>
 
-				<p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
+		<p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
 <pre v-code><code>
 &lt;InputText placeholder="Username" class="p-invalid" /&gt;
 &lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
@@ -74,328 +72,236 @@ import InlineMessage from 'primevue/inlinemessage';
 </code></pre>
 
 
-				<h5>Properties of Message</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>severity</td>
-                                <td>string</td>
-                                <td>info</td>
-                                <td>Severity level of the message.</td>
-                            </tr>
-                            <tr>
-                                <td>closable</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether the message can be closed manually using the close icon.</td>
-                            </tr>
-                            <tr>
-                                <td>sticky</td>
-                                <td>element</td>
-                                <td>null</td>
-                                <td>When enabled, message is not removed automatically.</td>
-                            </tr>
-                            <tr>
-                                <td>life</td>
-                                <td>number</td>
-                                <td>3000</td>
-                                <td>Delay in milliseconds to close the message automatically.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties of Message</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>info</td>
+                        <td>Severity level of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>closable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the message can be closed manually using the close icon.</td>
+                    </tr>
+                    <tr>
+                        <td>sticky</td>
+                        <td>element</td>
+                        <td>null</td>
+                        <td>When enabled, message is not removed automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>life</td>
+                        <td>number</td>
+                        <td>3000</td>
+                        <td>Delay in milliseconds to close the message automatically.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-                <h5>Properties of ValidationMessage</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>severity</td>
-                                <td>string</td>
-                                <td>info</td>
-                                <td>Severity level of the message.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+        <h5>Properties of ValidationMessage</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>info</td>
+                        <td>Severity level of the message.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-                <h5>Events of Message</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>close</td>
-                                <td>event: Browser event</td>
-                                <td>Callback to invoke when a message is closed.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+        <h5>Events of Message</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>close</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when a message is closed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 
-                <strong>Message</strong>
-                <div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-messages</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-messages-info</td>
-                                <td>Container element when displaying info messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-messages-warn</td>
-                                <td>Container element when displaying warning messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-messages-error</td>
-                                <td>Container element when displaying error messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-messages-success</td>
-                                <td>Container element when displaying success messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-messages-close</td>
-                                <td>Close icon.</td>
-                            </tr>
-                            <tr>
-                                <td>p-messages-icon</td>
-                                <td>Severity icon.</td>
-                            </tr>
-                            <tr>
-                                <td>p-messages-text</td>
-                                <td>Content of a message.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+        <strong>Message</strong>
+        <div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-messages</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-messages-info</td>
+                        <td>Container element when displaying info messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-messages-warn</td>
+                        <td>Container element when displaying warning messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-messages-error</td>
+                        <td>Container element when displaying error messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-messages-success</td>
+                        <td>Container element when displaying success messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-messages-close</td>
+                        <td>Close icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-messages-icon</td>
+                        <td>Severity icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-messages-text</td>
+                        <td>Content of a message.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-                <strong>InlineMessage</strong>
-                <div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-inline-message</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-inline-message-info</td>
-                                <td>Container element when displaying info messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-inline-message-warn</td>
-                                <td>Container element when displaying warning messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-inline-message-error</td>
-                                <td>Container element when displaying error messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-inline-message-success</td>
-                                <td>Container element when displaying success messages.</td>
-                            </tr>
-                            <tr>
-                                <td>p-inline-message-icon</td>
-                                <td>Severity icon.</td>
-                            </tr>
-                           <tr>
-                                <td>p-inline-message-text</td>
-                                <td>Content of a message.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+        <strong>InlineMessage</strong>
+        <div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-inline-message</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-info</td>
+                        <td>Container element when displaying info messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-warn</td>
+                        <td>Container element when displaying warning messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-error</td>
+                        <td>Container element when displaying error messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-success</td>
+                        <td>Container element when displaying success messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-icon</td>
+                        <td>Severity icon.</td>
+                    </tr>
+                   <tr>
+                        <td>p-inline-message-text</td>
+                        <td>Content of a message.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/message" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="MessageDemo" :sources="sources" :components="['InlineMessage', 'Button']" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;h5&gt;Severities&lt;/h5&gt;
-&lt;Message severity="success"&gt;Success Message Content&lt;/Message&gt;
-&lt;Message severity="info"&gt;Info Message Content&lt;/Message&gt;
-&lt;Message severity="warn"&gt;Warning Message Content&lt;/Message&gt;
-&lt;Message severity="error"&gt;Error Message Content&lt;/Message&gt;
-
-&lt;h5&gt;Dynamic&lt;/h5&gt;
-&lt;Button label="Show" @click="addMessages()" /&gt;
-&lt;transition-group name="p-message" tag="div"&gt;
-    &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.id"&gt;{{msg.content}}&lt;/Message&gt;
-&lt;/transition-group&gt;
-
-&lt;h5&gt;Auto Dismiss&lt;/h5&gt;
-&lt;Message severity="warn" :life="3000" :sticky="false"&gt;This message will hide in 3 seconds.&lt;/Message&gt;
-
-&lt;h5&gt;Inline Messages&lt;/h5&gt;
-&lt;p&gt;Message component is used to display inline messages mostly within forms.&lt;/p&gt;
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;InlineMessage severity="info"&gt;Message Content&lt;/InlineMessage&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;InlineMessage severity="success"&gt;Message Content&lt;/InlineMessage&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;InlineMessage severity="warn"&gt;Message Content&lt;/InlineMessage&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;InlineMessage severity="error"&gt;Message Content&lt;/InlineMessage&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;h5&gt;Validation Message&lt;/h5&gt;
-&lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt;
-    &lt;label for="username" class="p-sr-only"&gt;Username&lt;/label&gt;
-    &lt;InputText id="username" placeholder="Username" class="p-invalid" /&gt;
-    &lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt;
-&lt;/div&gt;
-&lt;div class="p-formgroup-inline"&gt;
-    &lt;label for="email" class="p-sr-only"&gt;email&lt;/label&gt;
-    &lt;InputText id="email" placeholder="Email" class="p-invalid" /&gt;
-    &lt;InlineMessage /&gt;
-&lt;/div&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			messages: [],
-			count: 0
-		}
-	},
-	methods: {
-		addMessages() {
-			this.messages = [
-				{severity: 'info', content: 'Dynamic Info Message', id: this.count++},
-				{severity: 'success', content: 'Dynamic Success Message', id: this.count++},
-				{severity: 'warn', content: 'Dynamic Warning Message', id: this.count++}
-			]
-		}
-	}
-}
-
-</code></pre>
-
-<pre v-code.css><code>
-button.p-button {
-	margin-right: .5rem;
-}
-
-.p-inputtext {
-	margin-right: .25rem;
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Severities</h5>
-                <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-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Severities</h5>
+        <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>
 
-                <h5>Dynamic</h5>
-                <Button label="Show" @click="addMessages()" />
-                <transition-group name="p-message" tag="div">
-                    <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
-                </transition-group>
+        <h5>Dynamic</h5>
+        <Button label="Show" @click="addMessages()" />
+        <transition-group name="p-message" tag="div">
+            <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
+        </transition-group>
 
-                <h5>Inline Messages</h5>
-                <p>Message component is used to display inline messages mostly within forms.</p>
-                <div class="p-grid">
-                    <div class="p-col-12 p-md-3">
-                        <InlineMessage severity="info">Message Content</InlineMessage>
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <InlineMessage severity="success">Message Content</InlineMessage>
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <InlineMessage severity="warn">Message Content</InlineMessage>
-                    </div>
-                    <div class="p-col-12 p-md-3">
-                        <InlineMessage severity="error">Message Content</InlineMessage>
-                    </div>
-                </div>
-
-                <h5>Auto Dismiss</h5>
-                <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
-
-                <h5>Validation Message</h5>
-                <div class="p-formgroup-inline" style="margin-bottom:.5rem">
-                    <label for="username" class="p-sr-only">Username</label>
-                    <InputText id="username" placeholder="Username" class="p-invalid" />
-                    <InlineMessage>Username is required</InlineMessage>
-                </div>
-                <div class="p-formgroup-inline">
-                    <label for="email" class="p-sr-only">email</label>
-                    <InputText id="email" placeholder="Email" class="p-invalid" />
-                    <InlineMessage />
-                </div>
+        <h5>Inline Messages</h5>
+        <p>Message component is used to display inline messages mostly within forms.</p>
+        <div class="p-grid">
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="info">Message Content</InlineMessage>
             </div>
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="success">Message Content</InlineMessage>
+            </div>
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="warn">Message Content</InlineMessage>
+            </div>
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="error">Message Content</InlineMessage>
+            </div>
+        </div>
+
+        <h5>Auto Dismiss</h5>
+        <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
+
+        <h5>Validation Message</h5>
+        <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+            <label for="username" class="p-sr-only">Username</label>
+            <InputText id="username" placeholder="Username" class="p-invalid" />
+            <InlineMessage>Username is required</InlineMessage>
+        </div>
+        <div class="p-formgroup-inline">
+            <label for="email" class="p-sr-only">email</label>
+            <InputText id="email" placeholder="Email" class="p-invalid" />
+            <InlineMessage />
         </div>
     </div>
 </template>
@@ -417,8 +323,91 @@ export default {
             ]
         }
     }
-}`,
-                    style: `<style scoped>
+}
+<\\/script>
+
+<style scoped>
+button.p-button {
+    margin-right: .5rem;
+}
+
+.p-inputtext {
+    margin-right: .5rem;
+}
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Severities</h5>
+        <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>
+
+        <h5>Dynamic</h5>
+        <Button label="Show" @click="addMessages()" />
+        <transition-group name="p-message" tag="div">
+            <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{msg.content}}</Message>
+        </transition-group>
+
+        <h5>Inline Messages</h5>
+        <p>Message component is used to display inline messages mostly within forms.</p>
+        <div class="p-grid">
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="info">Message Content</InlineMessage>
+            </div>
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="success">Message Content</InlineMessage>
+            </div>
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="warn">Message Content</InlineMessage>
+            </div>
+            <div class="p-col-12 p-md-3">
+                <InlineMessage severity="error">Message Content</InlineMessage>
+            </div>
+        </div>
+
+        <h5>Auto Dismiss</h5>
+        <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
+
+        <h5>Validation Message</h5>
+        <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+            <label for="username" class="p-sr-only">Username</label>
+            <InputText id="username" placeholder="Username" class="p-invalid" />
+            <InlineMessage>Username is required</InlineMessage>
+        </div>
+        <div class="p-formgroup-inline">
+            <label for="email" class="p-sr-only">email</label>
+            <InputText id="email" placeholder="Email" class="p-invalid" />
+            <InlineMessage />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const messages = ref([]);
+        const count = ref(0);
+        const addMessages = () => {
+            messages.value = [
+                {severity: 'info', content: 'Dynamic Info Message', id: count.value++},
+                {severity: 'success', content: 'Dynamic Success Message', id: count.value++},
+                {severity: 'warn', content: 'Dynamic Warning Message', id: count.value++}
+            ]
+        };
+
+        return { messages, count, addMessages }
+    }
+}
+<\\/script>
+
+<style scoped>
 button.p-button {
     margin-right: .5rem;
 }
@@ -430,9 +419,6 @@ button.p-button {
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 6cd206046..67e327dc1 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -1,15 +1,13 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="ProgressBarDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import ProgressBar from 'primevue/progressbar';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
+		<h5>Getting Started</h5>
+		<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
 <pre v-code><code>
 &lt;ProgressBar :value="value" /&gt;
 
@@ -23,14 +21,14 @@ data() {
 
 </code></pre>
 
-				<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
+		<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
 <pre v-code><code>
 &lt;ProgressBar mode="indeterminate"/&gt;
 
 </code></pre>
 
-                <h5>Slot</h5>
-                <p>A custom label can be placed inside the progress bar via the default slot.</p>
+        <h5>Slot</h5>
+        <p>A custom label can be placed inside the progress bar via the default slot.</p>
 <pre v-code><code><template v-pre>
 &lt;ProgressBar :value="value"&gt;
     Percent Complete: &#123;&#123;value&#125;&#125;%
@@ -38,158 +36,99 @@ data() {
 </template>
 </code></pre>
 
-				<h5>Properties</h5>
-				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>value</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Current value of the progress.</td>
-                            </tr>
-                            <tr>
-                                <td>mode</td>
-                                <td>string</td>
-                                <td>determinate</td>
-                                <td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
-                            </tr>
-                            <tr>
-                                <td>showValue</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether to display the progress bar value.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Current value of the progress.</td>
+                    </tr>
+                    <tr>
+                        <td>mode</td>
+                        <td>string</td>
+                        <td>determinate</td>
+                        <td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
+                    </tr>
+                    <tr>
+                        <td>showValue</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display the progress bar value.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-progressbar</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-progressbar-determinate</td>
-                                <td>Container element of a determinate progressbar.</td>
-                            </tr>
-                            <tr>
-                                <td>p-progressbar-indeterminate</td>
-                                <td>Container element of an indeterminate progressbar.</td>
-                            </tr>
-                            <tr>
-                                <td>p-progressbar-value</td>
-                                <td>Element whose width changes according to value.</td>
-                            </tr>
-                            <tr>
-                                <td>p-progressbar-label</td>
-                                <td>Label element that displays the current value.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-progressbar</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-determinate</td>
+                        <td>Container element of a determinate progressbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-indeterminate</td>
+                        <td>Container element of an indeterminate progressbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-value</td>
+                        <td>Element whose width changes according to value.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-label</td>
+                        <td>Label element that displays the current value.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<div class="p-d-flex p-jc-between">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
-				<LiveEditor name="ProgressBarDemo" :sources="sources" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;h3&gt;Dynamic&lt;/h3&gt;
-&lt;ProgressBar :value="value1" /&gt;
-
-&lt;h3&gt;Static&lt;/h3&gt;
-&lt;ProgressBar :value="value2" :showValue="false" /&gt;
-
-&lt;h3&gt;Indeterminate&lt;/h3&gt;
-&lt;ProgressBar mode="indeterminate" style="height: .5em" /&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			value1: 0,
-			value2: 50
-		}
-	},
-	interval: null,
-	methods: {
-		startProgress() {
-			this.interval = setInterval(() => {
-				let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
-				if (newValue >= 100) {
-					newValue = 100;
-				}
-				this.value1 = newValue;
-			}, 2000);
-		},
-		endProgress() {
-			clearInterval(this.interval);
-			this.interval = null;
-		}
-	},
-	mounted() {
-		this.startProgress();
-	},
-	beforeUnmount() {
-		this.endProgress();
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Dynamic</h5>
-                <ProgressBar :value="value1" />
+				'options-api': {
+                    tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <h5>Dynamic</h5>
+        <ProgressBar :value="value1" />
 
-                <h5>Static</h5>
-                <ProgressBar :value="value2" :showValue="false" />
+        <h5>Static</h5>
+        <ProgressBar :value="value2" :showValue="false" />
 
-                <h5>Indeterminate</h5>
-                <ProgressBar mode="indeterminate" style="height: .5em" />
-            </div>
-        </div>
+        <h5>Indeterminate</h5>
+        <ProgressBar mode="indeterminate" style="height: .5em" />
     </div>
 </template>
 
@@ -223,13 +162,63 @@ export default {
     beforeUnmount() {
         this.endProgress();
     }
-}`
+}
+<\\/script>
+`
+				},
+                'composition-api': {
+                    tabName: 'Composition API',
+					content: `<template>
+    <div class="card">
+        <h5>Dynamic</h5>
+        <ProgressBar :value="value1" />
+
+        <h5>Static</h5>
+        <ProgressBar :value="value2" :showValue="false" />
+
+        <h5>Indeterminate</h5>
+        <ProgressBar mode="indeterminate" style="height: .5em" />
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+export default {
+    setup() {
+        onMounted(() => {
+            startProgress();
+        })
+
+        onBeforeUnmount(() => {
+            endProgress();
+        })
+        
+        const value1 = ref(0);
+        const value2 = ref(50);
+        const interval = ref(null);
+        const startProgress = () => {
+            interval.value = setInterval(() => {
+                let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
+                if (newValue >= 100) {
+                    newValue = 100;
+                }
+                value1.value = newValue;
+            }, 2000);
+        };
+        const endProgress = () => {
+            clearInterval(interval.value);
+            interval.value = null;
+        };
+
+        return { value1, value2 }
+    }
+}
+<\\/script>`
+
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
diff --git a/src/views/progressspinner/ProgressSpinnerDoc.vue b/src/views/progressspinner/ProgressSpinnerDoc.vue
index 4b94584d6..10216b579 100755
--- a/src/views/progressspinner/ProgressSpinnerDoc.vue
+++ b/src/views/progressspinner/ProgressSpinnerDoc.vue
@@ -1,22 +1,20 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="ProgressSpinnerDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import ProgressSpinner from 'primevue/progressspinner';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>ProgressSpinner is defined using ProgressSpinner element.</p>
+		<h5>Getting Started</h5>
+		<p>ProgressSpinner is defined using ProgressSpinner element.</p>
 <pre v-code><code><template v-pre>
 &lt;ProgressSpinner /&gt;
 </template>
 </code></pre>
 
-                <h5>Colors</h5>
-                <p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
+        <h5>Colors</h5>
+        <p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
 <pre v-code.css><code>
 @keyframes p-progress-spinner-color {
     100%,
@@ -37,122 +35,118 @@ import ProgressSpinner from 'primevue/progressspinner';
 
 </code></pre>
 
-				<h5>Properties</h5>
-                <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>strokeWidth</td>
-                                <td>string</td>
-                                <td>2</td>
-                                <td>Width of the circle stroke.</td>
-                            </tr>
-                            <tr>
-                                <td>fill</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Color for the background of the circle.</td>
-                            </tr>
-                            <tr>
-                                <td>animationDuration</td>
-                                <td>string</td>
-                                <td>2s</td>
-                                <td>Duration of the rotate animation.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>strokeWidth</td>
+                        <td>string</td>
+                        <td>2</td>
+                        <td>Width of the circle stroke.</td>
+                    </tr>
+                    <tr>
+                        <td>fill</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Color for the background of the circle.</td>
+                    </tr>
+                    <tr>
+                        <td>animationDuration</td>
+                        <td>string</td>
+                        <td>2s</td>
+                        <td>Duration of the rotate animation.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-progress-spinner</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-progress-circle</td>
-                                <td>SVG element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-progress-path</td>
-                                <td>Circle element.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-progress-spinner</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progress-circle</td>
+                        <td>SVG element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progress-path</td>
+                        <td>Circle element.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="ProgressSpinnerDemo" :sources="sources" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;h3&gt;Basic&lt;/h3&gt;
-&lt;ProgressSpinner /&gt;
-
-&lt;h3&gt;Custom&lt;/h3&gt;
-&lt;ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/&gt;
-</template>
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
-            sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Basic</h5>
-                <ProgressSpinner />
+           sources: {
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Basic</h5>
+        <ProgressSpinner />
 
-                <h5>Custom</h5>
-                <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
-            </div>
-        </div>
+        <h5>Custom</h5>
+        <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
     </div>
 </template>
 
 <script>
 export default {
-}`
+}
+<\\/script>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="card">
+        <h5>Basic</h5>
+        <ProgressSpinner />
+
+        <h5>Custom</h5>
+        <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>`
+
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 8726dfcd9..381536af0 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -1,11 +1,9 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Getting Started</h5>
-                <h5>Ripple</h5>
-                <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
-                    your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
+	<AppDoc name="RippleDemo" :sources="sources">
+        <h5>Getting Started</h5>
+        <h5>Ripple</h5>
+        <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
+            your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
 <pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
@@ -15,10 +13,10 @@ app.use(PrimeVue, {ripple: true});
 
 </code></pre>
 
-                <p><span class="p-text-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
+        <p><span class="p-text-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
 
-                <h5>Directive</h5>
-				<p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
+        <h5>Directive</h5>
+		<p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
 <pre v-code.script><code>
 import Ripple from 'primevue/ripple';
 
@@ -26,7 +24,7 @@ Vue.directive('ripple', Ripple);
 
 </code></pre>
 
-                <p>Ripple can also be configured locally using the directives property of your component.</p>
+        <p>Ripple can also be configured locally using the directives property of your component.</p>
 <pre v-code.script><code>
 directives: {
     'ripple': Ripple
@@ -34,14 +32,14 @@ directives: {
 
 </code></pre>
 
-                <p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
+        <p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
 <pre v-code><code><template v-pre>
 &lt;div class="p-ripple" v-ripple&gt;&lt;/div&gt;
 </template>
 </code></pre>
 
-				<h5>Styling</h5>
-				<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
+		<h5>Styling</h5>
+		<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
 <pre v-code><code><template v-pre>
 &lt;div class="p-ripple purple" v-ripple&gt;&lt;/div&gt;
 </template>
@@ -55,59 +53,62 @@ directives: {
 </code></pre>
 
 
-				<h5>Styling</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-ripple</td>
-                                <td>Host element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-ink</td>
-                                <td>Ripple element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-ink-active</td>
-                                <td>Ripple element during animating.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-ripple</td>
+                        <td>Host element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-ink</td>
+                        <td>Ripple element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-ink-active</td>
+                        <td>Ripple element during animating.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="RippleDemo" :sources="sources" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;div class="card-container p-d-flex"&gt;
-    &lt;div class="card primary-box p-ripple" v-ripple&gt;Default&lt;/div&gt;
-    &lt;div class="card styled-box-green p-ripple" v-ripple&gt;Green&lt;/div&gt;
-    &lt;div class="card styled-box-orange p-ripple" v-ripple&gt;Orange&lt;/div&gt;
-    &lt;div class="card styled-box-purple p-ripple" v-ripple&gt;Purple&lt;/div&gt;
-&lt;/div&gt;
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
-</code></pre>
 
-<pre v-code.script><code>
-export default {}
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div>
+        <div class="card-container p-d-flex">
+            <div class="card primary-box p-ripple" v-ripple>Default</div>
+            <div class="card styled-box-green p-ripple" v-ripple>Green</div>
+            <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
+            <div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
+        </div>
+    </div>
+</template>
 
-</code></pre>
+<script>
+export default {
+}
+<\\/script>
 
-<pre v-code.css><code>
+<style lang="scss" scoped>
 ::v-deep(.card-container) {
     .card {
         width: 75px;
@@ -118,6 +119,11 @@ export default {}
         margin-right: 1rem;
         user-select: none;
         padding: 0;
+        background: #ffffff;
+        padding: 2rem;
+        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+        border-radius: 4px;
+        margin-bottom: 2rem;
 
         &.primary-box {
             background-color: var(--primary-color);
@@ -148,37 +154,28 @@ export default {}
         }
     }
 }
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
-</template>
-
-<script>
-import LiveEditor from '../liveeditor/LiveEditor';
-export default {
-    data() {
-        return {
-            sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card-container p-d-flex">
-                <div class="card primary-box p-ripple" v-ripple>Default</div>
-                <div class="card styled-box-green p-ripple" v-ripple>Green</div>
-                <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
-                <div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
-            </div>
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div>
+        <div class="card-container p-d-flex">
+            <div class="card primary-box p-ripple" v-ripple>Default</div>
+            <div class="card styled-box-green p-ripple" v-ripple>Green</div>
+            <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
+            <div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
-}`,
-                    style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
 ::v-deep(.card-container) {
     .card {
         width: 75px;
@@ -189,6 +186,11 @@ export default {
         margin-right: 1rem;
         user-select: none;
         padding: 0;
+        background: #ffffff;
+        padding: 2rem;
+        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+        border-radius: 4px;
+        margin-bottom: 2rem;
 
         &.primary-box {
             background-color: var(--primary-color);
@@ -223,9 +225,6 @@ export default {
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index a9f65cbd5..148d802f4 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -1,30 +1,28 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="ScrollTopDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import ScrollTop from 'primevue/scrolltop';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Without any configuration, ScrollTop listens window scroll.</p>
+		<h5>Getting Started</h5>
+		<p>Without any configuration, ScrollTop listens window scroll.</p>
 <pre v-code><code>
 &lt;ScrollTop /&gt;
 
 </code></pre>
 
-				<h5>Threshold</h5>
-				<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
-					defined with the <i>threshold</i> property that defaults to 400.</p>
+		<h5>Threshold</h5>
+		<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
+			defined with the <i>threshold</i> property that defaults to 400.</p>
 <pre v-code><code>
 &lt;ScrollTop :threshold="200" /&gt;
 
 </code></pre>
 
-				<h5>Target Element</h5>
-				<p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
+		<h5>Target Element</h5>
+		<p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
 <pre v-code><code>
 &lt;div style="height: 400px; overflow: auto"&gt;
 	Content that overflows to container
@@ -33,113 +31,122 @@ import ScrollTop from 'primevue/scrolltop';
 
 </code></pre>
 
-				<h5>Properties</h5>
-				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>target</td>
-                                <td>string</td>
-                                <td>window</td>
-                                <td>Target of the ScrollTop, valid values are "window" and "parent".</td>
-                            </tr>
-                            <tr>
-                                <td>threshold</td>
-                                <td>number</td>
-                                <td>400</td>
-                                <td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
-                            </tr>
-                            <tr>
-                                <td>icon</td>
-                                <td>string</td>
-                                <td>pi pi-chevron-up</td>
-                                <td>Icon to display.</td>
-                            </tr>
-							<tr>
-                                <td>behavior</td>
-                                <td>string</td>
-                                <td>smooth</td>
-                                <td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>target</td>
+                        <td>string</td>
+                        <td>window</td>
+                        <td>Target of the ScrollTop, valid values are "window" and "parent".</td>
+                    </tr>
+                    <tr>
+                        <td>threshold</td>
+                        <td>number</td>
+                        <td>400</td>
+                        <td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-up</td>
+                        <td>Icon to display.</td>
+                    </tr>
+					<tr>
+                        <td>behavior</td>
+                        <td>string</td>
+                        <td>smooth</td>
+                        <td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-scrolltop</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-scrolltop-sticky</td>
-                                <td>Container element when attached to its parent.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-scrolltop</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-scrolltop-sticky</td>
+                        <td>Container element when attached to its parent.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<div class="p-d-flex p-jc-between">
-					<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrolltop" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-						<span>View on GitHub</span>
-					</a>
-					<LiveEditor name="ScrollTopDemo" :sources="sources" :components="['ScrollPanel']" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;h5&gt;Window&lt;/h5&gt;
-&lt;p&gt;Scroll down the page to display the ScrollTo component.&lt;/p&gt;
-&lt;ScrollTop /&gt;
-
-&lt;h5&gt;Element&lt;/h5&gt;
-&lt;ScrollPanel style="width: 250px; height: 200px"&gt;
-	&lt;p&gt;
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-		Vitae et leo duis ut diam.
-		Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
-		Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
-		Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
-		Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
-		Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
-		Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
-		Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
-		Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
-		Mattis aliquam faucibus purus in massa tempor nec.
-	&lt;/p&gt;
-	&lt;ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" /&gt;
-&lt;/ScrollPanel&gt;
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
-</code></pre>
 
-<pre v-code.css><code>
+<script>
+export default {
+	data() {
+		return {
+			sources: {
+				'options-api': {
+                    tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <h5>Window</h5>
+        <p>Scroll down the page to display the ScrollTo component.</p>
+        <ScrollTop />
+
+        <h5>Element</h5>
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Vitae et leo duis ut diam.
+                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+        </ScrollPanel>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+
+<style lang="scss" scoped>
 ::v-deep(.custom-scrolltop) {
     width: 2rem;
     height: 2rem;
+    border-radius: 4px;
     background-color: var(--primary-color);
 
-	&:hover {
+    &:hover {
 		background-color: var(--primary-color);
 	}
 
@@ -148,54 +155,43 @@ import ScrollTop from 'primevue/scrolltop';
         color: var(--primary-color-text);
     }
 }
+</style>`
+				},
+                'composition-api': {
+                    tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <h5>Window</h5>
+        <p>Scroll down the page to display the ScrollTo component.</p>
+        <ScrollTop />
 
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
-</template>
-
-<script>
-import LiveEditor from '../liveeditor/LiveEditor';
-export default {
-	data() {
-		return {
-			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Window</h5>
-                <p>Scroll down the page to display the ScrollTo component.</p>
-                <ScrollTop />
-
-                <h5>Element</h5>
-                <ScrollPanel style="width: 250px; height: 200px">
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        Vitae et leo duis ut diam.
-                        Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
-                        Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
-                        Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
-                        Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
-                        Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
-                        Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
-                        Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
-                        Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
-                        Mattis aliquam faucibus purus in massa tempor nec.
-                    </p>
-                    <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
-                </ScrollPanel>
-            </div>
-        </div>
+        <h5>Element</h5>
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Vitae et leo duis ut diam.
+                Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+        </ScrollPanel>
     </div>
 </template>
 
 <script>
 export default {
-}  `,
-					style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
 ::v-deep(.custom-scrolltop) {
     width: 2rem;
     height: 2rem;
@@ -215,9 +211,6 @@ export default {
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index 05a73b64f..f81218747 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -1,417 +1,270 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="SkeletonDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import Skeleton from 'primevue/skeleton';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Skeleton displays a rectangle in its simplest form.</p>
+		<h5>Getting Started</h5>
+		<p>Skeleton displays a rectangle in its simplest form.</p>
 <pre v-code><code>
 &lt;Skeleton /&gt;
 
 </code></pre>
 
-				<h5>Circle</h5>
-				<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
+		<h5>Circle</h5>
+		<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
 <pre v-code><code>
 &lt;Skeleton shape="circle"/&gt;
 
 </code></pre>
 
-				<h5>Size</h5>
-				<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
+		<h5>Size</h5>
+		<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
 <pre v-code><code>
 &lt;Skeleton width="100%" height="2rem" /&gt;
 &lt;Skeleton shape="circle" size="50px" /&gt;
 
 </code></pre>
 
-				<h5>Border Radius</h5>
-				<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
+		<h5>Border Radius</h5>
+		<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
 <pre v-code><code>
 &lt;Skeleton borderRadius="16px" /&gt;
 
 </code></pre>
 
-				<h5>Animation</h5>
-				<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
+		<h5>Animation</h5>
+		<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
 <pre v-code><code>
 &lt;Skeleton animation="none" /&gt;
 
 </code></pre>
 
-				<h5>Properties</h5>
-				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>shape</td>
-                                <td>string</td>
-                                <td>rectangle</td>
-                                <td>Shape of the element, options are "rectangle" and "circle".</td>
-                            </tr>
-							<tr>
-                                <td>size</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Size of the Circle or Square.</td>
-                            </tr>
-							<tr>
-                                <td>width</td>
-                                <td>string</td>
-                                <td>100%</td>
-                                <td>Width of the element.</td>
-                            </tr>
-							<tr>
-                                <td>height</td>
-                                <td>string</td>
-                                <td>1rem</td>
-                                <td>Height of the element.</td>
-                            </tr>
-							<tr>
-                                <td>borderRadius</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Border radius of the element, defaults to value from theme.</td>
-                            </tr>
-							<tr>
-                                <td>animation</td>
-                                <td>string</td>
-                                <td>wave</td>
-                                <td>Type of the animation, valid options are "wave" and "none".</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>shape</td>
+                        <td>string</td>
+                        <td>rectangle</td>
+                        <td>Shape of the element, options are "rectangle" and "circle".</td>
+                    </tr>
+					<tr>
+                        <td>size</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Size of the Circle or Square.</td>
+                    </tr>
+					<tr>
+                        <td>width</td>
+                        <td>string</td>
+                        <td>100%</td>
+                        <td>Width of the element.</td>
+                    </tr>
+					<tr>
+                        <td>height</td>
+                        <td>string</td>
+                        <td>1rem</td>
+                        <td>Height of the element.</td>
+                    </tr>
+					<tr>
+                        <td>borderRadius</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Border radius of the element, defaults to value from theme.</td>
+                    </tr>
+					<tr>
+                        <td>animation</td>
+                        <td>string</td>
+                        <td>wave</td>
+                        <td>Type of the animation, valid options are "wave" and "none".</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-skeleton</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-skeleton-circle</td>
-                                <td>Container element of a determinate progressbar.</td>
-                            </tr>
-                            <tr>
-                                <td>p-skeleton-animation-none</td>
-                                <td>Container element of an indeterminate progressbar.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-skeleton</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-skeleton-circle</td>
+                        <td>Container element of a determinate progressbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-skeleton-animation-none</td>
+                        <td>Container element of an indeterminate progressbar.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<div class="p-d-flex p-jc-between">
-					<a href="https://github.com/primefaces/primevue/tree/master/src/views/skeleton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-						<span>View on GitHub</span>
-					</a>
-					<LiveEditor name="SkeletonDemo" :sources="sources" :components="['DataTable', 'Column']" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;div class="card"&gt;
-	&lt;div class="p-grid p-formgrid"&gt;
-		&lt;div class="p-field p-col-12 p-md-6"&gt;
-			&lt;h5&gt;Rectangle&lt;/h5&gt;
-			&lt;Skeleton class="p-mb-2"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton height="2rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton width="10rem" height="4rem"&gt;&lt;/Skeleton&gt;
-		&lt;/div&gt;
-		&lt;div class="p-field p-col-12 p-md-6"&gt;
-			&lt;h5&gt;Rounded&lt;/h5&gt;
-			&lt;Skeleton class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton width="10rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton width="5rem" borderRadius="16px" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton height="2rem" class="p-mb-2" borderRadius="16px"&gt;&lt;/Skeleton&gt;
-			&lt;Skeleton width="10rem" height="4rem" borderRadius="16px"&gt;&lt;/Skeleton&gt;
-		&lt;/div&gt;
-		&lt;div class="p-field p-col-12 p-md-6"&gt;
-			&lt;h5 class="p-mt-3"&gt;Square&lt;/h5&gt;
-			&lt;div class="p-d-flex p-ai-end"&gt;
-				&lt;Skeleton size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-				&lt;Skeleton size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-				&lt;Skeleton size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-				&lt;Skeleton size="5rem"&gt;&lt;/Skeleton&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-		&lt;div class="p-field p-col-12 p-md-6"&gt;
-			&lt;h5 class="p-mt-3"&gt;Circle&lt;/h5&gt;
-			&lt;div class="p-d-flex p-ai-end"&gt;
-				&lt;Skeleton shape="circle" size="2rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-				&lt;Skeleton shape="circle" size="3rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-				&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-				&lt;Skeleton shape="circle" size="5rem"&gt;&lt;/Skeleton&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-	&lt;div class="card"&gt;
-		&lt;div class="p-grid p-formgrid"&gt;
-		&lt;div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0"&gt;
-			&lt;h5&gt;Card&lt;/h5&gt;
-			&lt;div class="custom-skeleton p-p-4"&gt;
-				&lt;div class="p-d-flex p-mb-3"&gt;
-					&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-					&lt;div&gt;
-						&lt;Skeleton width="10rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-						&lt;Skeleton width="5rem" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-						&lt;Skeleton height=".5rem"&gt;&lt;/Skeleton&gt;
-					&lt;/div&gt;
-				&lt;/div&gt;
-				&lt;Skeleton width="100%" height="150px"&gt;&lt;/Skeleton&gt;
-				&lt;div class="p-d-flex p-jc-between p-mt-3"&gt;
-					&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
-					&lt;Skeleton width="4rem" height="2rem"&gt;&lt;/Skeleton&gt;
-				&lt;/div&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-
-		&lt;div class="p-field p-col-12 p-md-6"&gt;
-			&lt;h5&gt;List&lt;/h5&gt;
-			&lt;div class="custom-skeleton p-p-4"&gt;
-				&lt;ul class="p-m-0 p-p-0"&gt;
-					&lt;li class="p-mb-3"&gt;
-						&lt;div class="p-d-flex"&gt;
-							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-							&lt;div style="flex: 1"&gt;
-								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
-							&lt;/div&gt;
-						&lt;/div&gt;
-					&lt;/li&gt;
-					&lt;li class="p-mb-3"&gt;
-						&lt;div class="p-d-flex"&gt;
-							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-							&lt;div style="flex: 1"&gt;
-								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
-							&lt;/div&gt;
-						&lt;/div&gt;
-					&lt;/li&gt;
-					&lt;li class="p-mb-3"&gt;
-						&lt;div class="p-d-flex"&gt;
-							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-							&lt;div style="flex: 1"&gt;
-								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
-							&lt;/div&gt;
-						&lt;/div&gt;
-					&lt;/li&gt;
-					&lt;li&gt;
-						&lt;div class="p-d-flex"&gt;
-							&lt;Skeleton shape="circle" size="4rem" class="p-mr-2"&gt;&lt;/Skeleton&gt;
-							&lt;div style="flex: 1"&gt;
-								&lt;Skeleton width="100%" class="p-mb-2"&gt;&lt;/Skeleton&gt;
-								&lt;Skeleton width="75%"&gt;&lt;/Skeleton&gt;
-							&lt;/div&gt;
-						&lt;/div&gt;
-					&lt;/li&gt;
-				&lt;/ul&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-
-	&lt;h5&gt;DataTable&lt;/h5&gt;
-	&lt;DataTable :value="products"&gt;
-		&lt;Column field="code" header="Code"&gt;
-			&lt;template #body&gt;
-				&lt;Skeleton&gt;&lt;/Skeleton&gt;
-			&lt;/template&gt;
-		&lt;/Column&gt;
-		&lt;Column field="name" header="Name"&gt;
-			&lt;template #body&gt;
-				&lt;Skeleton&gt;&lt;/Skeleton&gt;
-			&lt;/template&gt;
-		&lt;/Column&gt;
-		&lt;Column field="category" header="Category"&gt;
-			&lt;template #body&gt;
-				&lt;Skeleton&gt;&lt;/Skeleton&gt;
-			&lt;/template&gt;
-		&lt;/Column&gt;
-		&lt;Column field="quantity" header="Quantity"&gt;
-			&lt;template #body&gt;
-				&lt;Skeleton&gt;&lt;/Skeleton&gt;
-			&lt;/template&gt;
-		&lt;/Column&gt;
-	&lt;/DataTable&gt;
-&lt;/div&gt;
-</template>
-</code></pre>
-
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                 <div class="p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5>Rectangle</h5>
-                        <Skeleton class="p-mb-2"></Skeleton>
-                        <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                        <Skeleton width="5rem" class="p-mb-2"></Skeleton>
-                        <Skeleton height="2rem" class="p-mb-2"></Skeleton>
-                        <Skeleton width="10rem" height="4rem"></Skeleton>
+				'options-api': {
+                    tabName: 'Source',
+					content: `
+<template>
+    <div>
+        <div class="card">
+             <div class="p-grid p-formgrid">
+                <div class="p-field p-col-12 p-md-6">
+                    <h5>Rectangle</h5>
+                    <Skeleton class="p-mb-2"></Skeleton>
+                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="p-mb-2"></Skeleton>
+                    <Skeleton width="10rem" height="4rem"></Skeleton>
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <h5>Rounded</h5>
+                    <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <h5 class="p-mt-3">Square</h5>
+                    <div class="p-d-flex p-ai-end">
+                        <Skeleton size="2rem" class="p-mr-2"></Skeleton>
+                        <Skeleton size="3rem" class="p-mr-2"></Skeleton>
+                        <Skeleton size="4rem" class="p-mr-2"></Skeleton>
+                        <Skeleton size="5rem"></Skeleton>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5>Rounded</h5>
-                        <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
-                        <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <h5 class="p-mt-3">Circle</h5>
+                    <div class="p-d-flex p-ai-end">
+                        <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="5rem"></Skeleton>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5 class="p-mt-3">Square</h5>
-                        <div class="p-d-flex p-ai-end">
-                            <Skeleton size="2rem" class="p-mr-2"></Skeleton>
-                            <Skeleton size="3rem" class="p-mr-2"></Skeleton>
-                            <Skeleton size="4rem" class="p-mr-2"></Skeleton>
-                            <Skeleton size="5rem"></Skeleton>
-                        </div>
-                    </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5 class="p-mt-3">Circle</h5>
-                        <div class="p-d-flex p-ai-end">
-                            <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
-                            <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
+                </div>
+             </div>
+        </div>
+
+        <div class="card">
+             <div class="p-grid p-formgrid">
+                <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+                    <h5>Card</h5>
+                    <div class="custom-skeleton p-p-4">
+                        <div class="p-d-flex p-mb-3">
                             <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
-                            <Skeleton shape="circle" size="5rem"></Skeleton>
+                            <div>
+                                <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                                <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                                <Skeleton height=".5rem"></Skeleton>
+                            </div>
+                        </div>
+                        <Skeleton width="100%" height="150px"></Skeleton>
+                        <div class="p-d-flex p-jc-between p-mt-3">
+                            <Skeleton width="4rem" height="2rem"></Skeleton>
+                            <Skeleton width="4rem" height="2rem"></Skeleton>
                         </div>
                     </div>
-                 </div>
-            </div>
+                </div>
 
-            <div class="card">
-                 <div class="p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
-                        <h5>Card</h5>
-                        <div class="custom-skeleton p-p-4">
-                            <div class="p-d-flex p-mb-3">
-                                <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
-                                <div>
-                                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
-                                    <Skeleton height=".5rem"></Skeleton>
+                <div class="p-field p-col-12 p-md-6">
+                    <h5>List</h5>
+                    <div class="custom-skeleton p-p-4">
+                        <ul class="p-m-0 p-p-0">
+                            <li class="p-mb-3">
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
                                 </div>
-                            </div>
-                            <Skeleton width="100%" height="150px"></Skeleton>
-                            <div class="p-d-flex p-jc-between p-mt-3">
-                                <Skeleton width="4rem" height="2rem"></Skeleton>
-                                <Skeleton width="4rem" height="2rem"></Skeleton>
-                            </div>
-                        </div>
+                            </li>
+                            <li class="p-mb-3">
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="p-mb-3">
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
                     </div>
-
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5>List</h5>
-                        <div class="custom-skeleton p-p-4">
-                            <ul class="p-m-0 p-p-0">
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
-                                        <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
-                                            <Skeleton width="75%"></Skeleton>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
-                                        <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
-                                            <Skeleton width="75%"></Skeleton>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
-                                        <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
-                                            <Skeleton width="75%"></Skeleton>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li>
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
-                                        <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
-                                            <Skeleton width="75%"></Skeleton>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                 </div>
-
-                <h5>DataTable</h5>
-                <DataTable :value="products" responsiveLayout="scroll">
-                    <Column field="code" header="Code">
-                        <template #body>
-                            <Skeleton></Skeleton>
-                        </template>
-                    </Column>
-                    <Column field="name" header="Name">
-                        <template #body>
-                            <Skeleton></Skeleton>
-                        </template>
-                    </Column>
-                    <Column field="category" header="Category">
-                        <template #body>
-                            <Skeleton></Skeleton>
-                        </template>
-                    </Column>
-                    <Column field="quantity" header="Quantity">
-                        <template #body>
-                            <Skeleton></Skeleton>
-                        </template>
-                    </Column>
-                </DataTable>
+                </div>
             </div>
+
+            <h5>DataTable</h5>
+            <DataTable :value="products" responsiveLayout="scroll">
+                <Column field="code" header="Code">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+                <Column field="name" header="Name">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+                <Column field="category" header="Category">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+                <Column field="quantity" header="Quantity">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+            </DataTable>
         </div>
     </div>
 </template>
@@ -423,8 +276,170 @@ export default {
             products: new Array(5)
         }
     }
-}`,
-					style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.custom-skeleton {
+    border: 1px solid var(--surface-d);
+    border-radius: 4px;
+
+    ul {
+        list-style: none;
+    }
+}
+</style>`
+				},
+                'composition-api': {
+                    tabName: 'Composition API',
+					content: `
+<template>
+    <div>
+        <div class="card">
+             <div class="p-grid p-formgrid">
+                <div class="p-field p-col-12 p-md-6">
+                    <h5>Rectangle</h5>
+                    <Skeleton class="p-mb-2"></Skeleton>
+                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="p-mb-2"></Skeleton>
+                    <Skeleton width="10rem" height="4rem"></Skeleton>
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <h5>Rounded</h5>
+                    <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <h5 class="p-mt-3">Square</h5>
+                    <div class="p-d-flex p-ai-end">
+                        <Skeleton size="2rem" class="p-mr-2"></Skeleton>
+                        <Skeleton size="3rem" class="p-mr-2"></Skeleton>
+                        <Skeleton size="4rem" class="p-mr-2"></Skeleton>
+                        <Skeleton size="5rem"></Skeleton>
+                    </div>
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <h5 class="p-mt-3">Circle</h5>
+                    <div class="p-d-flex p-ai-end">
+                        <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="5rem"></Skeleton>
+                    </div>
+                </div>
+             </div>
+        </div>
+
+        <div class="card">
+             <div class="p-grid p-formgrid">
+                <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+                    <h5>Card</h5>
+                    <div class="custom-skeleton p-p-4">
+                        <div class="p-d-flex p-mb-3">
+                            <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                            <div>
+                                <Skeleton width="10rem" class="p-mb-2"></Skeleton>
+                                <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                                <Skeleton height=".5rem"></Skeleton>
+                            </div>
+                        </div>
+                        <Skeleton width="100%" height="150px"></Skeleton>
+                        <div class="p-d-flex p-jc-between p-mt-3">
+                            <Skeleton width="4rem" height="2rem"></Skeleton>
+                            <Skeleton width="4rem" height="2rem"></Skeleton>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-field p-col-12 p-md-6">
+                    <h5>List</h5>
+                    <div class="custom-skeleton p-p-4">
+                        <ul class="p-m-0 p-p-0">
+                            <li class="p-mb-3">
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="p-mb-3">
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="p-mb-3">
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="p-d-flex">
+                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div style="flex: 1">
+                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="75%"></Skeleton>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <h5>DataTable</h5>
+            <DataTable :value="products" responsiveLayout="scroll">
+                <Column field="code" header="Code">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+                <Column field="name" header="Name">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+                <Column field="category" header="Category">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+                <Column field="quantity" header="Quantity">
+                    <template #body>
+                        <Skeleton></Skeleton>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const products = ref(new Array(5));
+
+        return { products }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
 .custom-skeleton {
     border: 1px solid var(--surface-d);
     border-radius: 4px;
@@ -437,9 +452,6 @@ export default {
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index da2f705de..349501dba 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc :sources="sources" :extPages="pages">
+    <AppDoc name="StepsDemo" :sources="sources" :extPages="pages">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Steps from 'primevue/steps';
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index be2bcab4e..4812c5915 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -1,39 +1,37 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-                <h5>Import</h5>
+	<AppDoc name="TagDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import Tag from 'primevue/tag';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Content of the tag is specified using the <i>value</i> property.</p>
+		<h5>Getting Started</h5>
+		<p>Content of the tag is specified using the <i>value</i> property.</p>
 <pre v-code><code>
 &lt;Tag value="New"&gt;&lt;/Tag&gt;
 
 </code></pre>
 
-				<h5>Icon</h5>
-				<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
+		<h5>Icon</h5>
+		<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
 <pre v-code><code>
 &lt;Tag value="New" icon="pi pi-plus"&gt;&lt;/Tag&gt;
 
 </code></pre>
 
-                <h5>Severities</h5>
-                <p>Different color options are available as severity levels.</p>
+        <h5>Severities</h5>
+        <p>Different color options are available as severity levels.</p>
 
-				<ul>
-					<li>success</li>
-					<li>info</li>
-					<li>warning</li>
-					<li>danger</li>
-				</ul>
+		<ul>
+			<li>success</li>
+			<li>info</li>
+			<li>warning</li>
+			<li>danger</li>
+		</ul>
 
-				<h5>Templating</h5>
-				<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
+		<h5>Templating</h5>
+		<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
 <pre v-code><code>
 &lt;Tag&gt;
    Content
@@ -41,162 +39,158 @@ import Tag from 'primevue/tag';
 
 </code></pre>
 
-				<h5>Properties</h5>
-				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>value</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Value to display inside the tag.</td>
-                            </tr>
-							<tr>
-                                <td>severity</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Severity type of the tag.</td>
-                            </tr>
-							<tr>
-                                <td>rounded</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether the corners of the tag are rounded.</td>
-                            </tr>
-							<tr>
-                                <td>icon</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Icon of the tag to display next to the value.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value to display inside the tag.</td>
+                    </tr>
+					<tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Severity type of the tag.</td>
+                    </tr>
+					<tr>
+                        <td>rounded</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the corners of the tag are rounded.</td>
+                    </tr>
+					<tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the tag to display next to the value.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-tag</td>
-                                <td>Tag element</td>
-                            </tr>
-                            <tr>
-                                <td>p-tag-rounded</td>
-                                <td>Rounded element</td>
-                            </tr>
-                            <tr>
-                                <td>p-tag-icon</td>
-                                <td>Icon of the tag</td>
-                            </tr>
-                            <tr>
-                                <td>p-tag-value</td>
-                                <td>Value of the tag</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+				<tr>
+					<th>Name</th>
+					<th>Element</th>
+				</tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-tag</td>
+                        <td>Tag element</td>
+                    </tr>
+                    <tr>
+                        <td>p-tag-rounded</td>
+                        <td>Rounded element</td>
+                    </tr>
+                    <tr>
+                        <td>p-tag-icon</td>
+                        <td>Icon of the tag</td>
+                    </tr>
+                    <tr>
+                        <td>p-tag-value</td>
+                        <td>Value of the tag</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-				<div class="p-d-flex p-jc-between">
-					<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-						<span>View on GitHub</span>
-					</a>
-					<LiveEditor name="TagDemo" :sources="sources" />
-				</div>
-<pre v-code><code><template v-pre>
-&lt;h5&gt;Tags&lt;/h5&gt;
-&lt;Tag class="p-mr-2" value="Primary"&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" severity="success" value="Success"&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" severity="info" value="Info"&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
-&lt;Tag severity="danger" value="Danger"&gt;&lt;/Tag&gt;
-
-&lt;h5&gt;Pills&lt;/h5&gt;
-&lt;Tag class="p-mr-2" value="Primary" rounded&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" severity="success" value="Success" rounded&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" severity="info" value="Info" rounded&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" severity="warning" value="Warning" rounded&gt;&lt;/Tag&gt;
-&lt;Tag severity="danger" value="Danger" rounded&gt;&lt;/Tag&gt;
-
-&lt;h5&gt;Icons&lt;/h5&gt;
-&lt;Tag class="p-mr-2" icon="pi pi-user" value="Primary"&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"&gt;&lt;/Tag&gt;
-&lt;Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
-&lt;Tag icon="pi pi-times" severity="danger" value="Danger"&gt;&lt;/Tag&gt;
-</template>
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
 	data() {
 		return {
 			sources: {
-				'template': {
-					content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Tags</h5>
-                <Tag class="p-mr-2" value="Primary"></Tag>
-                <Tag class="p-mr-2" severity="success" value="Success"></Tag>
-                <Tag class="p-mr-2" severity="info" value="Info"></Tag>
-                <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
-                <Tag severity="danger" value="Danger"></Tag>
+				'options-api': {
+                    tabName: 'Source',
+					content: `
+<template>
+    <div class="card">
+        <h5>Tags</h5>
+        <Tag class="p-mr-2" value="Primary"></Tag>
+        <Tag class="p-mr-2" severity="success" value="Success"></Tag>
+        <Tag class="p-mr-2" severity="info" value="Info"></Tag>
+        <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
+        <Tag severity="danger" value="Danger"></Tag>
 
-                <h5>Pills</h5>
-                <Tag class="p-mr-2" value="Primary" rounded></Tag>
-                <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
-                <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
-                <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
-                <Tag severity="danger" value="Danger" rounded></Tag>
+        <h5>Pills</h5>
+        <Tag class="p-mr-2" value="Primary" rounded></Tag>
+        <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
+        <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
+        <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+        <Tag severity="danger" value="Danger" rounded></Tag>
 
-                <h5>Icons</h5>
-                <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
-                <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
-                <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-                <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
-                <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
-            </div>
-        </div>
+        <h5>Icons</h5>
+        <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
+        <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+        <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
     </div>
 </template>
 
 <script>
 export default {
-}`
+}
+<\\/script>
+`
+				},
+                'composition-api': {
+                    tabName: 'Composition API',
+					content: `
+<template>
+    <div class="card">
+        <h5>Tags</h5>
+        <Tag class="p-mr-2" value="Primary"></Tag>
+        <Tag class="p-mr-2" severity="success" value="Success"></Tag>
+        <Tag class="p-mr-2" severity="info" value="Info"></Tag>
+        <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
+        <Tag severity="danger" value="Danger"></Tag>
+
+        <h5>Pills</h5>
+        <Tag class="p-mr-2" value="Primary" rounded></Tag>
+        <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
+        <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
+        <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+        <Tag severity="danger" value="Danger" rounded></Tag>
+
+        <h5>Icons</h5>
+        <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
+        <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+        <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+    </div>
+</template>
+
+<script>
+export default {
+}
+<\\/script>
+`
 				}
 			}
 		}
-	},
-	components: {
-		LiveEditor
 	}
 }
 </script>
\ No newline at end of file
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 40c39b5ca..4e7263c4e 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -1,18 +1,16 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-				<h5>Import</h5>
+	<AppDoc name="TerminalDemo" :sources="sources">
+        <h5>Import</h5>
 <pre v-code.script><code>
 import Terminal from 'primevue/terminal';
 import TerminalService from 'primevue/terminalservice';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-				<p>Commands are processed using an EventBus implementation called TerminalService.
-                    Import this service into your component and subscribe to the <i>command</i> event to process the commands by
-                        sending replies with the <i>response</i> event.</p>
+		<h5>Getting Started</h5>
+		<p>Commands are processed using an EventBus implementation called TerminalService.
+            Import this service into your component and subscribe to the <i>command</i> event to process the commands by
+                sending replies with the <i>response</i> event.</p>
 <pre v-code><code>
 &lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" /&gt;
 
@@ -58,175 +56,93 @@ export default {
 
 </code></pre>
 
-                <h5>Properties</h5>
-                <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>welcomeMessage</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Initial text to display on terminal.</td>
-                            </tr>
-                            <tr>
-                                <td>prompt</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Prompt text for each command.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>welcomeMessage</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Initial text to display on terminal.</td>
+                    </tr>
+                    <tr>
+                        <td>prompt</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Prompt text for each command.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                             <tr>
-                                <td>p-terminal</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-terminal-content</td>
-                                <td>Content of terminal.</td>
-                            </tr>
-                            <tr>
-                                <td>p-terminal-prompt</td>
-                                <td>Prompt text.</td>
-                            </tr>
-                             <tr>
-                                <td>p-terminal-response</td>
-                                <td>Command response.</td>
-                            </tr>
-                            <tr>
-                                <td>p-terminal-input</td>
-                                <td>Input element to enter commands.</td>
-                            </tr>
-                        </tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                     <tr>
+                        <td>p-terminal</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-terminal-content</td>
+                        <td>Content of terminal.</td>
+                    </tr>
+                    <tr>
+                        <td>p-terminal-prompt</td>
+                        <td>Prompt text.</td>
+                    </tr>
+                     <tr>
+                        <td>p-terminal-response</td>
+                        <td>Command response.</td>
+                    </tr>
+                    <tr>
+                        <td>p-terminal-input</td>
+                        <td>Input element to enter commands.</td>
+                    </tr>
+                </tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="TerminalDemo" :sources="sources" :terminalService="true" />
-                </div>
-<pre v-code><code>
-&lt;p&gt;Enter "date" to display the current date, "greet &#123;0&#125;" for a message and "random" to get a random number.&lt;/p&gt;
-&lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" /&gt;
-
-</code></pre>
-
-<pre v-code.script><code>
-import TerminalService from 'primevue/terminalservice';
-
-export default {
-     methods: {
-        commandHandler(text) {
-            let response;
-            let argsIndex = text.indexOf(' ');
-            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-            switch(command) {
-                case "date":
-                    response = 'Today is ' + new Date().toDateString();
-                    break;
-
-                case "greet":
-                    response = 'Hola ' + text.substring(argsIndex + 1);
-                    break;
-
-                case "random":
-                    response = Math.floor(Math.random() * 100);
-                    break;
-
-                default:
-                    response = "Unknown command: " + command;
-            }
-
-            TerminalService.emit('response', response);
-        }
-    },
-    mounted() {
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    }
-}
-
-</code></pre>
-
-<pre v-code.css><code>
-p {
-    margin-top: 0;
-}
-
-::v-deep(.dark-demo-terminal) {
-    background-color: #212121;
-    color: #ffffff;
-
-    .p-terminal-command {
-        color: #80CBC4;
-    }
-
-    .p-terminal-prompt {
-        color: #FFD54F;
-    }
-
-    .p-terminal-response {
-        color: #9FA8DA;
-    }
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
-                    content: `<template>
-    <div class="layout-content">
-        <div class="content-section implementation">
-            <div class="card">
-                <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" />
-            </div>
-        </div>
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div class="card">
+        <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" />
     </div>
 </template>
 
 <script>
 import TerminalService from "primevue/terminalservice";
+
 export default {
     methods: {
         commandHandler(text) {
@@ -260,8 +176,87 @@ export default {
     beforeUnmount() {
         TerminalService.off('command', this.commandHandler);
     }
-}`,
-                    style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
+p {
+    margin-top: 0;
+}
+
+::v-deep(.dark-demo-terminal) {
+    background-color: #212121;
+    color: #ffffff;
+
+    .p-terminal-command {
+        color: #80CBC4;
+    }
+
+    .p-terminal-prompt {
+        color: #FFD54F;
+    }
+
+    .p-terminal-response {
+        color: #9FA8DA;
+    }
+}
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div class="card">
+        <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" />
+    </div>
+</template>
+
+<script>
+import { onMounted, onBeforeUnmount } from 'vue';
+import TerminalService from "primevue/terminalservice";
+
+export default {
+    setup() {
+        onMounted(() => {
+            TerminalService.on('command', commandHandler);
+        })
+
+        onBeforeUnmount(() => {
+            TerminalService.off('command', commandHandler);
+        })
+
+        const commandHandler = (text) => {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch(command) {
+                case "date":
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case "greet":
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case "random":
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = "Unknown command: " + command;
+            }
+            
+            TerminalService.emit('response', response);
+        }
+
+        return { commandHandler }
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
 p {
     margin-top: 0;
 }
@@ -286,9 +281,6 @@ p {
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 4bc3522d2..176b3869e 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -1,10 +1,8 @@
 <template>
-	<div class="content-section documentation">
-		<TabView>
-			<TabPanel header="Documentation">
-                <h5>ToastService</h5>
-                <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
-                    instance is created.</p>
+	<AppDoc name="ToastDemo" :sources="sources">
+        <h5>ToastService</h5>
+        <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
+            instance is created.</p>
 <pre v-code.script><code>
 import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
@@ -14,18 +12,18 @@ app.use(ToastService);
 
 </code></pre>
 
-				<h5>Import</h5>
+		<h5>Import</h5>
 <pre v-code.script><code>
 import Toast from 'primevue/toast';
 
 </code></pre>
 
-				<h5>Getting Started</h5>
-                <p>Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
-					summary and detail.</p>
+		<h5>Getting Started</h5>
+        <p>Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
+			summary and detail.</p>
 
-                <h5>Options API</h5>
-                <p><i>$toast</i> is available as a property in the application instance.</p>
+        <h5>Options API</h5>
+        <p><i>$toast</i> is available as a property in the application instance.</p>
 <pre v-code.script><code>
 export default {
     mounted() {
@@ -35,8 +33,8 @@ export default {
 
 </code></pre>
 
-                <h5>Composition API</h5>
-                <p>The toast instance can be injected with the <i>useToast</i> function.</p>
+        <h5>Composition API</h5>
+        <p>The toast instance can be injected with the <i>useToast</i> function.</p>
 <pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useToast } from "primevue/usetoast";
@@ -50,103 +48,103 @@ export default defineComponent({
 
 </code></pre>
 
-				<h5>Message API</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>severity</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Severity of the message.</td>
-                            </tr>
-                            <tr>
-                                <td>summary</td>
-                                <td>element</td>
-                                <td>null</td>
-                                <td>Summary content of the message.</td>
-                            </tr>
-                            <tr>
-                                <td>detail</td>
-                                <td>element</td>
-                                <td>null</td>
-                                <td>Detail content of the message.</td>
-                            </tr>
-                            <tr>
-                                <td>closable</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether the message can be closed manually using the close icon.</td>
-                            </tr>
-                            <tr>
-                                <td>life</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Delay in milliseconds to close the message automatically.</td>
-                            </tr>
-                            <tr>
-                                <td>group</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Key of the Toast to display the message.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Message API</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Severity of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>summary</td>
+                        <td>element</td>
+                        <td>null</td>
+                        <td>Summary content of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>detail</td>
+                        <td>element</td>
+                        <td>null</td>
+                        <td>Detail content of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>closable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the message can be closed manually using the close icon.</td>
+                    </tr>
+                    <tr>
+                        <td>life</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Delay in milliseconds to close the message automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Key of the Toast to display the message.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-                <h5>MessageService API</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>add</td>
-                                <td>message: Message instance</td>
-                                <td>Displays the message in a suitable Toast component.</td>
-                            </tr>
-                            <tr>
-                                <td>removeGroup</td>
-                                <td>group: Name of the message group</td>
-                                <td>Clears the messages that belongs to the group.</td>
-                            </tr>
-                            <tr>
-                                <td>removeAllGroup</td>
-                                <td>-</td>
-                                <td>Clears all the messages.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+        <h5>MessageService API</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>add</td>
+                        <td>message: Message instance</td>
+                        <td>Displays the message in a suitable Toast component.</td>
+                    </tr>
+                    <tr>
+                        <td>removeGroup</td>
+                        <td>group: Name of the message group</td>
+                        <td>Clears the messages that belongs to the group.</td>
+                    </tr>
+                    <tr>
+                        <td>removeAllGroup</td>
+                        <td>-</td>
+                        <td>Clears all the messages.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Severities</h5>
-				<p>There are four possible values for the severity of a message. Info is the default.</p>
+		<h5>Severities</h5>
+		<p>There are four possible values for the severity of a message. Info is the default.</p>
 
-				<ul>
-					<li>success</li>
-					<li>info</li>
-					<li>warn</li>
-					<li>error</li>
-				</ul>
+		<ul>
+			<li>success</li>
+			<li>info</li>
+			<li>warn</li>
+			<li>error</li>
+		</ul>
 
-				<h5>Position</h5>
-				<p>There are four positions available for the toast container defined by the <i>position</i> property that defaults to "top-right". Other
-					valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
-				</p>
+		<h5>Position</h5>
+		<p>There are four positions available for the toast container defined by the <i>position</i> property that defaults to "top-right". Other
+			valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
+		</p>
 <pre v-code><code>
 &lt;Toast /&gt;
 &lt;Toast position="top-left" /&gt;
@@ -159,10 +157,10 @@ export default defineComponent({
 
 </code></pre>
 
-                <h5>Groups</h5>
-                <p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group
-                    are forwarded to the default Toast component that does not have a group defined.
-                </p>
+        <h5>Groups</h5>
+        <p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group
+            are forwarded to the default Toast component that does not have a group defined.
+        </p>
 
 <pre v-code><code>
 &lt;Toast /&gt;
@@ -176,207 +174,130 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 
 </code></pre>
 
-				<h5>Clearing Messages</h5>
-				<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
+		<h5>Clearing Messages</h5>
+		<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
 
-				<h5>Properties</h5>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>group</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Unique identifier of a message group.</td>
-                            </tr>
-                            <tr>
-                                <td>position</td>
-                                <td>string</td>
-                                <td>top-right</td>
-                                <td>Position of the toast in viewport.</td>
-                            </tr>
-                            <tr>
-                                <td>autoZIndex</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether to automatically manage layering.</td>
-                            </tr>
-                            <tr>
-                                <td>baseZIndex</td>
-                                <td>number</td>
-                                <td>0</td>
-                                <td>Base zIndex value to use in layering.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Properties</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of a message group.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>top-right</td>
+                        <td>Position of the toast in viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Styling</h5>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>p-toast</td>
-                                <td>Main container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-toast-message</td>
-                                <td>Container of a message item.</td>
-                            </tr>
-                            <tr>
-                                <td>p-toast-icon-close</td>
-                                <td>Close icon of a message.</td>
-                            </tr>
-                            <tr>
-                                <td>p-toast-icon</td>
-                                <td>Severity icon.</td>
-                            </tr>
-                            <tr>
-                                <td>p-toast-message-content</td>
-                                <td>Container of message texts.</td>
-                            </tr>
-                            <tr>
-                                <td>p-toast-summary</td>
-                                <td>Summary of the message.</td>
-                            </tr>
-                            <tr>
-                                <td>p-toast-detail</td>
-                                <td>Detail of the message.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-toast</td>
+                        <td>Main container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-message</td>
+                        <td>Container of a message item.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-icon-close</td>
+                        <td>Close icon of a message.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-icon</td>
+                        <td>Severity icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-message-content</td>
+                        <td>Container of message texts.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-summary</td>
+                        <td>Summary of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-detail</td>
+                        <td>Detail of the message.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
 
-				<h5>Dependencies</h5>
-				<p>None.</p>
-			</TabPanel>
-
-			<TabPanel header="Source">
-                <div class="p-d-flex p-jc-between">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/toast" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <LiveEditor name="ToastDemo" :sources="sources" :toastService="true" :components="['Button']" />
-                </div>
-<pre v-code><code><template v-pre>
-&lt;h5&gt;Severities&lt;/h5&gt;
-&lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt;
-&lt;Button label="Info" class="p-button-info" @click="showInfo" /&gt;
-&lt;Button label="Warn" class="p-button-warning" @click="showWarn" /&gt;
-&lt;Button label="Error" class="p-button-danger" @click="showError" /&gt;
-
-&lt;h5&gt;Positions&lt;/h5&gt;
-&lt;Button label="Top Left" class="p-mr-2" @click="showTopLeft" /&gt;
-&lt;Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /&gt;
-&lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt;
-
-&lt;h5&gt;Options&lt;/h5&gt;
-&lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt;
-&lt;Button @click="showSticky" label="Sticky" /&gt;
-
-&lt;h5&gt;Remove All&lt;/h5&gt;
-&lt;Button @click="clear" label="Clear" /&gt;
-</template>
-</code></pre>
-
-<pre v-code.script><code>
-export default {
-	data() {
-		return {
-			messages: [],
-		}
-	},
-	methods: {
-		showSuccess() {
-            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
-        },
-        showInfo() {
-            this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
-        },
-        showWarn() {
-            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
-        },
-        showError() {
-            this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
-        },
-        showTopLeft() {
-            this.$toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
-        },
-        showBottomLeft() {
-            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
-        },
-        showBottomRight() {
-            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
-        },
-        showSticky() {
-            this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
-        },
-        showMultiple() {
-            this.$toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
-            this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
-            this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
-        },
-        clear() {
-            this.$toast.removeAllGroups();
-        }
-	}
-}
-
-</code></pre>
-			</TabPanel>
-		</TabView>
-	</div>
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
-import LiveEditor from '../liveeditor/LiveEditor';
 export default {
     data() {
         return {
             sources: {
-                'template': {
-                    content: ` <template>
-    <div class="layout-content">
+                'options-api': {
+                    tabName: 'Source',
+                    content: `
+<template>
+    <div>
         <Toast />
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
         <Toast position="bottom-right" group="br" />
 
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Severities</h5>
-                <Button label="Success" class="p-button-success" @click="showSuccess" />
-                <Button label="Info" class="p-button-info" @click="showInfo" />
-                <Button label="Warn" class="p-button-warning" @click="showWarn" />
-                <Button label="Error" class="p-button-danger" @click="showError" />
+        <div class="card">
+            <h5>Severities</h5>
+            <Button label="Success" class="p-button-success" @click="showSuccess" />
+            <Button label="Info" class="p-button-info" @click="showInfo" />
+            <Button label="Warn" class="p-button-warning" @click="showWarn" />
+            <Button label="Error" class="p-button-danger" @click="showError" />
 
-                <h5>Positions</h5>
-                <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
-                <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-                <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+            <h5>Positions</h5>
+            <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
+            <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
+            <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
 
-                <h5>Options</h5>
-                <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
-                <Button @click="showSticky" label="Sticky" />
+            <h5>Options</h5>
+            <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
+            <Button @click="showSticky" label="Sticky" />
 
-                <h5>Remove All</h5>
-                <Button @click="clear" label="Clear" />
-            </div>
+            <h5>Remove All</h5>
+            <Button @click="clear" label="Clear" />
         </div>
     </div>
 </template>
@@ -422,8 +343,10 @@ export default {
             this.$toast.removeAllGroups();
         }
     }
-}`,
-                    style: `<style lang="scss" scoped>
+}
+<\\/script>
+
+<style lang="scss" scoped>
 button {
     min-width: 10rem;
     margin-right: .5rem;
@@ -437,34 +360,34 @@ button {
 }
 </style>`
                 },
-                'api': {
-                    content: `<template>
-    <div class="layout-content">
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+    <div>
         <Toast />
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
         <Toast position="bottom-right" group="br" />
 
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Severities</h5>
-                <Button label="Success" class="p-button-success" @click="showSuccess" />
-                <Button label="Info" class="p-button-info" @click="showInfo" />
-                <Button label="Warn" class="p-button-warning" @click="showWarn" />
-                <Button label="Error" class="p-button-danger" @click="showError" />
+        <div class="card">
+            <h5>Severities</h5>
+            <Button label="Success" class="p-button-success" @click="showSuccess" />
+            <Button label="Info" class="p-button-info" @click="showInfo" />
+            <Button label="Warn" class="p-button-warning" @click="showWarn" />
+            <Button label="Error" class="p-button-danger" @click="showError" />
 
-                <h5>Positions</h5>
-                <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
-                <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-                <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+            <h5>Positions</h5>
+            <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
+            <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
+            <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
 
-                <h5>Options</h5>
-                <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
-                <Button @click="showSticky" label="Sticky" />
+            <h5>Options</h5>
+            <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
+            <Button @click="showSticky" label="Sticky" />
 
-                <h5>Remove All</h5>
-                <Button @click="clear" label="Clear" />
-            </div>
+            <h5>Remove All</h5>
+            <Button @click="clear" label="Clear" />
         </div>
     </div>
 </template>
@@ -509,10 +432,14 @@ export default defineComponent({
         const clear = () => {
             toast.removeAllGroups();
         }
-    return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, showBottomRight, showSticky, showMultiple, clear };
+
+        return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, 
+            showBottomRight, showSticky, showMultiple, clear };
     }
-});`,
-                    style: `<style lang="scss" scoped>
+});
+<\\/script>
+
+<style lang="scss" scoped>
 button {
     min-width: 10rem;
     margin-right: .5rem;
@@ -528,9 +455,6 @@ button {
                 }
             }
         }
-    },
-    components: {
-        LiveEditor
     }
 }
 </script>