docs(toast): improve examples for global App settings (#4597)

Author: cyrilf

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