Vue — Plugins

What is a plugin?

Plugins add global-level functionality to Vue.

Creating a plugin

// plugins/logger.js
export default {
  install(app) {
    app.config.globalProperties.$log = (msg) => {
      console.log(`[LOG]: ${msg}`)
    }
  }
}

Using a plugin

// main.js
import Logger from './plugins/logger'

app.use(Logger)

<script>
export default {
  mounted() {
    this.$log('Component mounted!')
  }
}
</script>

Plugin with options

// plugins/tooltip.js
export default {
  install(app, options = {}) {
    app.directive('tooltip', {
      mounted(el, binding) {
        el.title = binding.value
        el.style.cursor = 'help'
      }
    })
  }
}

// Usage
app.use(Tooltip, { position: 'top' })

Real-world example

// plugins/i18n.js
export default {
  install(app, options) {
    const messages = options.messages || {}

    app.config.globalProperties.$t = (key) => {
      return messages[key] || key
    }

    app.provide('i18n', { messages })
  }
}

// Usage
app.use(I18n, {
  messages: {
    en: { hello: 'Hello' },
    es: { hello: 'Hola' }
  }
})

Using in composition API

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')
</script>

Install with app.use

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
import Store from './store'
import Logger from './plugins/logger'

const app = createApp(App)

app.use(Router)
app.use(Store)
app.use(Logger)

app.mount('#app')

Mini Practice

1. Create a logger plugin
2. Build a tooltip directive plugin
3. Add i18n plugin
4. Use inject for composition API

Up Next

Continue with Testing - Unit and E2E tests.