How To Make Toast Notification In Vue 3 In less than 30 Seconds

Let’s add a toast notification or message to our Vue 3 application with a beautiful design and variants.

It’s “vue3-toastify” package, it has enough features to make it your first choice, and it’s so easy to set up and customize. Let’s discover it,

Installation

In your Vue application, you install Vue 3 Toastify via the below command

npm install --save vue3-toastify

If you are using yarn here is the code

yarn add vue3-toastify

In your component import the package and start using it, Let’s say we want to welcome our users with a toast notification. I suppose you use vue-router and views for pages src\views\Home.vue

<template>
    <div class="container min-h-content py-5 text-center">
        <div class="row py-lg-5">
            <div class="col-lg-6 col-md-8 mx-auto">
                <i class="bi bi-house h1"></i>
                <h1>This is home </h1>
            </div>
        </div>
    </div>
</template>
<script>
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
export default {
    setup() {
        toast('welcome to my website');
    },
}
</script>

As you can see we imported toast from vue3-toastify and the CSS as well, we use the class in the setup of the component.

Example

Let’s make another example with more options, I will create a component of buttons to show different types of toast.

<template>
    <button type="button" @click="showToatWarning()" class="btn btn-warning">warning</button>
    <button type="button" @click="showToatSuccess()" class="btn btn-success">success</button>
    <button type="button" @click="showToatInfo()" class="btn btn-info">info</button>
</template>
<script>
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
export default {
    methods:{
        showToatWarning(){
            toast.warning('Wow warning!',{
                autoClose: 1000,
            });   
        },
        showToatSuccess(){
            toast.success('Wow success!',{
                autoClose: 1000,
            });   
        },
        showToatInfo(){
            toast.info('Wow info!',{
                autoClose: 1000,
            });   
        }
    }
}
</script>

It’s a really good package to use and it works with bootstrap 5 as well. That’s all, thank you