nuxt
Position change of notifications in app.config.ts has no effect
Environment
- local development enviroment
Version
latest
Reproduction
export default defineAppConfig({ ui: { primary: "rose", gray: "slate",
button: {
rounded: "rounded-full",
},
notifications: {
position: "top-0 right-0",
},
},
});
Description
Changing to position of the Notifications in the app.config.ts has no effect. Can't change the position to top right.
export default defineAppConfig({ ui: { primary: "rose", gray: "slate",
button: {
rounded: "rounded-full",
},
notifications: {
position: "top-0 right-0",
},
},
});
Additional context
No response
Logs
No response
hello. its problem strategy https://ui.nuxt.com/getting-started/theming#components
so i have next config:
notifications: {
position: 'top-0 right-0'
},
take a look generated template:
<div class="fixed flex flex-col justify-end z-[55] end-0 bottom-0 left-0 top-0 right-0 w-full sm:w-96" role="region"/>
wa are have this class list: end-0 bottom-0 left-0 top-0 right-0. This happened because of the mixing of classes.
Temporary solution is use UNotifications component in your app.vue like this:
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<UNotifications :ui="{ strategy: 'override', position: 'top-0 right-0' }"/>
</template>
take a look now on generated template:
Classes are now overwritten.
I think this will be resolved with the release v3 (https://github.com/nuxt/ui/issues/1289)
thx. and sorry for my bad english.
