Vue.js vue-sweetalert2をインストールしてalertを表示する

npm install -S vue-sweetalert2

npm install -S bootstrap-vue

import VueSweetalert2 from 'vue-sweetalert2';
import BootstrapVue from 'bootstrap-vue'

import 'sweetalert2/dist/sweetalert2.min.css';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

//ボタンの色をグローバルに設定
const options = {
  confirmButtonColor: '#41b882',
  cancelButtonColor: '#ff7674',
};

Vue.use(VueSweetalert2, options);
Vue.use(BootstrapVue)

<template>
  <div class="container">
    <b-button variant="success" @click="showAlert">click</b-button>
  </div>
</template>
     
<script>       
 export default {
        methods: {
            showAlert() {                
                this.$swal({
                  title: 'よろしいですか?',
                  text: "よろしければOKボタンを押してください",
                  type: 'warning',
                  showCancelButton: true,
                  confirmButtonText: 'OK'
                }).then((result) => {
                  if (result.value) {
                    this.$swal(
                      'OK!',
                      '成功しました.',
                      'success'
                    )
                  }
                });
            },
        },
    };
</script>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin:  0 auto;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 60%;
}
</style>