Nuxt•7d ago

UI v3 toaster position settings in app.config.ts

How to set default position in app.config.ts Is this right way?

export default defineAppConfig({
  toaster: { position: "top-right", duration: 0 },
  theme: {
    radius: 0.5,
    blackAsPrimary: false,
  },
  ui: {
    colors: {
      primary: "sky",
      neutral: "slate",
    },
  },
})

export default defineAppConfig({
  toaster: { position: "top-right", duration: 0 },
  theme: {
    radius: 0.5,
    blackAsPrimary: false,
  },
  ui: {
    colors: {
      primary: "sky",
      neutral: "slate",
    },
  },
})

Nuxt version info

- Operating System: `Darwin`
- Node Version:     `v22.6.0`
- Nuxt Version:     `3.16.2`
- CLI Version:      `3.25.0`
- Nitro Version:    `2.11.9`
- Package Manager:  `[email protected]`
- Builder:          `-`
- User Config:      `compatibilityDate`, `css`, `devtools`, `modules`
- Runtime Modules:  `@nuxt/[email protected]`, `@nuxt/[email protected]`, `@nuxt/[email protected]`
- Build Modules:    `-`

- Operating System: `Darwin`
- Node Version:     `v22.6.0`
- Nuxt Version:     `3.16.2`
- CLI Version:      `3.25.0`
- Nitro Version:    `2.11.9`
- Package Manager:  `[email protected]`
- Builder:          `-`
- User Config:      `compatibilityDate`, `css`, `devtools`, `modules`
- Runtime Modules:  `@nuxt/[email protected]`, `@nuxt/[email protected]`, `@nuxt/[email protected]`
- Build Modules:    `-`

5 Replies

kapa.ai•7d ago

Hi @なるこです☄. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The configuration you've provided for setting the toaster position in app.config.ts isn't quite right. In Nuxt UI v3, the toaster configuration should be placed under the ui.app.toaster property, not at the root level. Here's the correct way to configure the toaster position and duration in app.config.ts:

export default defineAppConfig({
  ui: {
    app: {
      toaster: { 
        position: "top-right", 
        duration: 0 
      }
    },
    colors: {
      primary: "sky",
      neutral: "slate",
    },
  },
  theme: {
    radius: 0.5,
    blackAsPrimary: false,
  }
})

export default defineAppConfig({
  ui: {
    app: {
      toaster: { 
        position: "top-right", 
        duration: 0 
      }
    },
    colors: {
      primary: "sky",
      neutral: "slate",
    },
  },
  theme: {
    radius: 0.5,
    blackAsPrimary: false,
  }
})

According to the Nuxt UI documentation, the App component accepts a toaster prop that can be configured globally through the app config. The toaster configuration includes properties like position (which can be "top-left", "top-center", "top-right", "bottom-left", "bottom-center", or "bottom-right") and duration (time in milliseconds that each toast should remain visible) App Component. You can see examples of how this is used in the documentation for the Toast component, where they demonstrate changing the global position and duration Toast Component. The ui.colors configuration is correct for setting your color scheme, as shown in the Nuxt UI documentation UI Library. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

なるこです☄OP•7d ago

Not solved. @kapa.ai This config didn't solved my problems.

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry to hear that the configuration I suggested didn't solve your problem. Let me provide a more accurate solution based on the documentation. Looking more closely at the Nuxt UI documentation, the toaster configuration should be set through the UApp component. There are two ways to do this: 1. Directly in your app.vue file:

<template>
  <UApp :toaster="{ position: 'top-right', duration: 0 }">
    <NuxtPage />
  </UApp>
</template>

<template>
  <UApp :toaster="{ position: 'top-right', duration: 0 }">
    <NuxtPage />
  </UApp>
</template>

2. Or through the app.config.ts file, but with the correct structure:

export default defineAppConfig({
  ui: {
    toaster: {
      position: "top-right",
      duration: 0
    },
    colors: {
      primary: "sky",
      neutral: "slate",
    },
  },
  theme: {
    radius: 0.5,
    blackAsPrimary: false,
  }
})

export default defineAppConfig({
  ui: {
    toaster: {
      position: "top-right",
      duration: 0
    },
    colors: {
      primary: "sky",
      neutral: "slate",
    },
  },
  theme: {
    radius: 0.5,
    blackAsPrimary: false,
  }
})

According to the App component documentation, the toaster prop accepts properties like position and duration. The Toast component documentation also shows examples of changing these settings globally. Make sure you have wrapped your app with the UApp component as shown in the installation guide:

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

If you're still experiencing issues, could you please share what specific problem you're encountering with the toast positioning? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Gaming

Programming

UI v3 toaster position settings in app.config.ts

Did you find this page helpful?