nuxtでsweetalert使ってみた - もがき系プログラマの日常

はじめに

めちゃめちゃ簡単な記事ですが、残しとかないと忘れるので書いときます。

現在のプロジェクトではsweetalertを使ってます。

アラートなどリッチに表示できるので重宝してます。

新たなプロジェクトではnuxtを使うようになったのですが、こちらでも使い続けたいなと思ってたので、調べてみるとvue-sweetalert2というのがあったので、導入しました。

やってみた

インストール

$ yarn add vue-sweetalert2

nuxt.config.jsに記入

/*
** Nuxt.js modules
*/
modules: [
  'vue-sweetalert2/nuxt'
],

使い方

methodsなどで使用する場合以下

this.$swal('テストアラート')

ちょこっと複雑なのとかは以下

this.$swal({
  title: 'データの削除確認',
  text: '本当に削除しますか？',
  type: 'warning',
  showCancelButton: true,
  confirmButtonClass: 'btn btn-danger',
  cancelButtonClass: 'btn btn-info',
  confirmButtonText: '削除する',
  cancelButtonText: 'キャンセル',
  reverseButtons: true,
  buttonsStyling: false
}).then(result => {
  if (result.value) {
    // 削除処理
  }
})