Alerts - bootstrapVue

https://bootstrap-vue.github.io/docs/components/alerts

HTML

<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<div id="app">
    <b-alert show>
        Default Alert
    </b-alert>

    <b-alert variant="success" show>
        Success Alert
    </b-alert>

    <b-alert variant="danger" dismissible :show="showDismissibleAlert" @dismissed="showDismissibleAlert=false">
        Dismissible Alert!
    </b-alert>

    <b-alert :show="dismissCountDown" dismissible variant="warning" @dismiss-count-down="countDownChanged">
        This alert will dismiss after {{dismissCountDown}} seconds...
    </b-alert>

    <b-btn @click="showAlert" variant="info" class="m-1">Show alert with count-down timer</b-btn>
    <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
        Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
    </b-btn>
</div>

CSS

#app {
  padding: 20px;
  height: 300px;
}
.alert {
  position: relative;
  top: 0;
  right: 0;
}

JavaScript

window.app = new Vue({
  el: '#app',
  data: {
    dismissCountDown: null,
    showDismissibleAlert: false
  },
  methods: {
    countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown;
      },
      showAlert() {
        this.dismissCountDown = 5;
      }
  }
})