DEV Community

Oussama Louelkadi
Oussama Louelkadi

Posted on

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)

Collapse
 
fabiovaz profile image
Fabio Vaz •

im using vue-toastification.maronato.dev/

Collapse
 
draikin profile image
Draikin • • Edited

How did you install it with Nuxt3?

Collapse
 
fabiovaz profile image
Fabio Vaz • • 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" })
})
Enter fullscreen mode Exit fullscreen mode

configure your nuxt.config.ts

  build:{
    transpile: ['vue-toastification']
  }
Enter fullscreen mode Exit fullscreen mode

import and use:

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

toast.success('Sucesso!')
toast.error('Erro mizeravi')
Enter fullscreen mode Exit fullscreen mode

I hope it helps

Thread Thread
 
draikin profile image
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)

Thread Thread
 
fabiovaz profile image
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...

Collapse
 
dazeb profile image
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!

Collapse
 
oussamalkd profile image
Oussama Louelkadi •

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

Read next

sanditzz profile image

Fetching Mock Data in Nuxt.js Using MockAPI.io

PO -

jacobandrewsky profile image

Nuxt Tips Collection

Jakub Andrzejewski -

webcraft-notes profile image

Optimizing E-Commerce Navigation with Pagination, Sorting, and Filter Features

WebCraft Notes -

jacobandrewsky profile image

AI Powered Image Transformations in Nuxt with Cloudinary

Jakub Andrzejewski -