VUE.JS

Vue.js Plugins

Güncelleme:
Vue bir progressive framework olarak, en yalın haliyle pek çok işlemi gerçekleştirme yetkisine sahip olsa da (bu vesile ile framework’ün en temelde View’a odaklandığını da ...
GÖRSEL
Vue bir progressive framework olarak, en yalın haliyle pek çok işlemi gerçekleştirme yetkisine sahip olsa da (bu vesile ile framework’ün en temelde View’a odaklandığını da hatırlatmak isterim), büyük ve kapsamlı çalışmalarda hem resmi hem de 3. parti kaynaklarca geliştirilen eklentilerle (plugin) daha kapsamlı çözümler üretebilmekte. 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 bir kaçı 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 new Vue() öncesinde olmak şartıyla, Vue.use() global methodu’u ile çağırabilmekteyiz. Yani, akış özetle şu şekilde olmalı:
Vue.use(MyPlugin)
 
new Vue({
  //... options
});
Ayrıca, plugin’e bir değer aktaracak isek bunu yine Vue.use() içerisinde tanımlayabilmekteyiz:
Vue.use(MyPlugin, { someOption: true })
Unutmadan, 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:
var Vue = require('vue')
var VueRouter = require('vue-router')
Vue.use(VueRouter)

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:
MyPlugin.install = function (Vue, options) {
  // 1. global method ve/ya 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
  }
}
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

API

Router

Analytics

Diğer

App

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.