背景
- 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;