diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 053e1cbd4..78d6a23b3 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -186,7 +186,7 @@ import AvatarGroup from 'primevue/avatargroup';
 					<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" :components="['AvatarGroup']" />
+					<LiveEditor name="AvatarDemo" :sources="sources" :directives="['Badge']" :components="['AvatarGroup']" />
 				</div>
 <pre v-code>
 <code><template v-pre>
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index b62ca1484..5d1a54605 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -185,7 +185,7 @@ Vue.directive('badge', BadgeDirective);
                     <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" :components="['Button']" />
+                    <LiveEditor name="BadgeDemo" :sources="sources" :directives="['Badge']" :components="['Button']" />
                 </div>
 <pre v-code>
 <code><template v-pre>
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 8bbd625c5..75a8fee0b 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -449,7 +449,7 @@ export default {
                                 </div>
                                 <div>
                                     <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
+                                    <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" />
@@ -476,7 +476,7 @@ export default {
                                 </div>
                                 <div>
                                     <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
+                                    <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" />
@@ -504,7 +504,7 @@ export default {
                                 </div>
                                 <div>
                                     <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">{{slotProps.data.price}}</h6>
+                                    <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" />
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index 521776232..cfd370758 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -248,7 +248,7 @@ export default {
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
-                    <LiveEditor name="ConfirmDialogDemo" :sources="sources" :components="['Button']" />
+                    <LiveEditor name="ConfirmDialogDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
                 </div>
 <pre v-code>
 <code><template v-pre>
@@ -427,40 +427,96 @@ export default {
                 },
                 'api': {
                     content: `<template>
-    <Toast />
-    <ConfirmDialog />
-    <Button @click="del" icon="pi pi-check" label="Confirm"></Button>
+    <div class="layout-content">
+        <Toast />
+        <div class="content-section implementation">
+            <ConfirmDialog></ConfirmDialog>
+            <ConfirmDialog group="positionDialog"></ConfirmDialog>
+
+            <div class="card">
+                <h5>Basic</h5>
+                <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+
+                <h5>Position</h5>
+                <div class="p-grid p-dir-col">
+                    <div class="p-col">
+                        <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
+                        <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
+                    </div>
+                    <div class="p-col">
+                        <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
+                        <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
+                        <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
+                    </div>
+                    <div class="p-col">
+                        <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
+                        <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
+                        <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-import { ref, defineComponent } from "vue";
+import { defineComponent } from "vue";
 import { useConfirm } from "primevue/useconfirm";
 import { useToast } from "primevue/usetoast";
 
 export default defineComponent({
     setup() {
-        const message = ref(null);
         const confirm = useConfirm();
         const toast = useToast();
-
-        const del = () => {
+        
+        const confirm1 = () => {
             confirm.require({
-            message: "Are you sure you want to proceed?",
-            header: "Confirmation",
-            icon: "pi pi-exclamation-triangle",
-            accept: () => {
-                //callback to execute when user confirms the action
-                toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
-            },
-            reject: () => {
-                //callback to execute when user rejects the action
-                toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
-            }
-        })
-    }
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
 
-    return { message, del };
-  }
+        const confirm2 = () => {
+            confirm.require({
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+
+        const confirmPosition = (position) => {
+            confirm.require({
+                key: 'positionDialog',
+                message: 'Do you want to delete this record?',
+                header: 'Delete Confirmation',
+                icon: 'pi pi-info-circle',
+                position: position,
+                accept: () => {
+                    toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+
+        return { confirm1, confirm2, confirmPosition };
+    }
 });`
                 }
             }
diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue
index 5fa7ebbe1..13e0fff82 100644
--- a/src/views/confirmpopup/ConfirmPopupDoc.vue
+++ b/src/views/confirmpopup/ConfirmPopupDoc.vue
@@ -262,7 +262,7 @@ export default {
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
-                    <LiveEditor name="ConfirmPopupDemo" :sources="sources" :components="['Button']" />
+                    <LiveEditor name="ConfirmPopupDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
                 </div>
 <pre v-code>
 <code><template v-pre>
@@ -371,9 +371,17 @@ export default {
                 },
                 'api': {
                     content: `<template>
-  <ConfirmPopup></ConfirmPopup>
+    <div class="layout-content">
+        <Toast />
+        <div class="content-section implementation">
+            <ConfirmPopup></ConfirmPopup>
 
-  <Button @click="del($event)" icon="pi pi-check" label="Confirm"></Button>
+            <div class="card">
+                <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -386,22 +394,36 @@ export default defineComponent({
         const confirm = useConfirm();
         const toast = useToast();
 
-        const del = (event) => {
+        const confirm1 = (event) => {
             confirm.require({
-                message: "Are you sure you want to proceed?",
-                icon: "pi pi-exclamation-triangle",
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
                 accept: () => {
-                  //callback to execute when user confirms the action
-                  toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                    toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
                 },
                 reject: () => {
-                  //callback to execute when user rejects the action
-                  toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
-                },
+                    toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
             });
-        };
+        }
 
-        return { del };
+        const confirm2 = (event) => {
+            confirm.require({
+                target: event.currentTarget,
+                message: 'Do you want to delete this record?',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+
+        return { confirm1, confirm2 };
     },
 })
 `
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 78f55058b..472099c20 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -420,7 +420,7 @@ export default {
                     <a href="https://github.com/primefaces/primevue/tree/master/src/showcase/dataview" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
-                    <LiveEditor name="DataViewDemo" :sources="sources" service="ProductService" data="products" :components="['Button', 'Dropdown', 'Rating']" />
+                    <LiveEditor name="DataViewDemo" :sources="sources" service="ProductService" data="products" :components="['DataViewLayoutOptions', 'Button', 'Dropdown', 'Rating']" />
                 </div>
 
 <pre v-code>
@@ -559,7 +559,7 @@ export default {
 					<template #list="slotProps">
 						<div class="p-col-12">
 							<div class="product-list-item">
-								<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
+								<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
 								<div class="product-list-detail">
 									<div class="product-name">{{slotProps.data.name}}</div>
 									<div class="product-description">{{slotProps.data.description}}</div>
@@ -567,7 +567,7 @@ export default {
 									<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{slotProps.data.category}}</span>
 								</div>
 								<div class="product-list-action">
-									<span class="product-price">{{slotProps.data.price}}</span>
+									<span class="product-price">\${{slotProps.data.price}}</span>
 									<Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
 									<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
 								</div>
@@ -592,7 +592,7 @@ export default {
 									<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
 								</div>
 								<div class="product-grid-item-bottom">
-									<span class="product-price">{{slotProps.data.price}}</span>
+									<span class="product-price">\${{slotProps.data.price}}</span>
 									<Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
 								</div>
 							</div>
@@ -677,7 +677,7 @@ export default {
 	width: 100%;
 
 	img {
-		width: 100px;
+		width: 50px;
 		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 		margin-right: 2rem;
 	}
@@ -719,7 +719,6 @@ export default {
 	}
 
 	img {
-		width: 75%;
 		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 		margin: 2rem 0;
 	}
@@ -740,7 +739,6 @@ export default {
 		align-items: center;
 
 		img {
-			width: 75%;
 			margin: 2rem 0;
 		}
 
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index 106d2eaa0..f0043f945 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -74,7 +74,7 @@ import DeferredContent from 'primevue/deferredcontent';
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
-                    <LiveEditor name="DeferredContentDemo" :sources="sources" service="ProductService" data="products-small" :components="['DataTable', 'Column']" />
+                    <LiveEditor name="DeferredContentDemo" :sources="sources" service="ProductService" :toastService="true" data="products-small" :components="['DataTable', 'Column']" />
                 </div>
 <pre v-code>
 <code><template v-pre>
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index d86bfec41..3027403e8 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -435,6 +435,9 @@ export default {
                             <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
                             <div>{{ slotProps.value.name }}</div>
                         </div>
+                        <span v-else>
+                            {{slotProps.placeholder}}
+                        </span>
                     </template>
                     <template #option="slotProps">
                       <div class="country-item">
@@ -485,8 +488,7 @@ export default {
     width: 14rem;
 }
 
-.country-item,
-.country-item-value {
+.country-item {
     img {
         width: 17px;
         margin-right: 0.5rem;
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index ffc39b8e7..38dc6b67c 100755
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -330,7 +330,7 @@ myUploader(event) {
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/fileupload" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
-					<LiveEditor name="FileUploadDemo" :sources="sources" />
+					<LiveEditor name="FileUploadDemo" :sources="sources" :toastService="true" />
 				</div>
 <pre v-code>
 <code><template v-pre>
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 33bf6184d..3f6b6211e 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -303,7 +303,7 @@ export default {
                                 <span class="product-category">{{slotProps.item.category}}</span>
                             </div>
                             <div class="product-list-action">
-                                <h6 class="p-mb-2">{{slotProps.item.price}}</h6>
+                                <h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                             </div>
                         </div>
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index 14803ac30..181df91cb 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -494,7 +494,7 @@ export default {
                     <a href="https://github.com/primefaces/primevue/tree/master/src/views/organizationchart" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                         <span>View on GitHub</span>
                     </a>
-                    <LiveEditor name="OrganizationChartDemo" :sources="sources" />
+                    <LiveEditor name="OrganizationChartDemo" :sources="sources" :toastService="true" />
                 </div>
 <pre v-code>
 <code><template v-pre>
@@ -728,7 +728,7 @@ export default {
                     <template #person="slotProps">
                         <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
                         <div class="node-content">
-                            <img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
+                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
                             <div>{{slotProps.node.data.name}}</div>
                         </div>
                     </template>
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 465a8359c..a2a8abf48 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -159,7 +159,7 @@ toggle(event) {
 					<a href="https://github.com/primefaces/primevue/tree/master/src/views/overlaypanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 						<span>View on GitHub</span>
 					</a>
-					<LiveEditor name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button', 'DataTable', 'Column']" />
+					<LiveEditor name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small" :toastService="true" :components="['Button', 'DataTable', 'Column']" />
 				</div>
 <pre v-code>
 <code><template v-pre>
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 044a9c526..5e895e0bc 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -365,10 +365,10 @@ export default {
                             <div class="product-list-detail">
                                 <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
                                 <i class="pi pi-tag product-category-icon"></i>
-                                <span class="product-category">{{slotProps.item.category}}</span>
+                                <span class="product-category">{slotProps.item.category}}</span>
                             </div>
                             <div class="product-list-action">
-                                <h6 class="p-mb-2">{{slotProps.item.price}}</h6>
+                                <h6 class="p-mb-2">\${{{slotProps.item.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                             </div>
                         </div>
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index 980cca404..b50be6953 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -189,9 +189,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/splitbutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-					<span>View on GitHub</span>
-				</a>
+				<div class="p-d-flex p-jc-between">
+					<a href="https://github.com/primefaces/primevue/tree/master/src/views/splitbutton" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+						<span>View on GitHub</span>
+					</a>
+					<LiveEditor name="SplitButtonDemo" :sources="sources" :toastService="true" />
+				</div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -263,3 +266,84 @@ export default {
 		</TabView>
 	</div>
 </template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+	data() {
+		return {
+			sources:{
+				'template': {
+					content:`<template>
+	<div class="layout-content">
+		<Toast />
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
+
+                <h5>Severities</h5>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/'
+                    }
+                },
+                {   label: 'Upload',
+                    icon: 'pi pi-upload',
+                    to: '/fileupload'
+                }
+            ]
+        }
+    },
+    methods: {
+        save() {
+            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+        }
+    }
+}`,
+					style: `<style lang="scss" scoped>
+.p-splitbutton {
+    margin-right: .5rem;
+}
+</style>`			}
+			}
+		}
+	},
+	components: {
+		LiveEditor
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 5a10e8cd3..e67e4b9b7 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -142,7 +142,7 @@ export default {
                     <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" />
+                    <LiveEditor name="TerminalDemo" :sources="sources" :terminalService="true" />
                 </div>
 <pre v-code>
 <code>
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index c552da4d8..006a26ae8 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -286,7 +286,7 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
                     <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" :components="['Button']" />
+                    <LiveEditor name="ToastDemo" :sources="sources" :toastService="true" :components="['Button']" />
                 </div>
 <pre v-code>
 <code><template v-pre>
@@ -370,6 +370,10 @@ export default {
                     content: ` <template>
     <div class="layout-content">
         <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>
@@ -452,8 +456,34 @@ button {
                 },
                 'api': {
                     content: `<template>
-    <Toast />
-    <Button @click="set" icon="pi pi-check" label="Confirm"></Button>
+    <div class="layout-content">
+        <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" />
+
+                <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>Remove All</h5>
+                <Button @click="clear" label="Clear" />
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -463,12 +493,55 @@ import { useToast } from "primevue/usetoast";
 export default defineComponent({
     setup() {
         const toast = useToast();
-        const set = () => {
-            toast.add({ severity: "info", summary: "Info Message", detail: "Message Content", life: 3000 });
-        };
-    return { set };
+       
+        const showSuccess = () => {
+            toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
+        }
+        const showInfo = () => {
+            toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
+        }
+        const showWarn = () => {
+            toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', life: 3000});
+        }
+        const showError = () => {
+            toast.add({severity:'error', summary: 'Error Message', detail:'Message Content', life: 3000});
+        }
+        const showTopLeft = () => {
+            toast.add({severity: 'info', summary: 'Info Message', detail: 'Message Content', group: 'tl', life: 3000});
+        }
+        const showBottomLeft = () => {
+            toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Content', group: 'bl', life: 3000});
+        }
+        const showBottomRight = () => {
+            toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', group: 'br', life: 3000});
+        }
+        const showSticky = () => {
+            toast.add({severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
+        }
+        const showMultiple = () => {
+            toast.add({severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000});
+            toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
+            toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
+        }
+        const clear = () => {
+            toast.removeAllGroups();
+        }
+    return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, showBottomRight, showSticky, showMultiple, clear };
     }
-});`
+});`,
+                    style: `<style lang="scss" scoped>
+button {
+    min-width: 10rem;
+    margin-right: .5rem;
+}
+
+@media screen and (max-width: 960px) {
+    button {
+        width: 100%;
+        margin-bottom: .5rem;
+    }
+}
+</style>`
                 }
             }
         }
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index 88c0cc678..7d2ad103d 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -176,7 +176,7 @@ export default {
                 {   label: 'Upload',
                     icon: 'pi pi-upload',
                     command: () => {
-                        this.$router.push('fileupload');
+                        window.location.hash = "/fileupload"
                     }
                 }
             ]
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
index a4bf58a8c..3f96882d1 100755
--- a/src/views/tooltip/TooltipDoc.vue
+++ b/src/views/tooltip/TooltipDoc.vue
@@ -93,7 +93,7 @@ directives: {
                 <a href="https://github.com/primefaces/primevue/tree/master/src/views/tooltip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
                     <span>View on GitHub</span>
                 </a>
-                <LiveEditor name="TooltipDemo" :sources="sources" :components="['InputText', 'Button']"/>
+                <LiveEditor name="TooltipDemo" :sources="sources" :directives="['Tooltip']" :components="['InputText', 'Button']"/>
                 </div>
 <pre v-code>
 <code><template v-pre>