Vue.jsで自作のプラグインを作ってみる

Vue.jsでプラグインを作ってみたくなったので、それの作り方を調べました。（Vue.js 2.0以上です）

本記事では、カスタムディレクティブを与えた要素にイベント付与するところが参考になるかと思います。

以下の仕様を満たすプラグインを作るやり方を示していきます。

• v-qiita-clickというカスタムディレクティブをプロジェクト全体で利用できる
• そのディレクティグを与えた要素をクリックすると console.log('qiita!!')と出力される。

参考: カスタムディレクティブとは

versionについては、この記事の執筆時のlatestのversionを想定しています。

手順

プロジェクトの作成 ~ プラグインの利用までを示します。

プロジェクトの作成

vue-cliを使うと簡単なので、利用しましょう。

vue-cli

$ npm install -g vue-cli
$ vue init webpack my-project # my-projectの部分は自分のプロジェクト名

以降、このプロジェクト名をmy-projectとして扱います。

プラグインとなるファイルの作成

次にプロジェクトのrootに移動します。

$ cd my-project

src というフォルダがありますが、こちらはプロジェクトのソースコードです。

src以下に、今回のプラグインの実装を持つファイルを作成します。
ファイル名は、 qiita-click.js としましょう。

src以下の構成は以下のようになったと思います。

src
 - main.js
 - qiita-click.js
 - assets/
 - App.vue

では、 qiita-click.js にプラグインの記述をしていきます。

const VueQiitaClick = {
  install (Vue, options) {
    Vue.directive('qiita-click', {
      bind: (el) => {
        el.addEventListener('click', click, false)
      }
    })

    const click = () => {
      console.log('qiita!!')
    }
  }
}

export default VueQiitaClick

これで、プラグインを利用できる状況になりました。

プラグインの利用

先ほど作成した、プラグインを利用する方法ですが、

main.js
で qiita-click.js を読み込み、 useというグローバルメソッドで呼び出します。

import VueQiitaClick from './qiita-click'

Vue.use(VueQiitaClick)

あとは、 .vue のほうで利用する方法です。以下のように v-qiita-click をdivタグ等任意のタグに追加します。

<div v-qiita-click>divテスト</div>

これを実行してみると、 「divテスト」 という要素をクリックすると、console上で意図した出力が確認できると思います。

参考

Vue plugin