Responsive Toast Position

[carlos-duran]

Description

Hello, NuxtUI is helping me a lot. Thanks.

I know we can specify the position of the toasts globally in app.config but my case is to have them at top-center in mobile, and bottom-right in desktop.

How can I achieve this? Thank you

[zAlweNy26]

I would use something like const isDesktop = useMediaQuery('(min-width: 768px)', { ssrWidth: 768 }) (composable from VueUse) and then, in the UApp component:

<UApp :toaster="{ position: isDesktop ? 'bottom-right' : 'top-center' }">
    <!-- your content -->
</UApp>