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
login.vue
nuxt.config.ts
. 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"
}
}
}
}
},
})