diff --git a/src/components/primevue.vue b/src/components/primevue.vue
index 119887a..e0ebe5d 100644
--- a/src/components/primevue.vue
+++ b/src/components/primevue.vue
@@ -1,10 +1,23 @@
 <script setup lang="ts">
 // @ts-expect-error - Ignore missing types
 import ToastEventBus from 'primevue/toasteventbus';
+import type { ToastServiceMethods } from 'primevue/toastservice';
 
-function showToast() {
-  ToastEventBus.emit('add', { severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
-}
+// https://github.com/primefaces/primevue/blob/61929eae7526015af0362fc5889f2af7527403d1/packages/primevue/src/toastservice/ToastService.js
+const ToastService: ToastServiceMethods = {
+  add: (message) => {
+    ToastEventBus.emit('add', message);
+  },
+  remove: (message) => {
+    ToastEventBus.emit('remove', message);
+  },
+  removeGroup: (group) => {
+    ToastEventBus.emit('remove-group', group);
+  },
+  removeAllGroups: () => {
+    ToastEventBus.emit('remove-all-groups');
+  },
+};
 </script>
 
 <template>
@@ -26,6 +39,14 @@ function showToast() {
 
     <DatePicker dateFormat="dd/mm/yy" />
 
-    <Button @click="showToast">ToastService</Button>
+    <Button @click="ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 })">
+      ToastService
+    </Button>
   </div>
 </template>
+
+<style>
+.p-toast {
+  max-width: calc(100% - 50px);
+}
+</style>