Correct way to install custom VueJs Plugin

Question

Im creating a custom plugin that encapsulates a bunch of authentication functionality with vuex and vue-authenticate.

The problem im having is figuring out the correct way to load and install the module into VueJS, im not sure if its my webpack or vuejs knowledge that is lacking but so far I have the following

/node_modules/plugin/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import routes from './routes'
import store from './vuex/store'
import EventBus from './bus/eventBus'
import config from './config'
import ping from './vuex/modules/apiArchitect/ping/store'
import auth from './vuex/modules/apiArchitect/auth/store'
import user from './vuex/modules/apiArchitect/user/store'

Vue.use(Vuex)
Vue.use(EventBus)

const store = new Vuex.Store({
  modules: {
    ping,
    user,
    auth
  },
  strict: true
})

let apiArchitect = {}

apiArchitect.install = function (Vue, options) {
  Vue.prototype.$apiArchitect = store,
  Vue.prototype.$apiArchitect.$config = config
  Vue.prototype.$apiArchitect.$routes = routes

  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(apiArchitect)
  }
}


export default apiArchitect

/src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import apiArchitect from 'vue-apiarchitect'
import addRouteGuards from 'vue-apiarchitect/src/addRouteGuards'

Vue.config.productionTip = false
Vue.config.env = process.env.NODE_ENV

Vue.use(router)
Vue.use(apiArchitect)

console.log(apiArchitect)

addRouteGuards(router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

So far I am able to import the plugin and run the install hook with Vue.use(apiArchitect) I can access this.$apiArchitect in my App.vue.

The problem I have is that the plugin provides some auth routes stored in $apiArchitect.routes these routes need to be merged with the routes provided by router. If I try access $apiArchitect.routes in main.js I get an 'undefined' error I can only access them after vue has been instantiated. If I actually try console.log apiArchitect in main.js all I see is an object containing an install function none of the plugin i've provided which makes me belive its not installing correctly.

Does anyone know how i can access the apiArchitect.$routes property in main.js or a better way of achieving this?

Thanks

Egor Stambakio Egor Stambakio · Accepted Answer · 2017-06-13T09:21:26

You can add routes dynamically with router.addRoutes() since 2.2.x.

The argument must be an Array using the same route config format with the routes constructor option.

For example, you can use addRoutes in created hook of the root component:

// your plugin
const myPlugin = {
  install: function(Vue, options) {
    Vue.prototype.$myPlugin = {
      routes: [{
      	path: '/myplugin', component: options.myComponent
      }]
    }
  }
}

// components
const testComponent = { template: '<p>Component called by plugin route</p>' }
const Home = { template: '<p>Default component</p>' }

// router
const router = new VueRouter({
  routes: [{
    path: '/', component: Home
  }]
})

Vue.use(VueRouter)
Vue.use(myPlugin, { myComponent: testComponent })

new Vue({
  el: '#app',
  router,
  created() {
    this.$router.addRoutes(this.$myPlugin.routes); // dinamically add routes
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <button @click="$router.push('/')">Home</button>
  <button @click="$router.push('/myplugin')">Custom</button>
  <router-view></router-view>
</div>

Correct way to install custom VueJs Plugin

1 Answers