How to show global custom alert message in vue 3
In this article, you will learn how to make a custom global alert message in Vue 3 JS. So let's get started.
Step 1: Create a Project in Vue 3 JS from this link - https://www.fundaofwebit.com/post/how-to-install-and-run-the-vue-js-3-project
Step 2: Install Bootstrap so we can use its Toast to display the message.
npm install bootstrap
Bootstrap versions may differ in the future. On 26-12-2023 installed "bootstrap": "^5.3.2"
Step 3: Import Bootstrap in "main.js" or "main.ts" file in the following path: src/main.js
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'
import { createApp } from 'vue'
...
...
Step 4: Create a component named AlertToast.vue in the following path: src\components\AlertToast.vue and paste the below code
<template>
<div v-if="messageLabel" class="position-fixed top-0 end-0 me-2 mt-3" style="z-index: 5">
<div
class="toast"
:class="messageLabel != '' ? 'show':''"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div
class="toast-header text-white bg-primary"
:class="'bg-'+messageType"
>
<strong class="me-auto text-capitalize">{{messageType}}</strong>
<button
type="button"
class="btn-close"
@click="dismissToast"
aria-label="Close"
></button>
</div>
<div class="toast-body bg-white">
{{ messageLabel }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "AlertToast",
data() {
return {
messageType: "",
messageLabel: "",
};
},
methods: {
showSuccess(message, type = null) {
this.messageType = type !== null ? type?.toLowerCase() : "success";
this.messageLabel = message;
setTimeout(() => {
this.dismissToast();
}, 4000);
},
dismissToast() {
this.messageType = '';
this.messageLabel = '';
},
},
};
</script>
<style>
</style>
Step 5: Create a file named alertToast.js in the following path: src\components\js\alertToast.js
import { ref } from 'vue';
import AlertToast from '@/components/AlertToast.vue';
const AlertToastPlugin = {
install(app) {
const toastComponent = ref(null);
app.component('AlertToast', AlertToast);
app.config.globalProperties.$showToast = function (message, type) {
if (toastComponent.value && toastComponent.value.showSuccess) {
toastComponent.value.showSuccess(message, type);
} else {
console.error('Error showing success toast');
}
};
app.mixin({
mounted() {
if (this.$options.name === "AlertToast") {
toastComponent.value = this;
}
},
});
},
};
export default AlertToastPlugin;
Step 6: Configure this in the "main.js" or "main.ts" file as shown below
import AlertToastPlugin from '@/components/AlertToast.vue';
const app = createApp(App)
app.use(AlertToastPlugin);
Step 7: Open App.vue file. Add the AlertToast.vue Component (which you have created in the above step 4) in the App.vue file in the following path: src/App.vue
<template>
<AlertToast />
...
...
</template>
<script setup>
import AlertToast from '@/components/AlertToast.vue'
...
</script>
After this setup, you can use the this.$showToast("Your success message") method in any Vue component of your application to trigger and display the success toast message globally.
For example, in any Vue component
<template>
<div>
<!-- Your other components and content -->
<button class="btn btn-primary" @click="btnClicked">Show Alert Toast</button>
</div>
</template>
<script>
export default {
methods: {
btnClicked(){
this.$showToast('This is a global success message!','Warning');
},
},
}
</script>
This approach sets up a global method "$showToast" that can be accessed from any component to trigger the display of the success toast message. Adjust the naming and structure according to your application's requirements
Thanks for reading.