Nuxt•3w ago

Center Notifications on the screen

Hey, I want to make my notification toast appear at the bottom center of the screen. How would I do that?

2 Replies

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To center your notification toast at the bottom of the screen in Nuxt, you can modify the position of the UNotifications component. Here's how you can do it: 1. In your app.config.ts file, you can configure the position of the notifications by adjusting the ui.notifications.position property. Here's an example of how to set it to appear at the bottom center:

export default defineAppConfig({
  ui: {
    notifications: {
      position: 'bottom-0 left-1/2 transform -translate-x-1/2'
    }
  }
})

export default defineAppConfig({
  ui: {
    notifications: {
      position: 'bottom-0 left-1/2 transform -translate-x-1/2'
    }
  }
})

This configuration uses Tailwind CSS classes to position the notifications: - bottom-0: Aligns the notifications to the bottom of the screen - left-1/2: Moves the notifications halfway across the screen horizontally - transform -translate-x-1/2: Shifts the notifications back by half their width, centering them Notification Component (https://ui.nuxt.com/components/notification#usage) documentation provides information on how to configure the position of notifications. Remember to add the UNotifications component to your app, preferably in app.vue:

<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

    <UNotifications />
  </div>
</template>

<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

    <UNotifications />
  </div>
</template>

This setup will display your notification toasts centered at the bottom of the screen. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Gaming

Programming

Center Notifications on the screen