Vue Js Disappear Alert Automatically after  5 seconds: In Vue.js, we can make an alert disappear automatically after 5 seconds by using the setTimeout function to change the value of a data property that controls the visibility of the alert. We can do this by calling setTimeout in the mounted lifecycle hook and setting a timeout of 5000 milliseconds. When the timeout expires, we can change the value of the data property to false, which will cause the alert to disappear.

Alternatively, we can allow the user to dismiss the alert by adding a button that sets the value of the data property to false when clicked. This can be achieved by adding a @click event listener to the button element, which triggers a method that changes the value of the data property to false. This allows the user to dismiss the alert at any time by clicking the button.

How can I make a Vue.js alert message disappear or close automatically after 5 seconds, or when the user clicks on it?

This code creates a Vue instance with a data object containing two properties: “show” and “message”. The “show” property controls the visibility of an alert message, and the “message” property sets the text of the alert message.

When the Vue instance is mounted, a setTimeout function is called that sets the “show” property to false after 5 seconds, effectively hiding the alert message.

The Vue instance also includes a “hideAlert” method that sets the “show” property to false when called.

The HTML template contains a div with an ID of “app” that displays the alert message when the “show” property is true, and a button that calls the “hideAlert” method when clicked.

Overall, this code creates a simple alert message that automatically disappears after 5 seconds, with the option for the user to manually dismiss it.

Vue Js Disappear Alert Automatically after 5 seconds | Onclick Example

<div id="app">
    <div v-if="show" class="alert alert-warning">
      {{ message }}
      <button @click="hideAlert" class="close-btn">&times;</button>
    </div>
</div>
<script>
    new Vue({
      el: '#app',
      data() {
        return {
          show: true,
          message: 'This is Warning alert',
        }
      },
      mounted() {
        setTimeout(() => {
          this.show = false;
        }, 5000);
      },
      methods: {
        hideAlert() {
          this.show = false;
        }
      },
 });
</script>

Output of Vue Js Disappear Alert Automatically after 5 seconds