diff --git a/apps/showcase/doc/splitbutton/BasicDoc.vue b/apps/showcase/doc/splitbutton/BasicDoc.vue
index 2fce74fed..a2bfd80e4 100644
--- a/apps/showcase/doc/splitbutton/BasicDoc.vue
+++ b/apps/showcase/doc/splitbutton/BasicDoc.vue
@@ -26,12 +26,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -63,11 +65,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
+                }
                 { label: 'Upload', to: '/fileupload' }
             ]
         };
@@ -96,22 +101,24 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/DisabledDoc.vue b/apps/showcase/doc/splitbutton/DisabledDoc.vue
index 8ab4deac8..bb1f6ce63 100644
--- a/apps/showcase/doc/splitbutton/DisabledDoc.vue
+++ b/apps/showcase/doc/splitbutton/DisabledDoc.vue
@@ -26,12 +26,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -63,12 +65,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -105,12 +109,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/IconsDoc.vue b/apps/showcase/doc/splitbutton/IconsDoc.vue
index 6b4f8bd3a..0287d8e25 100644
--- a/apps/showcase/doc/splitbutton/IconsDoc.vue
+++ b/apps/showcase/doc/splitbutton/IconsDoc.vue
@@ -28,13 +28,15 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-power-off',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -68,13 +70,15 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-power-off',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -103,24 +107,26 @@ const items = [
         label: 'Update',
         icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
         icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
+        separator: true
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-power-off',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/NestedDoc.vue b/apps/showcase/doc/splitbutton/NestedDoc.vue
index cdb4f080c..a6093104c 100644
--- a/apps/showcase/doc/splitbutton/NestedDoc.vue
+++ b/apps/showcase/doc/splitbutton/NestedDoc.vue
@@ -166,6 +166,11 @@ export default {
                 }
             ]
         };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
     }
 };
 <\/script>
@@ -247,10 +252,19 @@ const items = [
         ]
     }
 ];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
 <\/script>
 `
             }
         };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
     }
 };
 </script>
diff --git a/apps/showcase/doc/splitbutton/OutlinedDoc.vue b/apps/showcase/doc/splitbutton/OutlinedDoc.vue
index d66143de3..79651768c 100644
--- a/apps/showcase/doc/splitbutton/OutlinedDoc.vue
+++ b/apps/showcase/doc/splitbutton/OutlinedDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         }
     },
@@ -124,22 +128,24 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/RaisedDoc.vue b/apps/showcase/doc/splitbutton/RaisedDoc.vue
index 955540f7a..6e33f9865 100644
--- a/apps/showcase/doc/splitbutton/RaisedDoc.vue
+++ b/apps/showcase/doc/splitbutton/RaisedDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -134,12 +138,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
index 2df5f5b8c..c74f82479 100644
--- a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
+++ b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
@@ -32,12 +32,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -81,12 +83,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -130,12 +134,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/RoundedDoc.vue b/apps/showcase/doc/splitbutton/RoundedDoc.vue
index 797c27a73..5b039dcb7 100644
--- a/apps/showcase/doc/splitbutton/RoundedDoc.vue
+++ b/apps/showcase/doc/splitbutton/RoundedDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -134,12 +138,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/SeverityDoc.vue b/apps/showcase/doc/splitbutton/SeverityDoc.vue
index baa0c3f11..bc69f68d7 100644
--- a/apps/showcase/doc/splitbutton/SeverityDoc.vue
+++ b/apps/showcase/doc/splitbutton/SeverityDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -134,12 +138,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/SizesDoc.vue b/apps/showcase/doc/splitbutton/SizesDoc.vue
index 7c008118a..4e4811fcc 100644
--- a/apps/showcase/doc/splitbutton/SizesDoc.vue
+++ b/apps/showcase/doc/splitbutton/SizesDoc.vue
@@ -17,26 +17,25 @@ export default {
             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',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/upload' }
+                }
             ],
             code: {
                 basic: `
@@ -61,26 +60,25 @@ export default {
             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',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -107,28 +105,28 @@ import { useToast } from "primevue/usetoast";
 const toast = useToast();
 
 const items = [
-{
-    label: 'Update',
-    icon: 'pi pi-refresh',
-    command: () => {
-        toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
     }
-},
-{
-    label: 'Delete',
-    icon: 'pi pi-times',
-    command: () => {
-        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' }];
+];
 
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
diff --git a/apps/showcase/doc/splitbutton/TemplateDoc.vue b/apps/showcase/doc/splitbutton/TemplateDoc.vue
index 1493b44cd..673e1152b 100644
--- a/apps/showcase/doc/splitbutton/TemplateDoc.vue
+++ b/apps/showcase/doc/splitbutton/TemplateDoc.vue
@@ -20,26 +20,25 @@ export default {
             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',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -70,26 +69,25 @@ export default {
             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',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -121,26 +119,25 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/TextDoc.vue b/apps/showcase/doc/splitbutton/TextDoc.vue
index 2979f64f0..7f9084033 100644
--- a/apps/showcase/doc/splitbutton/TextDoc.vue
+++ b/apps/showcase/doc/splitbutton/TextDoc.vue
@@ -32,12 +32,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -81,12 +83,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -130,12 +134,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/pages/splitbutton/index.vue b/apps/showcase/pages/splitbutton/index.vue
index 78b9efc4d..143795822 100755
--- a/apps/showcase/pages/splitbutton/index.vue
+++ b/apps/showcase/pages/splitbutton/index.vue
@@ -42,16 +42,16 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'nested',
-                    label: 'Nested',
-                    component: NestedDoc
-                },
                 {
                     id: 'icons',
                     label: 'Icons',
                     component: IconsDoc
                 },
+                {
+                    id: 'nested',
+                    label: 'Nested',
+                    component: NestedDoc
+                },
                 {
                     id: 'severity',
                     label: 'Severity',