diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index 86b1858b4..af81d1b20 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -2,20 +2,30 @@
     <DocSectionText v-bind="$attrs">
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <div class="doc-section-description">
+        <p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p>
+    </div>
+    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
                 basic: `
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
 app.use(ConfirmationService);`
+            },
+            code2: {
+                basic: `
+import { useConfirm } from "primevue/useconfirm";
+
+const confirm = useConfirm();`
             }
         };
     }
diff --git a/doc/confirmpopup/ConfirmationServiceDoc.vue b/doc/confirmpopup/ConfirmationServiceDoc.vue
index af619b0c3..2ae1ccd6d 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -2,20 +2,30 @@
     <DocSectionText v-bind="$attrs">
         <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <div class="doc-section-description">
+        <p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p>
+    </div>
+    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
                 basic: `
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
 app.use(ConfirmationService);`
+            },
+            code2: {
+                basic: `
+import { useConfirm } from "primevue/useconfirm";
+
+const confirm = useConfirm();`
             }
         };
     }
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index 8353b0704..1ff9475ba 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -2,20 +2,30 @@
     <DocSectionText v-bind="$attrs">
         <p>Toast component is controlled via the <i>ToastService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <div class="doc-section-description">
+        <p><i>$toast</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useToast</i> function for Composition API.</p>
+    </div>
+    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
                 basic: `
 import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
 
 const app = createApp(App);
 app.use(ToastService);`
+            },
+            code2: {
+                basic: `
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();`
             }
         };
     }