【Vue.js】Vue-notificationの使い方について解説

通知機能を実装するためのVue-notificationについて説明します。

Vue-notificationとは？

Vue-notificationとは、通知機能を実装するライブラリです。

Vue-notificationのインストール方法

Vue-notificationをインストールする方法について説明します。

npmを使用してインストールする方法

npmを使用してインストールする場合、コマンドラインに次のコマンドを記述してインストールします。

$npm install --save vue-notification

CDNを使用してインストールする方法

CDN(Content Delivery Network)を使用してインストールする場合、htmlファイルの<body>タグの中に次のコードを記述します。

 <script type="text/javascript" src="https://unpkg.com/vue-notification"></script>

Vue-notificationの使用方法

まず、次に示すHTMLファイルとJavaScriptファイルを基に、CDNを利用したvue-notificationの扱い方について説明していきます。

(index.html)

<body>
  <div id="app">
    //クリックしたら通知するように設定
    <button @click="onClick()">クリック</button>
    <notifications group="グループ名" position="表示する場所(top centerなど)"></notifications>//ここについては後ほど説明します。
  </div>
  //vue-notificationのライブラリの導入
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script type="text/javascript"
    window.vue = window.Vue;
  </script>
  <script type="text/javascript" src="https://unpkg.com/vue-notification"></script>
  <script src="./test.js" ></script>
</body>

(test.js)

window.vueNotification = window["vue-notification"].default;
Vue.use(vueNotification);
 
new Vue({
 el: "#app",
 methods: {
   onClick: function(){
     this.$notify({
        group:'グループ名',//グループ名
        title: 'タイトル',//タイトル
        text: 'テキスト',//テキスト文
        duration:100,//通知の表示時間
        type: 'error',//通知タイプ[error,success,warm]
        speed: 200,//通知表示アニメーション速度
 
     });
   }
 },
})

ライブラリの取り込み

CDNで取り込む場合、ライブラリの取り込みに関してはHTMLのBodyに次のコードを入力し、JavaScript内で次のコードを入力すれば完了です。

(index.html)

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    window.vue = window.Vue;
</script>
<script type="text/javascript" src="https://unpkg.com/vue-notification"></script>
<script src="./test.js" ></script>

(test.js)

window.vueNotification = window["vue-notification"].default;
Vue.use(vueNotification);

通知の設定(HTML側)

HTML上での通知の設定を行っていきます。今回はクリックしたら通知が出てくるような機能の設定を行っています。ここで、<notifications>のプロパティについては次の表で説明します。このプロパティを用いることで、多様な通知機能の設定ができます。

<div id="app">
//クリックしたら通知するように設定
   <button @click="onClick()">クリック</button>
   <notifications group="グループ名" position="表示する場所(top centerなど)"></notifications>//以下にプロパティについて記載
</div>

Name	Type	Default	Description
group	String	null	指定した場合の通知ホルダー名
type	String	null	通知に割り当てられるクラス
width	Number/String	300	通知ホルダーの横幅有効値: '100%', '200px', 200
classes	String/Array	'vue-notification'	通知要素に適用されるクラスのリスト
position	String/Array	'top right'	ポップアウトされる通知の場所水平方向:left,right,center 鉛直方向:top,bottom
animation-type	String	'css'	アニメーションタイプ,現在サポートしているのはcssかvelocity
animation-name	String	null	cssアニメーションのための名前
animation	Object	$*	velocityのためのアニメーション設定 $= {enter: {opacity: [1, 0]}, leave: {opacity: [0, 1]}}
duration	Number	3000	通知のステイ時間、マイナスなら永久
speed	Number	300	表示/非表示のスピード
max	Number	Infinity	通知ホルダーの最大表示数
reverse	Boolean	false	通知を逆の順で表示
ignoreDuplicates	Boolean	false	重複を無視する
closeOnClick	Boolean	true	クリックしたら通知を消す

通知の設定(JavaScript側)

JavaScript側での設定を行います。こちらでは通知機能を実装するためのメソッドの設定を次のコードのように入力していきます。notifyで利用可能なパラメーターは次のコード内のコメントで説明してあります。

new Vue({
 el: "#app",
 methods: {
   onClick: function(){
     this.$notify({
 //ここでは説明のために全て記す(実際は全て記す必要はない)
        group:'グループ名',//グループ名
        title: 'タイトル',//タイトル
        text: 'テキスト',//テキスト文
        duration:100,//通知の表示時間
        type: 'error',//通知タイプ[error,success,warm]
        speed: 200,//通知表示アニメーション速度

     });
   }
 },
})

Vue-notificationの使用例

では、実際の使用例について紹介します。ログインボタンをクリックした時にログインエラーが通知されるような機能をVue-notificationを使って実装していきます。(これは、通知機能を説明するために作ったもので、実際のログイン機能はありません)

コード

(index.html)

<body>

   <div class="main" id="app">
      <h2>ログイン画面</h2>
      ID:<input></input></br>
      password:<input></input></br>
      <button @click="onClick()">【Login】</button>
      <notifications group="login" position="top center"></notifications>
    </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script type="text/javascript">
     window.vue = window.Vue;
  </script>
  <script type="text/javascript" src="https://unpkg.com/vue-notification"></script>
  <script src="./test.js" ></script>
</body>

(test.js)

window.vueNotification = window["vue-notification"].default;
Vue.use(vueNotification);

new Vue({
el: "#app",
methods: {
   onClick: function(){
    this.$notify({
       title: 'IDとパスワードが一致しません',
       text: 'ログインできません',
       duration:100,
       group: 'login',
       type: 'error',
       speed: 200,
    });
   }

},
})

実際の画面

この記事のまとめ

本記事ではVue-notificationを、実際の実装例を元に説明しました！

最後に記事の要点をまとめてみましょう。

Vue-notificationを使うことで、通知機能が実装できる。
多様なプロパティを用いて多様な通知設定が行える。

Vue-notificationを是非活用してみましょう！