Vue.js Plugins

Bu yazıda da hem plugin kullanımına hem de öne çıkan bazı pluginlere değinmeye çalışacağım. Unutmadan, çok daha kapsamlı bilgi için Vue.js > Plugins ¹ ² sayfasındaki detaylara ve güncel pluginler için Awesome Vue listesine göz atabilirsiniz.

Vue Plugins

Vue plugin’leri genellikle global düzeyde fonksiyonlar elde etmek amacıyla kullanılmaktalar ve eklentiler için kesin olarak tanımlanmış bir kapsam belirtilmez. Vue plugin’lerden bahsederken şu özelliklerden bir ya da birkaçı ifade ediliyor olabilir:

Global olarak kullanılabilir method ve properties eklemek; vue-custom-element³ gibi.
Global olarak kullanılabilir directive, filter ve transition gibi yapıları eklemek; vue-router⁴ gibi.
Global mixin ile component özellikleri eklemek,
Instance methodlarının kapsamını / yeteneklerini geliştirmek.

Vue Plugin Kullanımı

İhtiyacımız olan plugin’leri bulduk, peki nasıl kullanacağız? Hemen cevaplayayım! Vue.js içerisine dahil edeceğimiz plugin’leri instance öncesinde olmak şartıyla, *.use() global methodu’u ile çağırabilmekteyiz. Yani, akış özetle şu şekilde olmalı:

// Vue v2.x
Vue.use(MyPlugin)
new Vue({
  //... options
});

// Vue v3.x
const app = createApp(Root)
const MyPlugin = {
  //... options
}
app.use(MyPlugin).mount('#app')

Ayrıca, plugin’e bir değer aktaracak isek bunu yine Vue.use() içerisinde tanımlayabilmekteyiz:

// Vue v2.x
Vue.use(MyPlugin, { someOption: true });

// Vue v3.x
const app = createApp(Root)
const MyPlugin = { someOption: true }
app.use(MyPlugin).mount('#app')

Vue bir eklentinin birden fazla eklenmesine izin vermez ve tanımlanan eklentiyi bir kez yükler ve erişilebilir bir şekilde sunar. CommonJS (Browserify ya da Webpack) gibi module environment örneklendirmesini ise şu şekilde yapabiliriz:

// Vue v2.x
const Vue = require('vue');
const VueRouter = require('vue-router');
Vue.use(VueRouter);

// Vue v3.x
import { createApp } from 'vue'
import Root from './App.vue'
import VueRouter from './vue-router'

const app = createApp(Root);
const VueRouter = {
  //...
}
app.use(VueRouter).mount('#app');

Vue.js Plugin’i Yazmak

Vue.js plugin’i bir install method ile işlenir ve method Vue constructor ile olası seçenekler de dahil edilerek ilk argüman olarak çağırılır. Bir plugin şu şekilde örneklendirilebilir:

// Vue v2.x
MyPlugin.install = function (Vue, options) {
  // 1. global method ve/veya property'ler
  Vue.myGlobalMethod = function () {
    // işlemler
  }

  // 2. global yapılar (direktifler, filtreler vb.)
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // işlemler
    }
    ...
  })

  // 3. component özellikleri, mixin'ler
  Vue.mixin({
    created: function () {
      // işlemler
    }
    ...
  })

  // 4. Instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // işlemler
  }
}

// Vue v3.x
// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return
        key
          .split('.')
          .reduce((o, i) => { if (o) return o[i] }, options)
    }

    app
      .provide('i18n', options)
      .directive('my-directive', {
        mounted (el, binding, vnode, oldVnode) {
          // some logic ...
        }
        //...
    })

    app.mixin({
      created() {
        // some logic ...
      }
      //...
    })
  }
}

Evet, şimdilik plugin konusuna dair teknik anlatılar bu kadar. Plugin kullanımı ise örnekler çerçevesinde sıklıkla yinelenecek. İlk plugin’imizi ise teknik anlatıların ardından, ayrı bir yazı altında işleyeceğim. Şimdilik, sıklıkla ihtiyaç duyulacağını tahmin ettiğim, hatta bazı yazılarda ve örneklerde de referanslarda bulunduğum bazı plugin’lerle yazıyı sonlandıracağım.

Önerilen Pluginler

Aşağıda, sıklıkla bahsi geçen ve kullanılan bazı Vue.js plugin’lerini alt başlıklara bölerek iletiyorum. Zaman içerisinde bilgi sahibi olduğum yeni plugin’leri de listeye dahil etmeye çalışacağım. Diğer yandan, daha kapsamlı bir liste olarak Awesome Vue.js‘i inceleyebilirsiniz.

UI

Vuetify, material design component framework
Buefy, Bulma temelli UI component
BootstrapVue, Bootstrap temelli UI component
Semantic UI Vue, Semantic UI temelli UI component

API

Router

Vue Router

Analytics

Google Analytics

Diğer

Vuepress, static site generator
Eagle.js, slideshow framework.
Facebook Login

App

NativeScript-Vue