From e512a2556160a14d77215e5c77ed4f12e630d483 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Thu, 25 Sep 2025 14:12:29 +0100
Subject: [PATCH 1/4] feat(useToast): add `maxToasts` global configuration

---
 src/runtime/composables/useToast.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/runtime/composables/useToast.ts b/src/runtime/composables/useToast.ts
index e2f05cf50b..9a16b582ac 100644
--- a/src/runtime/composables/useToast.ts
+++ b/src/runtime/composables/useToast.ts
@@ -1,5 +1,5 @@
 import { ref, nextTick } from 'vue'
-import { useState } from '#imports'
+import { useState, useAppConfig } from '#imports'
 import type { ToastProps, ToastEmits } from '../types'
 import type { EmitsToProps } from '../types/utils'
 
@@ -9,8 +9,9 @@ export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<Toa
 }
 
 export function useToast() {
+  const appConfig = useAppConfig()
   const toasts = useState<Toast[]>('toasts', () => [])
-  const maxToasts = 5
+  const maxToasts = (appConfig.toaster as any)?.maxToasts ?? 5
   const running = ref(false)
   const queue: Toast[] = []
 

From a81d6913b45e3bbd063243d0d1b17ee616d4ba97 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Mon, 29 Sep 2025 11:16:53 +0100
Subject: [PATCH 2/4] use injectionKey

---
 src/runtime/components/Toaster.vue  | 14 +++++++++++---
 src/runtime/composables/useToast.ts | 12 +++++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index ad6d47a02c..5ecc7ee219 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -27,6 +27,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
+  /**
+   * Maximum number of toasts to display at once.
+   * @defaultValue 5
+   */
+  max?: number
   class?: any
   ui?: Toaster['slots']
 }
@@ -41,11 +46,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, toRef } from 'vue'
+import { ref, computed, toRef, provide } from 'vue'
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { useToast } from '../composables/useToast'
+import { useToast, toastMaxInjectionKey } from '../composables/useToast'
 import { usePortal } from '../composables/usePortal'
 import { omit } from '../utils'
 import { tv } from '../utils/tv'
@@ -55,13 +60,16 @@ const props = withDefaults(defineProps<ToasterProps>(), {
   expand: true,
   portal: true,
   duration: 5000,
-  progress: true
+  progress: true,
+  max: 5
 })
 defineSlots<ToasterSlots>()
 
 const { toasts, remove } = useToast()
 const appConfig = useAppConfig() as Toaster['AppConfig']
 
+provide(toastMaxInjectionKey, toRef(() => props.max))
+
 const providerProps = useForwardProps(reactivePick(props, 'duration', 'label', 'swipeThreshold'))
 const portalProps = usePortal(toRef(() => props.portal))
 
diff --git a/src/runtime/composables/useToast.ts b/src/runtime/composables/useToast.ts
index 9a16b582ac..077bbaf78b 100644
--- a/src/runtime/composables/useToast.ts
+++ b/src/runtime/composables/useToast.ts
@@ -1,5 +1,5 @@
-import { ref, nextTick } from 'vue'
-import { useState, useAppConfig } from '#imports'
+import { ref, nextTick, type InjectionKey, type Ref, inject } from 'vue'
+import { useState } from '#imports'
 import type { ToastProps, ToastEmits } from '../types'
 import type { EmitsToProps } from '../types/utils'
 
@@ -8,10 +8,12 @@ export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<Toa
   onClick?: (toast: Toast) => void
 }
 
+export const toastMaxInjectionKey: InjectionKey<Ref<number | undefined>> = Symbol('nuxt-ui.toast-max')
+
 export function useToast() {
-  const appConfig = useAppConfig()
   const toasts = useState<Toast[]>('toasts', () => [])
-  const maxToasts = (appConfig.toaster as any)?.maxToasts ?? 5
+  const maxToasts = inject(toastMaxInjectionKey, undefined)
+
   const running = ref(false)
   const queue: Toast[] = []
 
@@ -29,7 +31,7 @@ export function useToast() {
 
       await nextTick()
 
-      toasts.value = [...toasts.value, toast].slice(-maxToasts)
+      toasts.value = [...toasts.value, toast].slice(-(maxToasts?.value ?? 5))
     }
 
     running.value = false

From 542c3df6b35431dc9b7e9582cca0d6b0c2a8ed93 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 9 Oct 2025 14:58:29 +0200
Subject: [PATCH 3/4] light clean

---
 src/runtime/composables/useToast.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/runtime/composables/useToast.ts b/src/runtime/composables/useToast.ts
index 077bbaf78b..c9fcdfc3ee 100644
--- a/src/runtime/composables/useToast.ts
+++ b/src/runtime/composables/useToast.ts
@@ -1,18 +1,19 @@
-import { ref, nextTick, type InjectionKey, type Ref, inject } from 'vue'
+import type { Ref, InjectionKey } from 'vue'
+import { ref, nextTick, inject } from 'vue'
 import { useState } from '#imports'
 import type { ToastProps, ToastEmits } from '../types'
 import type { EmitsToProps } from '../types/utils'
 
+export const toastMaxInjectionKey: InjectionKey<Ref<number | undefined>> = Symbol('nuxt-ui.toast-max')
+
 export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {
   id: string | number
   onClick?: (toast: Toast) => void
 }
 
-export const toastMaxInjectionKey: InjectionKey<Ref<number | undefined>> = Symbol('nuxt-ui.toast-max')
-
 export function useToast() {
   const toasts = useState<Toast[]>('toasts', () => [])
-  const maxToasts = inject(toastMaxInjectionKey, undefined)
+  const max = inject(toastMaxInjectionKey, undefined)
 
   const running = ref(false)
   const queue: Toast[] = []
@@ -31,7 +32,7 @@ export function useToast() {
 
       await nextTick()
 
-      toasts.value = [...toasts.value, toast].slice(-(maxToasts?.value ?? 5))
+      toasts.value = [...toasts.value, toast].slice(-(max?.value ?? 5))
     }
 
     running.value = false

From e5ab996a5be0fadf1fef682120e7f7aa4219b983 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 9 Oct 2025 15:42:15 +0200
Subject: [PATCH 4/4] up

---
 docs/app/app.config.ts                        |  5 ++-
 .../examples/toaster/ToasterMaxExample.vue    | 25 +++++++++++
 docs/content/docs/2.components/toast.md       | 42 ++++++++++++++++---
 playgrounds/nuxt/app/app.config.ts            |  5 ++-
 .../nuxt/app/pages/components/toast.vue       |  1 +
 5 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 docs/app/components/content/examples/toaster/ToasterMaxExample.vue

diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index bf927c4904..54398990e5 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -1,8 +1,9 @@
 export default defineAppConfig({
   toaster: {
     position: 'bottom-right' as const,
-    expand: true,
-    duration: 5000
+    duration: 5000,
+    max: 5,
+    expand: true
   },
   theme: {
     radius: 0.25,
diff --git a/docs/app/components/content/examples/toaster/ToasterMaxExample.vue b/docs/app/components/content/examples/toaster/ToasterMaxExample.vue
new file mode 100644
index 0000000000..04fdb9e970
--- /dev/null
+++ b/docs/app/components/content/examples/toaster/ToasterMaxExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div>
+    <UFormField
+      label="toaster.max"
+      size="sm"
+      :ui="{
+        wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+        label: 'text-muted px-2 py-1.5',
+        container: 'mt-0'
+      }"
+      class="inline-flex ring ring-accented rounded-sm"
+    >
+      <UInput
+        v-model="appConfig.toaster.max"
+        color="neutral"
+        variant="soft"
+        :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
+      />
+    </UFormField>
+  </div>
+</template>
diff --git a/docs/content/docs/2.components/toast.md b/docs/content/docs/2.components/toast.md
index 1f44cf35f2..a14dcd740f 100644
--- a/docs/content/docs/2.components/toast.md
+++ b/docs/content/docs/2.components/toast.md
@@ -256,18 +256,44 @@ name: 'toast-example'
 :toaster-duration-example
 ::
 
-::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L5"}
+::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L4"}
 In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.
 ::
 
-### Stacked toasts
+### Change global max :badge{label="Soon"}
 
-Set the `toaster.expand` prop to `false` on the [App](/docs/components/app#props) component to display stacked toasts.
+Change the `toaster.max` prop on the [App](/docs/components/app#props) component to change the max number of toasts displayed at once.
 
-::tip
-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 = { max: 3 }
+</script>
+
+<template>
+  <UApp :toaster="toaster">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+::component-example
+---
+prettier: true
+name: 'toast-example'
+---
+
+#options
+:toaster-max-example
+::
+
+::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L5"}
+In this example, we use the `AppConfig` to configure the `max` prop of the `Toaster` component globally.
 ::
 
+### Stacked toasts
+
+Set the `toaster.expand` prop to `false` on the [App](/docs/components/app#props) component to display stacked toasts (inspired by [Sonner](https://sonner.emilkowal.ski/)).
+
 ```vue [app.vue]
 <script setup lang="ts">
 const toaster = { expand: true }
@@ -280,6 +306,10 @@ const toaster = { expand: true }
 </template>
 ```
 
+::tip
+You can hover over the toasts to expand them. This will also pause the timer of the toasts.
+::
+
 ::component-example
 ---
 prettier: true
@@ -290,7 +320,7 @@ name: 'toast-example'
 :toaster-expand-example
 ::
 
-::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L4"}
+::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L6"}
 In this example, we use the `AppConfig` to configure the `expand` prop of the `Toaster` component globally.
 ::
 
diff --git a/playgrounds/nuxt/app/app.config.ts b/playgrounds/nuxt/app/app.config.ts
index 6ec06d1483..e01eaf188b 100644
--- a/playgrounds/nuxt/app/app.config.ts
+++ b/playgrounds/nuxt/app/app.config.ts
@@ -2,8 +2,9 @@ export default defineAppConfig({
   dir: 'ltr',
   toaster: {
     position: 'bottom-right' as const,
-    expand: true,
-    duration: 5000
+    duration: 5000,
+    max: 5,
+    expand: true
   },
   ui: {
     colors: {
diff --git a/playgrounds/nuxt/app/pages/components/toast.vue b/playgrounds/nuxt/app/pages/components/toast.vue
index 6691f61cc2..a20f6169c1 100644
--- a/playgrounds/nuxt/app/pages/components/toast.vue
+++ b/playgrounds/nuxt/app/pages/components/toast.vue
@@ -129,6 +129,7 @@ function removeToast() {
     <UCheckbox v-model="appConfig.toaster.expand" label="Expand" />
     <USelect v-model="appConfig.toaster.position" :items="positions" placeholder="Position" />
     <UInput v-model="appConfig.toaster.duration" label="Duration" type="number" />
+    <UInput v-model="appConfig.toaster.max" label="Max" type="number" />
   </Navbar>
 
   <div class="flex items-center gap-2">