How to integrate Vue Toastification in Nuxt 3

Disclaimer

• This article will show you the important steps required to run the package. For detailed guidance, visit the official website.

• The setup process may vary in future updates. This docs is written for Nuxt version 3 and vue-toastification version 2

---

Setup

• Install npm install vue-toastification@next

Create plugins/toast.js

// toast.js
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(Toast, {
        hideProgressBar : true
    });
  })

Important Step

• Transpiling the package or else it will throw an error related to commonjs in build time.

// nuxt.config.js
build:{
        // vue-toastification - old commonjs module 
        transpile: ['vue-toastification'],
      }

• After this step , you can follow the documentation.

---

It's time for a programming pun

Why was the web developer cold?

Because they forgot to wrap themselves in a CSS class!

If you have liked this article then do check out my portfolio