How to integrate Vue Toastification in Nuxt 3

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'],
      }

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