From 4670fda12de3f34b3319a3bbac587f02720ffeed Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 10 Oct 2020 16:49:47 +0300
Subject: [PATCH] Fixed #535

---
 exports/usetoast.js                  |  2 ++
 src/components/toast/ToastService.js |  5 +++-
 src/components/toast/useToast.js     | 12 ++++++++++
 src/views/toast/ToastDoc.vue         | 35 ++++++++++++++++++++--------
 4 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 exports/usetoast.js
 create mode 100644 src/components/toast/useToast.js

diff --git a/exports/usetoast.js b/exports/usetoast.js
new file mode 100644
index 000000000..3221bdaa2
--- /dev/null
+++ b/exports/usetoast.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/toast/useToast.js');
\ No newline at end of file
diff --git a/src/components/toast/ToastService.js b/src/components/toast/ToastService.js
index 70d273cef..860e8d3ad 100755
--- a/src/components/toast/ToastService.js
+++ b/src/components/toast/ToastService.js
@@ -1,8 +1,9 @@
 import ToastEventBus from './ToastEventBus';
+import {PrimeVueToastSymbol} from './useToast';
 
 export default {
     install: (app) => {
-        app.config.globalProperties.$toast = {
+        const ToastService = {
             add: (message) => {
                 ToastEventBus.emit('add', message);
             },
@@ -13,5 +14,7 @@ export default {
                 ToastEventBus.emit('remove-all-groups');
             }
         };
+        app.config.globalProperties.$toast = ToastService;
+        app.provide(PrimeVueToastSymbol, ToastService);
     }
 };
\ No newline at end of file
diff --git a/src/components/toast/useToast.js b/src/components/toast/useToast.js
new file mode 100644
index 000000000..13d019121
--- /dev/null
+++ b/src/components/toast/useToast.js
@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+
+export const PrimeVueToastSymbol = Symbol();
+
+export function useToast() {
+    const PrimeVueToast = inject(PrimeVueToastSymbol);
+    if (!PrimeVueToast) {
+        throw new Error('No PrimeVue Toast provided!');
+    } 
+    
+    return PrimeVueToast;
+}
\ No newline at end of file
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 5a895d577..7784dec70 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -30,15 +30,35 @@ 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.</p>
+                <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>
 
-				<p>A single message is represented by the Message interface in PrimeVue that defines various properties such as severity,
-					summary and detail. Messages are displayed by using the <i>add</i> method of the <b>$toast</b> property of the application.</p>
+                <h5>Options API</h5>
+                <p><i>$toast</i> is available as a property in the application instance.</p>
 <pre v-code.script>
 <code>
-this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
+export default {
+    mounted() {
+        this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
+    }
+}
+
+</code></pre>
+
+                <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";
+
+export default defineComponent({
+    setup() {
+        const toast = useToast();
+        toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
+    }
+})
 
 </code></pre>
 
@@ -173,11 +193,6 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 
 				<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>
-<pre v-code.script>
-<code>
-this.$toast.removeAllGroups();
-
-</code></pre>
 
 				<h5>Properties</h5>
 				<div class="doc-tablewrapper">