What are people using for Toasts?
I'm already using Tailwind and DaisyUI. DaisyUI has utility classes that can style a toast but obviously there is no behaviours attached (adding toasts, toasts disappear after a timer, drag or [x] to close toast). I have played around with adding these behaviours myself but seems silly to re-invent that wheel if I can reuse. I also like the separation of concerns with headless UI but it doesn't have toasts.
What are you guys using for your Nuxt 3 Apps?
7 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I think I'm just going to integrate notifications into my Pinia state and use DaisyUI to style them. I looked at all the component libraries and they all feel a bit heavy and when it comes to actually doing the toast behaviours, they don't actually have them (e.g. headless UI and FlowbiteI usually like to get a bit funky with notification state anyway e.g. keeping around a list of notifications that have already 'closed' in case you want to go back to them. If I get this working, will post a link to the source here.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
thanks @ven yep I saw this.... and I am concerned about the accessibility aspects that were mentioned e.g. modals not really being modal etc. The consensus though in the comments for that video seemed to be that Daisy didn't have behaviour (js) so it was unreasonable to expect it to do stuff like limiting the tab context. Again, I feel like headless ui has the right approach in that it only does the behaviour and lets you style as you wish.. but headless.ui doesn't have toasts and they apparently don't intend to support them either.
Got it working, it's not too ugly.. no additional libraries, just Pinia and DaisyUI https://gist.github.com/JavascriptMick/d2830e8703e706fe0a0f6703b0877f3f
Gist
Vue 3 Toast notifications using Pinia and DaisyUI
Vue 3 Toast notifications using Pinia and DaisyUI. GitHub Gist: instantly share code, notes, and snippets.
oh, also, the creator of DaisyUI has indicated that the suboptimal behaviour of modal will be fixed in version 3 by using the html dialog element https://github.com/saadeghi/daisyui/issues/1341#issuecomment-1504395570
GitHub
Open Modal doesn't prevent background scrolling · Issue #1341 · saa...
Description I installed the Modal component in my Solidjs project and while it open/closes fine, it doesn't prevent the background from scrolling as it does with the example on DaisyUI. I'v...
I also wrote a simple wrapper for the DaisyUI Modal that makes it nicer to use https://gist.github.com/JavascriptMick/77838a21d4ec1b5606dd5ae09ad21a67
Gist
Modal Component wrapper for Nuxt 3 + DaisyUI
Modal Component wrapper for Nuxt 3 + DaisyUI. GitHub Gist: instantly share code, notes, and snippets.