Unable to change position of Toast

[JimJiraffe]

Description

I'm using UI Pro ** and the Dashboard Template ** and I just want the position of the toast to be top-center.

I've tried updating my app.config.ts as well as updating appConfig in code.

My app.config.ts is:

export default defineAppConfig({
  toaster: {
    position: 'top-center',
  },
  ui: {
    colors: {
      primary: 'green',
      neutral: 'zinc'
    }
  }
})

My code is:

const appConfig = useAppConfig()
appConfig.toaster.position = "top-center"

const toast = useToast();

I tried reversing the order of useToast() and useAppConfig() to no avail.

I'm sorry this is so basic, but I'm pulling my (remaining) hair out!

Thanks!!
Jim

[benjamincanac]

This is not done through app.config.ts but through the App component: https://ui.nuxt.com/components/app#props

We do it like this on the docs though but here's the binding: https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L52

[JimJiraffe]

Ah, Ok I think I understand. In my case I had only a <UApp> tag with no properties for toaster, so therefore only the defaults were ever loaded. Once I added a property for toaster, bound do the appConfig section, I was able to change the app config and it changed the position of my toast. So, toast is baked into <UApp> and if I ever wanted to use my own completely configured <UToast> tag, I would have to NOT use the <UApp> tag. (I originally added a <UToast> tag and I ended up with 2 toast messages popping.) Thanks !! Jim

…

On Wed, May 7, 2025 at 12:42 PM Benjamin Canac ***@***.***> wrote: *benjamincanac* left a comment (nuxt/ui#4104) <#4104 (comment)> This is not done through app.config.ts but through the App component: https://ui.nuxt.com/components/app#props We do it like this on the docs though but here's the binding: https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L52 — Reply to this email directly, view it on GitHub <#4104 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALFI5ZQ5ILH5QEU4M7DFSD325IZXJAVCNFSM6AAAAAB4ULLZLCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQNJZGI3TCMJUHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[benjamincanac]

You could also pass :toaster="null" and instantiate the <UToaster /> component yourself in the default slots of the <UApp /> component but this doesn't bring much value. https://github.com/nuxt/ui/blob/v3/src/runtime/components/App.vue#L50