diff --git a/apps/showcase/doc/splitbutton/BasicDoc.vue b/apps/showcase/doc/splitbutton/BasicDoc.vue
index a2bfd80e4..f781ec380 100644
--- a/apps/showcase/doc/splitbutton/BasicDoc.vue
+++ b/apps/showcase/doc/splitbutton/BasicDoc.vue
@@ -101,13 +101,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/DisabledDoc.vue b/apps/showcase/doc/splitbutton/DisabledDoc.vue
index bb1f6ce63..1c0f994bb 100644
--- a/apps/showcase/doc/splitbutton/DisabledDoc.vue
+++ b/apps/showcase/doc/splitbutton/DisabledDoc.vue
@@ -99,13 +99,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/IconsDoc.vue b/apps/showcase/doc/splitbutton/IconsDoc.vue
index 0287d8e25..05ea4e26d 100644
--- a/apps/showcase/doc/splitbutton/IconsDoc.vue
+++ b/apps/showcase/doc/splitbutton/IconsDoc.vue
@@ -107,14 +107,14 @@ const items = [
         label: 'Update',
         icon: 'pi pi-refresh',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/NestedDoc.vue b/apps/showcase/doc/splitbutton/NestedDoc.vue
index a6093104c..792c617e0 100644
--- a/apps/showcase/doc/splitbutton/NestedDoc.vue
+++ b/apps/showcase/doc/splitbutton/NestedDoc.vue
@@ -263,7 +263,7 @@ const save = () => {
     },
     methods: {
         save() {
-            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+            toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
         }
     }
 };
diff --git a/apps/showcase/doc/splitbutton/OutlinedDoc.vue b/apps/showcase/doc/splitbutton/OutlinedDoc.vue
index 79651768c..e841e615b 100644
--- a/apps/showcase/doc/splitbutton/OutlinedDoc.vue
+++ b/apps/showcase/doc/splitbutton/OutlinedDoc.vue
@@ -128,13 +128,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/RaisedDoc.vue b/apps/showcase/doc/splitbutton/RaisedDoc.vue
index 6e33f9865..600e0793f 100644
--- a/apps/showcase/doc/splitbutton/RaisedDoc.vue
+++ b/apps/showcase/doc/splitbutton/RaisedDoc.vue
@@ -128,13 +128,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
index c74f82479..cc41f05c9 100644
--- a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
+++ b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
@@ -124,13 +124,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/RoundedDoc.vue b/apps/showcase/doc/splitbutton/RoundedDoc.vue
index 5b039dcb7..608abed43 100644
--- a/apps/showcase/doc/splitbutton/RoundedDoc.vue
+++ b/apps/showcase/doc/splitbutton/RoundedDoc.vue
@@ -128,13 +128,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/SeverityDoc.vue b/apps/showcase/doc/splitbutton/SeverityDoc.vue
index bc69f68d7..7433b8eb8 100644
--- a/apps/showcase/doc/splitbutton/SeverityDoc.vue
+++ b/apps/showcase/doc/splitbutton/SeverityDoc.vue
@@ -128,13 +128,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/SizesDoc.vue b/apps/showcase/doc/splitbutton/SizesDoc.vue
index 4e4811fcc..68f27de0f 100644
--- a/apps/showcase/doc/splitbutton/SizesDoc.vue
+++ b/apps/showcase/doc/splitbutton/SizesDoc.vue
@@ -108,13 +108,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/TemplateDoc.vue b/apps/showcase/doc/splitbutton/TemplateDoc.vue
index 673e1152b..cc7d71c17 100644
--- a/apps/showcase/doc/splitbutton/TemplateDoc.vue
+++ b/apps/showcase/doc/splitbutton/TemplateDoc.vue
@@ -120,13 +120,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
diff --git a/apps/showcase/doc/splitbutton/TextDoc.vue b/apps/showcase/doc/splitbutton/TextDoc.vue
index 7f9084033..aa32f6310 100644
--- a/apps/showcase/doc/splitbutton/TextDoc.vue
+++ b/apps/showcase/doc/splitbutton/TextDoc.vue
@@ -124,13 +124,13 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            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 });
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {