What's the best toast/notification package to use in Nuxt 3?

I'm wondering what's the best toast/notification package that can be used in my Nuxt 3 App working fine. if you have tried some of the libs/packages with Nuxt 3. please share the doc with me.

Thanks

Comments

[Fabio Vaz]

im using vue-toastification.maronato.dev/

[Draikin]

How did you install it with Nuxt3?

[Fabio Vaz]

install vue toastification:
yarn add vue-toastification

create a plugin plugins/vue-toastificaton.ts

import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(Toast, { position: "top-right" })
})

configure your nuxt.config.ts

  build:{
    transpile: ['vue-toastification']
  }

import and use:

import { useToast } from 'vue-toastification'
const toast = useToast()

toast.success('Sucesso!')
toast.error('Erro mizeravi')

I hope it helps

[Draikin]

Wow it does work now, thanks!! I'm curious though, where did you get the idea to use the transpile property (as opposed to the plugins property as instructed on nuxt.com/docs/guide/directory-stru...)?

I can't find anything in Nuxt docs that specifies your method. (I must say Nuxt docs constantly frustrates me so that's not surprising)

[Fabio Vaz]

you can read the old documentation of nuxtjs
v2.nuxt.com/docs/configuration-glo...

you will need make it in anothers plugins like Swiper...

[Darren Bennett]

NuxtLabsUI under notifications.

Flowbite have been using this with Nuxt + Tailwind with nice results.

Element Plus. Not tried yet but looks ok and is listed on the Official Nuxt3 Modules.

Ant Design Vue. iirc Ant Design works on the main Vuejs team plus the Vite team.

If you want a better idea of what modules have been updated recently i use the Nuxt3 Modules site or the Nuxt3 devtool which allows u to install a lot of components easily.

All the best!

[Oussama Louelkadi]

Thank you so much @dazeb this will help a lot.
I appreciate it