Nuxt•5mo ago

nuxt ui toaster location won't change

export default defineAppConfig({
  toaster: {
    position: 'bottom-left',
    expand: true,
    duration: 5000,
  },
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate',
    },
    modal: {
      slots: {
        header: 'bg-muted rounded-t-lg',
        close: 'hover:bg-accented',
      },
    },
    navigationMenu: {
      slots: {
        linkTrailingBadge: 'bg-primary/10 text-primary ring ring-inset ring-primary/25',
      },
    },
  },
})

export default defineAppConfig({
  toaster: {
    position: 'bottom-left',
    expand: true,
    duration: 5000,
  },
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate',
    },
    modal: {
      slots: {
        header: 'bg-muted rounded-t-lg',
        close: 'hover:bg-accented',
      },
    },
    navigationMenu: {
      slots: {
        linkTrailingBadge: 'bg-primary/10 text-primary ring ring-inset ring-primary/25',
      },
    },
  },
})

I've tried a few different configs based on the docs and discord conversations here but my toaster position will not change? I put this in my app.config.ts as per the github example

3 Replies

kapa.ai•5mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue is that the toaster configuration in your app.config.ts is not the correct place to set the global toaster position for Nuxt UI. According to the official documentation, the toaster prop should be set on the <UApp> component in your app.vue, not in app.config.ts. Correct usage:

<template>
  <UApp :toaster="{ position: 'bottom-left', expand: true, duration: 5000 }">
    <NuxtPage />
  </UApp>
</template>

<template>
  <UApp :toaster="{ position: 'bottom-left', expand: true, duration: 5000 }">
    <NuxtPage />
  </UApp>
</template>

The app.config.ts file is used for theming and UI configuration, but not for runtime props like the toaster position. The documentation explicitly shows that the toaster.position prop is set on the UApp component, not in the config file. This is why your changes in app.config.ts have no effect on the toaster's position Change global position App component API. Summary:
Move your toaster configuration from app.config.ts to the UApp component in app.vue as shown above. This should resolve the issue and allow you to change the toaster's position. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•5mo ago

ah okay thank you that worked

Gaming

Programming

nuxt ui toaster location won't change

Did you find this page helpful?