7行から始めるVue.jsプラグイン開発

Vue.jsでは、The Progressive JavaScript Frameworkを掲げる通り、コアは小さく、拡張しやすいように作られています。今期アニメではゴブリンスレイヤーとスライムでゴブリンの違いを楽しんでます。

そのため独自の機能が必要になった場合、自分でプラグインを追加していくということも簡単です（もちろんmixinやVuexなどなど状況に応じて他の選択肢もあります）

プラグイン — Vue.js

実用的な簡単なプラグインの例としてyagish履歴書でも使ってるSiteというプラグインを紹介します。

サイト名などいろんな所で使う情報をまとめ、呼べるようにするプラグインです。

プラグイン本体は最小構成で7行ぐらい。サイト名nameを持った$siteを追加します。

実際はサイト名だけでなく、公開URLも入れて本番、ステージング、開発で変えられるようにしてます。

環境で変わる情報は環境変数に設定していますが、template内では直接process.envを呼べないため、computedなどでscript側でコンポーネントごとに作る必要があり、面倒なので作りました。

Vue CLI3での環境変数の詳細は下記のページにあります。
cli.vuejs.org

pluginsというフォルダは必須ではないですが、数が増えてきたら分けた方が分かりやすいと思います。

plugins/site.js

const Site = {
  install: function (Vue, options) {
    Vue.prototype.$site = {
      name: process.env.VUE_APP_SITE_NAME
    }
  }
}
export default Site

もちろん値を増やしたり、関数を追加することもできます。

main.jsでインストールします
main.js

import Site from './plugins/site'
Vue.use(Site)

main.jsでインストールしたのであとはどのコンポーネント内で使えます。
template内では{{ $site.name }}で表示や使用ができ、script内ではthis.$site.nameで使えるようになります。

yagiComponent.vue

<template>
<div v-if="$site.name">{{ $site.name }}</div>  
</template>

<script>
export default {
  data: function () {
    return {}
  },
  mounted: function () {
    console.log(this.$site.name)
  }
}
</script>

もっと高度なプラグイン

今回のnameプロパティはリアクティブではないので、もしnameが変更されたとしても、テンプレートは自動的に更新されません。
もし、どこでも呼び出せるリアクティブな値を持たせたい、すべてのコンポーネントでイベントをemit、onしたい場合などはプラグインにVueインスタンスを入れてしまうこともできます。
複雑になったらVuexの方が相応しい場合もあると思いますが、選択肢として知っていた方が開発は楽になると思います。

plugins/event-hub.js

const eventHub = {
  install: function (Vue, options) {
    Vue.prototype.$eventHub = new Vue()
  }
}
export default eventHub

medium.com
uyamazak.hatenablog.com

ちなみにyagish履歴書のヤギの名前、色などはVuexを使わず、yagiプラグインで行っています。
dataに色などの値を持ち、変更があったらローカルに保存したり、mountedで読み込み処理をしています。

Vue.js入門 基礎から実践アプリケーション開発まで

基礎から学ぶ Vue.js