From f560df572908fd7a08e0ca2269f62692d2b041f9 Mon Sep 17 00:00:00 2001
From: cyril <1302282+cyrilf@users.noreply.github.com>
Date: Fri, 25 Jul 2025 17:53:21 +0200
Subject: [PATCH] docs(toast): improve examples for global App settings

---
 docs/content/3.components/toast.md | 40 ++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/docs/content/3.components/toast.md b/docs/content/3.components/toast.md
index ea270399f4..09a0b639ed 100644
--- a/docs/content/3.components/toast.md
+++ b/docs/content/3.components/toast.md
@@ -188,10 +188,26 @@ name: 'toast-orientation-example'
 
 ## Examples
 
+::note{to="/components/app"}
+Nuxt UI provides an **App** component that wraps your app to provide global configurations.
+::
+
 ### Change global position
 
 Change the `toaster.position` prop on the [App](/components/app#props) component to change the position of the toasts.
 
+```vue [app.vue]
+<script setup lang="ts">
+const toaster = { position: 'bottom-right' }
+</script>
+
+<template>
+  <UApp :toaster="toaster">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
 ::component-example
 ---
 prettier: true
@@ -210,6 +226,18 @@ In this example, we use the `AppConfig` to configure the `position` prop of the
 
 Change the `toaster.duration` prop on the [App](/components/app#props) component to change the duration of the toasts.
 
+```vue [app.vue]
+<script setup lang="ts">
+const toaster = { duration: 5000 }
+</script>
+
+<template>
+  <UApp :toaster="toaster">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
 ::component-example
 ---
 prettier: true
@@ -232,6 +260,18 @@ Set the `toaster.expand` prop to `false` on the [App](/components/app#props) com
 You can hover over the toasts to expand them. This will also pause the timer of the toasts.
 ::
 
+```vue [app.vue]
+<script setup lang="ts">
+const toaster = { expand: true }
+</script>
+
+<template>
+  <UApp :toaster="toaster">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
 ::component-example
 ---
 prettier: true