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

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

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

環境

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

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

vue-toastedインストール

下記のコマンドでインストールします。

vue-sweetalert2 の利用

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

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

※bootstrap-vueも利用してます。

インストールは、npm install -S bootstrap-vueで可能です

src/components配下にToast.vueというファイルを作成し、下記のコードを記述します。

src配下のApp.vueも下記のように編集します。

ブラウザから http://プライベートIP:8080 にアクセスすると、 vue-toastedによりNotificationが表示されます。