Create a Vue Plugin

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:


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:


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.config.productionTip = false

new Vue({
  render: h => h(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.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.


Not happening.
I get enough email spam as it is ¯\_(ツ)_/¯