In this episode, we dive into actually displaying notifications in our Vue app using the popular Vue Toastification package. First, we chat about why we're going with this specific package and how you can use any other notification package if you prefer—most will have a pretty similar setup.
We walk through the installation process using NPM and quickly touch on the version differences if you're working with Vue 2 vs. Vue 3. Then, we get into importing and setting up the Toastification styles, so everything looks as it should.
Once that's sorted, we integrate the toast plugin and show how to use its useToast
composable inside our own notifications plugin. We demonstrate triggering a notification and see it pop up in the browser—super satisfying!
Finally, we experiment with showing different types of notifications, like "info" and "error." We note that right now the type defaults to "info", and we wrap up by pointing out that in the next episode, we'll work on automatically detecting and displaying the correct notification type. So, now we've got global, plug-and-play toasts in our app!