Plugin Nedir?

Vue.js plugin, Vue.js uygulamalarında kullanılmak üzere tasarlanmış bir ek özellik veya işlevsellik setidir. Genellikle, Vue.js çekirdek yeteneklerini genişletmek, yeniden kullanılabilir bileşenler veya direktifler eklemek, veya uygulamaları daha modüler ve esnek hale getirmek için kullanılırlar.

Vue.js plugin'leri şunları içerebilir:

1. Global Metodlar veya Özellikler: Plugin, Vue'nun prototipine global metodlar veya özellikler ekleyebilir. Bu, tüm Vue örneklerinde bu metodların veya özelliklerin kullanılabilmesini sağlar.

2. Özel Direktifler: Vue.js, özel direktifler yoluyla DOM üzerinde daha fazla kontrol sağlayabilir. Plugin'ler bu tür direktifler ekleyerek, özel davranışlar veya etkileşimler sunabilir.

3. Filtreler: Vue.js, veri biçimlendirmesi için filtreler kullanır. Plugin'ler, uygulamalarda kullanılmak üzere yeni filtreler ekleyebilir.

4. Bileşenler: Yeniden kullanılabilir bileşenler veya UI kitleri, plugin'ler aracılığıyla Vue.js uygulamalarına entegre edilebilir.

5. Mixin'ler: Mixin'ler, Vue bileşenlerine işlevsellik eklemek için kullanılır. Plugin'ler, global mixin'ler sağlayarak, tüm bileşenlere ortak işlevsellikler ekleyebilir.

6. Uygulama Seçenekleri: Bazı plugin'ler, Vue uygulamasının başlangıç aşamasında özel konfigürasyon veya işlevsellik eklemek için kullanılabilir.

Vue.js plugin'lerinin kullanımı, Vue.use() metodu ile yapılır. Bu metod, plugin'leri Vue uygulamasına entegre etmeyi ve gerekirse başlangıçta bazı ayarlar yapmayı sağlar. Örneğin, bir yönlendirme kütüphanesi veya durum yönetim kütüphanesi, Vue.js uygulamalarına bu şekilde eklenebilir.

Aşağıda, Vue 3 ile yazılmış basit bir eklenti örneği bulunuyor. Eklenti, tüm bileşenlere bir $formatPrice yardımcı metodu ve bir v-focus direktifi ekliyor:

import { createApp } from 'vue';

const pricePlugin = {
  install(app, options) {
    // Tüm bileşenlerde kullanılabilen global bir metot
    app.config.globalProperties.$formatPrice = (value) =>
      new Intl.NumberFormat('tr-TR', {
        style: 'currency',
        currency: options.currency,
      }).format(value);

    // Global bir direktif: öğe ekrana gelince ona odaklanır
    app.directive('focus', { mounted: (element) => element.focus() });
  },
};

const app = createApp({
  template: `
    <p>Fiyat: {{ $formatPrice(1499.9) }}</p>
    <input v-focus placeholder="Otomatik odaklanır" />
  `,
});

app.use(pricePlugin, { currency: 'TRY' });
app.mount('#app');

Not (Vue 3): Vue 3'te eklentiler Vue.use() yerine uygulama örneği üzerinden app.use() ile kurulur; global özellikler Vue.prototype yerine app.config.globalProperties ile eklenir. Filtreler (filters) Vue 3'te kaldırılmıştır; yerine metotlar veya computed özellikler kullanılır.