Plugins extend Vue applications by attaching reusable features across the entire instance tree. Standard integration patterns involve registering global components or directives, exposing shared instances through app.provide(), and attaching methods or configuration values to app.config.globalProperties. Comprehensive libraries typically combine these techniques into a single distribution unit.
Bootstrap integration happens during application initialization. The entry file mounts the plugin alongside its configuration payload:
import { createApp } from 'vue'
import App from './App.vue'
import LocalizePlugin from './modules/localize'
const root = createApp(App)
root.use(LocalizePlugin, {
locale: 'en',
resources: {}
})
root.mount('#app')
A functional plugin exports an object containing an install lifecycle method. Below is a refactored text resolution module. Rather than parsing nested paths dynamically, this implementation relies on a pre-defined flat dictionary and attaches a resolver function to the global prototype.
Usage within templates remains dcelarative:
<h1>{{ $resolve('nav.title') }}</h1>
Core module structure:
export const LocalizePlugin = {
install(app, config) {
const currentLang = config.locale || 'en'
const dictionary = config.resources ?? {}
// Expose resolution method globally
app.config.globalProperties.$resolve = (lookupKey) => {
return dictionary[lookupKey] ?? `[MISSING:${lookupKey}]`
}
// Broadcast underlying data via dependency injection
app.provide('$resourceMap', dictionary)
app.provide('$activeLocale', currentLang)
}
}
Components can retrieve the injected configuration without receiving it through parent props:
<script setup>
import { inject } from 'vue'
const translations = inject('$resourceMap')
const languageTag = inject('$activeLocale')
console.log(translations['dashboard.heading'])
</script>
This architecture centralizes feature distribution while maintaining strict separation between global API exposure and component-level data consumption.