ระบบปลั๊กอิน: app.use()

Vue Plugin คืออะไร

รูปแบบของ Plugin

// MyPlugin.ts
export default {
  install(app, options) {
    // Configure things here
  }
};

การติดตั้ง Plugin

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');

กรณีใช้งาน Plugin: คอมโพเนนต์ส่วนกลาง

// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';

export default {
  install(app) {
    app.component('IconChevron', IconChevron);
    app.component('IconClose', IconClose);
    app.component('IconUser', IconUser);
  }
};

// main.ts
app.use(iconPack);

กรณีใช้งาน Plugin: Directive ส่วนกลาง

export default {
  install(app) {
    app.directive('focus', { mounted: (el) => el.focus() });
    app.directive('click-outside', clickOutsideDirective);
  }
};

กรณีใช้งาน Plugin: provide()

import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';

export const ApiKey: InjectionKey<ApiClient> = Symbol('api');

export default {
  install(app, { baseURL }) {
    const api = new ApiClient({ baseURL });
    app.provide(ApiKey, api);
  }
};

// Anywhere:
const api = inject(ApiKey)!;

Plugin จริง: Pinia, Vue Router และ i18n

import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));

ตัวเลือกของ Plugin

app.use(MyPlugin, {
  apiUrl: 'https://api.example.com',
  enableLogs: true,
  theme: 'dark'
});

// Inside the plugin:
install(app, options) {
  if (options.enableLogs) console.log('plugin installed');
}

การเพิ่มชนิดข้อมูลด้วย TypeScript

// types.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: ApiClient;
  }
}

// In plugin:
install(app) {
  app.config.globalProperties.$api = new ApiClient();
}

globalProperties — รูปแบบเดิม

การติดตั้งแบบทำซ้ำได้โดยไม่เปลี่ยนผลลัพธ์

การเขียน Plugin ของคุณเอง

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: Vue Plugins