Create a Vue Plugin

Global Vue plugins are very useful. They are available on the Vue instance, so you can use them in any Vue component via this.$plugin. This means you don't have to import plugin from '@/plugins/plugin' in every file you need it. It makes things a lot cleaner.

Global Vue plugins are actually really easy to create. I usually create a plugins/ folder in the src/ directory, and then create a file with the plugin name. Add the below code:

src/plugins/auth.js

const authFunctions = {
    login (email, password) {
        return service.login(email, password)
    }
}

const auth = {
  install (Vue, options) {
    Vue.prototype.$auth = authFunctions
  }
}

export default auth

You then need to import this to main.js, and attach it to Vue:

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'

# Import the plugin
import Auth from './plugins/auth'

# And add to the Vue instance
Vue.use(Auth)

Vue.config.productionTip = false

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

Done! This is literally all you need - you can then use this.$auth anywhere in a Vue component. For example:

methods: {
    login () {
        this.$auth.login(this.email, this.password)
    }
}

Change auth to whatever you need, so $cdn for example, and this.$cdn will be available.

If you need to access these functions in a non-vue file, e.g. manualLogin.js, simply add an export to the auth functions. export const authFunctions. You can then do import { authFunctions } from '@/plugins/auth' in any JavaScript file, and use authFunctions.login() for example.