N
Nuxt•3w ago
parakoopa

Toast config Nuxt UI

Cannot seem to get my Toast notifications to show anywhere but across the entire bottom of the screen... Is there some config I am missing? I am reading the docs and it seems this should work 🧐 . Any help is appreciated! app.config.ts 
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 bottom-[unset]',
        }
    }
})
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 bottom-[unset]',
        }
    }
})
login.vue 
// omited
watch(isError, (newValue) => {
  console.log(newValue)
    if (newValue) {
        toast.add({
          title: 'Login failed. Please try again.',
          color: 'red',
          timeout: 5000,
        },
      );
    }
});
// omited
watch(isError, (newValue) => {
  console.log(newValue)
    if (newValue) {
        toast.add({
          title: 'Login failed. Please try again.',
          color: 'red',
          timeout: 5000,
        },
      );
    }
});
nuxt.config.ts 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  ssr: false,
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', "@nuxt/ui"],
  googleFonts: {
    families: {
      "Gothic A1": {
        wght: [100, 200, 300, 400, 500, 600, 700, 800, 900],
        regular: true,
      },
    },

  },
  tailwindcss: {
    exposeConfig: true,
    config: {
      theme: {
        fontFamily: {
          "sans": ["Gothic A1", "sans-serif"],
        },
        extend: {
          dropShadow: {
            brutal: "5px 5px 0px black"
          }
        }
      }
    }
  },
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  ssr: false,
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', "@nuxt/ui"],
  googleFonts: {
    families: {
      "Gothic A1": {
        wght: [100, 200, 300, 400, 500, 600, 700, 800, 900],
        regular: true,
      },
    },

  },
  tailwindcss: {
    exposeConfig: true,
    config: {
      theme: {
        fontFamily: {
          "sans": ["Gothic A1", "sans-serif"],
        },
        extend: {
          dropShadow: {
            brutal: "5px 5px 0px black"
          }
        }
      }
    }
  },
})
5 Replies
kapa.ai
kapa.ai•3w ago
Hi @parakoopa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources and your configuration, it seems you're on the right track, but there might be a small issue in your configuration. Let's address this step by step: 1. First, make sure you have added the <UNotifications /> component to your app, preferably inside app.vue. This is crucial for the notifications to appear. According to the Nuxt UI Notification documentation, you should have something like this in your app.vue: 
<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

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

    <UNotifications />
  </div>
</template>
2. Your app.config.ts configuration looks correct. However, there's a small adjustment you might want to make. According to the documentation, the default position is bottom-0 end-0. Your current configuration: 
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 bottom-[unset]',
        }
    }
})
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 bottom-[unset]',
        }
    }
})
This should position the notifications at the top of the screen. If you want them at the top-right, you can modify it to: 
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 end-0',
        }
    }
})
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 end-0',
        }
    }
})
3. Your login.vue code for adding a toast notification looks correct. 4. The nuxt.config.ts file seems fine and doesn't interfere with the notification system. If you've implemented all these steps and the notifications are still appearing at the bottom of the screen, there might be a CSS issue overriding the positioning. You can try inspecting the notification element in your browser's developer tools to see if there are any conflicting styles. If the problem persists, you might want to try setting the position directly on the <UNotifications /> component as a prop: 
<UNotifications position="top-0 end-0" />
<UNotifications position="top-0 end-0" />
Remember that the changes in app.config.ts might require a restart of your Nuxt development server to take effect. If none of these solutions work, it's possible there might be a bug or conflict with other parts of your application that aren't visible in the provided code snippets. In that case, you might want to create a minimal reproduction of the issue and seek further assistance from the Nuxt UI community or maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@291353299142049793> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
parakoopa
parakoopaOP•3w ago
These changes did not seem to have any effect
Wm
Wm•3w ago
/app.config.ts 
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 left-0 bottom-[unset]' // positioned top left
        }

    }
})
export default defineAppConfig({
    ui: {
        notifications: {
            position: 'top-0 left-0 bottom-[unset]' // positioned top left
        }

    }
})
/pages/index.vue 
<script setup lang="ts">
const toast = useToast()
const active = ref(false)

onMounted(() =>
  setTimeout(() => {
    active.value = true
  }, 5000)
)

watch(active, (value) => {
  if (value) toast.add({ title: 'Hello world!' })
})

</script>

<template>
<main>
  <UNotifications />
</main>
</template>
<script setup lang="ts">
const toast = useToast()
const active = ref(false)

onMounted(() =>
  setTimeout(() => {
    active.value = true
  }, 5000)
)

watch(active, (value) => {
  if (value) toast.add({ title: 'Hello world!' })
})

</script>

<template>
<main>
  <UNotifications />
</main>
</template>
onMounted + Timeout is to mimic an event Do you have useToast() defined on the page triggering the notification along with <UNotifications> in the template? The three images show different position settings set in /app.config.ts
No description
No description
No description
Wm
Wm•3w ago
Additionally '@nuxtjs/tailwindcss' ought to be removed from package.json, and nuxt.config.ts, because nuxt/ui is already importing it. From my understanding the tailwindcss module can cause conflicts with the nuxt/ui package. /package.json 
 "dependencies": {
    "@nuxt/ui": "^2.21.0",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },
 "dependencies": {
    "@nuxt/ui": "^2.21.0",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },
/nuxt.config.ts 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/ui'],

})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/ui'],

})
Did you have any success with the changes @parakoopa ?

Did you find this page helpful?