ガイド

プラグイン

プラグインの記述

プラグインは通常 Vue にグローバルレベルで機能を追加します。プラグインに対しては厳密に定義されたスコープはありません。書くことができるプラグインはいくつかのタイプがあります:

  1. 1つ、または複数のグローバル・メソッドを追加します。例: vue-element

  2. 1つ、または複数のグローバル・アセットを追加します。ディレクティブ/フィルタ/トランジションなど。例: vue-touch

  3. Vue インスタンスメソッドを Vue.prototype に記述します

  4. 同時に上記のいくつかの組み合わせを注入しながら、独自の API を提供するライブラリ。例: vue-router

Vue.js プラグインは install メソッドを公開する必要があります。このメソッドは第 1 引数は Vue コンストラクタ、第 2 引数は任意で options が指定されて呼び出されます:

MyPlugin.install = function (Vue, options) {
  // 1. グローバルメソッドまたはプロパティを追加
  Vue.myGlobalMethod = ...
  // 2. グローバルアセットを追加
  Vue.directive('my-directive', {})
  // 3. インスタンスメソッドを追加
  Vue.prototype.$myMethod = ...
}

プラグインの使用

CommonJS ベースのビルドを行っていると仮定します。

Vue.use() グローバルメソッドを呼びだすことによってプラグインを使用します:

// `MyPlugin.install(Vue)` を呼び出します
Vue.use(MyPlugin)

いくつかのオプションに任意で渡すことができます:

Vue.use(MyPlugin, { someOption: true })

vue-router のようないくつかのプラグインは、Vue はグローバル変数として使用可能な場合、自動的に Vue.use() は呼びます。しかしながら、モジュール環境では常に明示的に Vue.use() を呼ぶ必要があります:

// Browserify または Webpack 経由で CommonJS を使用
var Vue = require('vue')
var VueRouter = require('vue-router')

// これを呼びだすのを忘れてはいけません
Vue.use(VueRouter)

現在提供済みのプラグインとツール

← ミックスイン 大規模アプリケーションの構築 →
間違いを見つけた、またはドキュメントに貢献したいですか？Github 上でこのページを編集する か、Github からこのサイトを Fork してプルリクエストしましょう！