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.