How to make a custom global alert message in Vue 3 JS

By Ved Prakash N | Dec 26, 2023 | Vue JS
Share : Whatsapp

https://www.fundaofwebit.com/post/how-to-make-a-custom-global-alert-message-in-vue-3-js

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.