Laravel uygulaması geliştirirken, bazen küçük bir reactivity ihtiyacı doğar. Bir sayaç, bir toggle… Vanilla JavaScript için biraz fazla ama tam bir Vue bileşeni için fazla basit bir şey.
Bu noktada Alpine.js’e yöneldim, ancak Vue’nun Composition API’sını istiyordum. ref(), computed() ve aşina olduğum sentaks. Bu yüzden Vector paketini geliştirdim.
Vector Nedir?
Vector, Blade şablonları içinde Vue yazmanıza olanak tanıyan bir Laravel paketidir ve sıfır ek işlem gerektirir:
<script setup>
const i = ref(0);
</script>
<div>
<button @click="i++">Click Me</button>
<div>
Count: @{{ i }}
</div>
<div v-if="i > 5">Success!</div>
</div>
İşte bu kadar. Bileşenleriniz için bir yapılandırma adımı yok. Ayrı .vue dosyalarına gerek yok. Kodunuzu saran özel direktifler yok. Sadece bir <script setup> etiketi ile işinizi halletmiş oluyorsunuz.
Nasıl Çalışır?
<script setup> etiketi derleme zamanında dönüştürülür. Vector, script etiketinden sonra gelen elementi Vue şablonunuz olarak işler. O elementin içindeki her şey reaktif hale gelir, dışındaki her şey ise normal Blade kalır.
- Blade’ın ön işleyicisi
<script setup>bloklarını bulur - Değişken tanımlarını çıkarır
- Vue’yu bir sonraki kardeş elemana monte eder
Önemli kısım değişkenlerin çıkarılmasıdır. const, let ve var bildirimlerini analiz eder ve bunları şablona otomatik olarak döndürür. Normal kod yazıyorsunuz, o gerisini hallediyor.
Blade Söz Diziminden Kaçış
Blade, çıktı için {{ }} kullandığı için Vue’nun mustache sentaksını @ ile ön ekleyerek Blade’in işlem yapmasını engellemelisiniz:
{{-- Bu Blade --}}
{{ $phpVariable }}
{{-- Bu Vue (@not e @) --}}
@{{ vueVariable }}
Alternatif olarak, Blade ile çelişmeyen Vue direktifleri kullanabilirsiniz:
<span v-text="count"></span>
Kurulum
composer require brunoabpinto/vector
Vector’ı vite.config.js dosyanızdaki Vite giriş noktalarına ekleyin:
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/js/app.js",
"resources/js/vendor/vector.js",
],
// ...
}),
],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js',
},
},
Son olarak, tasarımınızda </body> etiketinizden önce @vectorJs ekleyin:
<body>
{{ $slot }}
@vectorJs
</body>
Hepsi bu kadar. Vector, çalışma zamanını otomatik olarak yayınlar ve @vectorJs ihtiyacınız olan yere yükler.
Artılar ve Eksiler
Bu durumun ne olduğuna gerçekçi bir şekilde bakalım:
İyi olduğu yönler:
- Hızlı etkileşim unsurları
- Prototipleme
- Vue API’sını, Vue’un jargonu olmadan kullanma
- Ağır ölçüde sunucu render’lı Laravel uygulamaları için reaktivitenin adaları
İyi olmayan yönler:
- Karmaşık bileşen hiyerarşileri
- Gerçek SFC özelliklerine ihtiyaç duyulduğunda (scoped stiller vs.)
- Büyük ölçekli SPAlar (bu durumda Inertia kullanmalısınız)
Deneyin
Paket, GitHub‘da mevcuttur. Yıldızlayın, fork edin, bunun bir facia olduğunu söyleyin. Ne hissediyorsanız onu yapın.
composer require brunoabpinto/vector
Kaynak: Orijinal Makale
