Oussama Louelkadi

Posted on Jun 9, 2023

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

#nuxt

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

Top comments (7)

Fabio Vaz • Oct 28 '23

im using vue-toastification.maronato.dev/

Draikin • Nov 2 '23 • Edited

How did you install it with Nuxt3?

Fabio Vaz • Nov 3 '23 • Edited

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 • Nov 3 '23

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 • Nov 3 '23

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 • Jun 9 '23

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 • Jun 10 '23

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

DEV Community

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

Top comments (7)

Read next

Build a Fast and Lightweight Rust Vector Search App with Rig & LanceDB

Deep Analysis : Why Google is Losing in the Race of AI?

Devcon 2024 Highlights, Smart Contract Revolution, Yoav Weiss on AA Future and AA Developer Survey

Learn Assembly in 3 Minutes ⏳💻