Building Custom Plugins in Vue
Building a Custom Plugin in Vue2.x
Adding a Global Method
(pluginDemo.js)
export default {
install(Vue) {
Vue.myGlobalMethod = function (...args) {
//...todo
}
}
}
Adding a Custom Directive (v-my-directive)
(pluginDemo.js)
export default {
install(Vue) {
Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) {
//... todo
}
});
}
}
Adding a mixin
(pluginDemo.js)
export default{
install(Vue){
Vue.misin({
created:function(){
//...todo
},
methods:{
demoFunc(){
//...todo
}
}
})
}
}
Registering a Component
(pluginDemo.js)
export default {
install(Vue) {
Vue.component('my-component', MyComponent);
}
}
Adding a Property to the Vue Prototype
(pluginDemo.js)
export default {
install(Vue) {
Vue.prototype.$myMethod = function (methodOptions) {
//...todo
}
}
}
Registering the Plugin in main.js
import Vue from "vue";
import pluginDemo from "@/plugins/pluginDemo";
Vue.use(pluginDemo, { demoOptions : options });
Building a Custom Plugin in Vue3 + Typescript
Adding a Global Method
(pluginDemo.ts)
import { App, Plugin, provide } from 'vue';
import IData from "./type.ts'
function demoGlobalFunc(){
//... todo
}
export const pluginDemo: Plugin = {
install: (app: App, options: IData) => {
app.provide('demoGlobalFunc', demoGlobalFunc)
}
};
(Demo.vue)
import {defineComponent, inject} from 'vue'
export default defineComponent({
setup(){
const demoFunc = inject("demoGlobalFunc");
}
})
Adding a Custom Directive (v-demo)
(pluginDemo.ts)
import { App, Plugin, provide } from 'vue';
import IData from "./type.ts'
export const pluginDemo: Plugin = {
install: (app: App, options: IData) => {
app.directive('demo', {
beforeMount(el: VueElement, binding: DirectiveBinding) {
//...todo
}
})
}
};
Adding a mixin — can be done directly with hooks
Registering a Component
(pluginDemo.ts)
import { App, Plugin } from 'vue';
import MyComponent from '@/components/MyComponents.vue"
import IData from "./type.ts'
export const pluginDemo: Plugin = {
install: (app: App, options: IData) => {
app.component('my-component', MyComponent)
}
};
Adding a Property to the Vue Prototype
(pluginDemo.ts)
import { App, Plugin } from 'vue';
import IData from "./type.ts'
export const pluginDemo: Plugin = {
install: (app: App, options: IData) => {
app.config.globalProperties.$myMethod = (arg: any) => {
//...
}
}
};
When using it (assuming inside Demo.vue):
import {defineComponent, getCurrentInstance} from 'vue'
export default defineComponent({
setup{
const { appContext } = getCurrentInstance()
appContext.config.globalProperties.$myMethod(...)
}
})
ChangeLog
- 20260501–translate by claude code