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

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

Vueのライブラリvue-sweetalert2をインストールしてalertを表示するまでの簡単なサンプルコードです。 bootstrap-vueも少し利用してます。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1
  • vue-sweetalert2 2.1.5
  • bootstrap-vue 2.1.0

※CentOS8にVue.jsの環境構築はこちら

vue-sweetalert2インストール

下記のコマンドで実行します。

ついでにbootstrap-vueもインストールしておきます。

vue-sweetalert2 の利用

vue-sweetalert2を利用するための簡単なサンプルコードを記載します。

src配下のmain.jsに下記のコードを追加します。

インストール時にデフォルトであるsrc/components配下のHelloWorld.vueを下記のように編集します。

src配下の CSSを少し追加しただけで App.vueはデフォルトのままです。

ブラウザから http://プライベートIP:8080 にアクセスすると、 vue-sweetalert2によりclickボタンをクリックすると、アラートが表示されます。