背景

Nuxt.jsで動いているSPAアプリをVue.jsに解体してほしい的な話があり、部分部分をTipsとして投稿します。
APIはLaravel(6.x)です。なおLaravelとNuxt.jsは同一リポジトリです(なぜ)
Nuxt.jsは2.9。Vueは2.6.10
今回はPlugin編です。

Nuxt.jsでコンテキストに注入している場合

Nuxt.jsの書き方の例

Nuxt.js公式ドキュメントより抜粋

plugins/combined-inject.js

export default ({ app }, inject) => {
  inject('myInjectedFunction', string => console.log('That was easy!', string))
}

Vue.jsでの解体例

Vue.prototypeでインスタンスプロパティを追加。

resources/js/combined-inject.js

const MyInjectedPlugin = {}
MyInjectedPlugin.install = function (Vue) {
  Vue.prototype.$myInjectedFunction = string => console.log('That was easy!', string)
}
export default MyInjectedPlugin;

resources/js/app.js

import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'

import MyInjectedPlugin from '~/plugin/combined-inject'

import DefaultLayout from '~/layouts/default'
import NoAuthLayout from '~/layouts/noauth'

Vue.use(MyInjectedPlugin) //Vue.useでpluginを追加

Vue.component('default-layout', DefaultLayout)
Vue.component('noauth-layout', NoAuthLayout)

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

PluginからVue Routerを使いたい場合

導入例

resources/js/app.js

import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'

import RouterPlugin from '~/plugin/router-plugin'

import DefaultLayout from '~/layouts/default'
import NoAuthLayout from '~/layouts/noauth'

Vue.use(RouterPlugin, router) // Vue.useの引数にrouterを渡す

Vue.component('default-layout', DefaultLayout)
Vue.component('noauth-layout', NoAuthLayout)

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

resources/js/plugin/router-plugin.js

const RouterPlugin = {}
RouterPlugin.install = function (Vue, router) {
  Vue.prototype.$hoge = () => {
    router.push("/")
  }
}
export default RouterPlugin;

PluginからVuexを使いたい場合

resources/js/app.js

import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'

import StorePlugin from '~/plugin/store-plugin'
import store from '~/store/store' // Vuexを定義しているモジュールをimportする

Vue.use(StorePlugin, store) // Vue.useの引数にstoreを渡す

Vue.component('default-layout', DefaultLayout)
Vue.component('noauth-layout', NoAuthLayout)

new Vue({
  store
  router: router,
  render: h => h(App),
}).$mount('#app')

resources/js/plugin/store-plugin.js

const StorePlugin = {}
StorePlugin.install = function (Vue, store) {
  Vue.prototype.$fuga = () => {
    store.dispatch('~~')
  }
}
export default StorePlugin;

参考

関連リンク