Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilen, ilerici bir JavaScript \u00e7at\u0131s\u0131d\u0131r. Reaktif veri ba\u011flama, bile\u015fen tabanl\u0131 mimari ve sezgisel \u015fablon s\u00f6zdizimi sayesinde geli\u015ftiricilere h\u0131zl\u0131 ve verimli uygulamalar geli\u015ftirme imkan\u0131 sunar. Vue uygulamalar\u0131nda \u015fablonlar, bile\u015fenlerin g\u00f6rsel yap\u0131s\u0131n\u0131 tan\u0131mlayan temel unsurlard\u0131r. Geleneksel olarak, bu \u015fablonlar geli\u015ftirme a\u015famas\u0131nda (build time) derlenir ve \u00fcretim ortam\u0131na optimize edilmi\u015f JavaScript render fonksiyonlar\u0131 olarak g\u00f6nderilir. Bu yakla\u015f\u0131m, performans ve hata ay\u0131klama a\u00e7\u0131s\u0131ndan bir\u00e7ok avantaj sunar.<\/p>\n
Ancak, modern web uygulamalar\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, bazen build time’da bilinemeyen veya kullan\u0131c\u0131lar taraf\u0131ndan dinamik olarak olu\u015fturulan \u015fablonlar\u0131 i\u015fleme ihtiyac\u0131 ortaya \u00e7\u0131kabilir. \u0130\u00e7erik y\u00f6netim sistemleri (CMS), dinamik form olu\u015fturucular, \u00f6zelle\u015ftirilebilir g\u00f6sterge panolar\u0131 veya A\/B testleri gibi senaryolarda, \u015fablon i\u00e7eri\u011finin \u00e7al\u0131\u015fma zaman\u0131nda (runtime) belirlenmesi ve derlenmesi gerekebilir. \u0130\u015fte tam bu noktada Vue.js, \u015fablonlar\u0131 kullanarak bile\u015fenlerin DOM yap\u0131s\u0131n\u0131 tan\u0131mlama konusunda olduk\u00e7a esnektir. Genellikle iki ana derleme yakla\u015f\u0131m\u0131 bulunur:<\/p>\n Vue.js uygulamalar\u0131n\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu, Webpack, Vite veya Vue CLI gibi ara\u00e7lar kullan\u0131larak build time’da derlenir. Bu s\u00fcre\u00e7te, Bu yakla\u015f\u0131m\u0131n ba\u015fl\u0131ca avantajlar\u0131 \u015funlard\u0131r: Vue.js’in Genel olarak, modern Vue.js projelerinde build time derleme tercih edilirken, belirli senaryolarda runtime derleme yetene\u011fine ihtiya\u00e7 duyulur. \u0130\u015fte Pek \u00e7ok web uygulamas\u0131, statik \u015fablonlarla m\u00fckemmel bir \u015fekilde \u00e7al\u0131\u015f\u0131rken, baz\u0131 karma\u015f\u0131k senaryolar dinamik \u015fablon derlemeyi zorunlu k\u0131lar:<\/p>\n * \u0130\u00e7erik Y\u00f6netim Sistemleri (CMS) ve Blog Platformlar\u0131:<\/strong> Kullan\u0131c\u0131lar veya y\u00f6neticiler, makalelerine veya sayfalar\u0131na \u00f6zel d\u00fczenler eklemek isteyebilirler. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131 i\u00e7inde \u00f6zel bir Vue bile\u015feni (\u00f6rne\u011fin, bir anket veya interaktif grafik) g\u00f6mmek ve bu bile\u015fenin \u015fablonunu do\u011frudan metin edit\u00f6r\u00fcnden girmek. Dinamik i\u00e7erik ihtiyac\u0131n\u0131 kar\u015f\u0131lamak i\u00e7in Vue.js’in kendi i\u00e7inde baz\u0131 mekanizmalar bulunsa da, bunlar genellikle dinamik \u015fablon derleme ihtiyac\u0131n\u0131 tam olarak kar\u015f\u0131lamaz:<\/p>\n * Bu s\u0131n\u0131rlamalar g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, string halindeki Vue \u015fablonlar\u0131n\u0131 g\u00fcvenli, verimli ve Vue ekosistemiyle uyumlu bir \u015fekilde \u00e7al\u0131\u015fma zaman\u0131nda derleyip render edebilecek \u00f6zel bir \u00e7\u00f6z\u00fcme ihtiya\u00e7 duyulmaktad\u0131r. \u0130\u015fte bu \u00e7\u00f6z\u00fcm * Tam Vue Deste\u011fi:<\/strong> * Performans Maliyeti:<\/strong> \u015eablonlar \u00e7al\u0131\u015fma zaman\u0131nda derlendi\u011fi i\u00e7in, build time derlemeye g\u00f6re ek bir i\u015flem maliyeti ve dolay\u0131s\u0131yla performans d\u00fc\u015f\u00fc\u015f\u00fc ya\u015fanabilir. Bu, \u00f6zellikle \u00e7ok s\u0131k de\u011fi\u015fen veya \u00e7ok b\u00fcy\u00fck \u015fablonlar i\u00e7in belirgin olabilir. \u00d6ncelikle paketi projenize y\u00fcklemeniz gerekir:<\/p>\n E\u011fer Not:<\/strong> Vue CLI veya Vite gibi build ara\u00e7lar\u0131 varsay\u0131lan olarak Vue’nun derleyici i\u00e7ermeyen (runtime-only) s\u00fcr\u00fcm\u00fcn\u00fc kullan\u0131r. E\u011fer v-runtime-template<\/code> gibi ara\u00e7lar devreye girerek Vue.js’in dinamik potansiyelini bir \u00fcst seviyeye ta\u015f\u0131r. Bu makale, v-runtime-template<\/code>‘in ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, kurulumunu, kullan\u0131m\u0131n\u0131, geli\u015fmi\u015f senaryolar\u0131n\u0131, g\u00fcvenlik hususlar\u0131n\u0131 ve alternatiflerini detayl\u0131 bir \u015fekilde inceleyerek, Vue.js uygulamalar\u0131n\u0131za dinamik \u015fablon derleme yetene\u011fi kazand\u0131rman\u0131n yollar\u0131n\u0131 ke\u015ffedecektir.<\/p>\nVue.js’in \u015eablon Mekanizmas\u0131 ve Derleme S\u00fcreci<\/h3>\n
Build Time Derleme (Derleme Zaman\u0131)<\/h4>\n
.vue<\/code> uzant\u0131l\u0131 Tek Dosya Bile\u015fenleri (Single File Components – SFCs) i\u00e7indeki <\/code> etiketleri, vue-loader<\/code> (Webpack i\u00e7in) veya @vitejs\/plugin-vue<\/code> (Vite i\u00e7in) gibi eklentiler taraf\u0131ndan i\u015flenir. Bu eklentiler, HTML benzeri \u015fablon s\u00f6zdizimini, taray\u0131c\u0131n\u0131n do\u011frudan anlayabilece\u011fi ve i\u015fleyebilece\u011fi optimize edilmi\u015f JavaScript render fonksiyonlar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n
\n* Performans:<\/strong> \u015eablonlar \u00f6nceden derlendi\u011fi i\u00e7in, uygulaman\u0131n taray\u0131c\u0131da \u00e7al\u0131\u015fmaya ba\u015flad\u0131\u011f\u0131nda ekstra bir derleme maliyeti olmaz. Bu, daha h\u0131zl\u0131 ilk y\u00fckleme s\u00fcreleri ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar.
\n* Hata Ay\u0131klama:<\/strong> Build time derleme s\u0131ras\u0131nda \u015fablon s\u00f6zdizimi hatalar\u0131 tespit edilebilir, bu da geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131r\u0131r.
\n* Bundle Boyutu:<\/strong> Yaln\u0131zca render fonksiyonlar\u0131 nihai bundle’a dahil edildi\u011fi i\u00e7in, Vue’nun tam derleyicisini i\u00e7eren daha b\u00fcy\u00fck vue.global.js<\/code> gibi dosyalar\u0131 kullanmaya gerek kalmaz. Bu, daha k\u00fc\u00e7\u00fck uygulama boyutlar\u0131 anlam\u0131na gelir.<\/p>\nRuntime Derleme (\u00c7al\u0131\u015fma Zaman\u0131)<\/h4>\n
vue.global.js<\/code> gibi tam derleyici i\u00e7eren versiyonlar\u0131, \u015fablonlar\u0131 do\u011frudan taray\u0131c\u0131da derleme yetene\u011fine sahiptir. Bu, \u00f6zellikle k\u00fc\u00e7\u00fck \u00f6l\u00e7ekli projelerde veya CDN’den h\u0131zl\u0131ca dahil edilerek kullan\u0131lan durumlarda pratik olabilir. Ancak, bu yakla\u015f\u0131m\u0131n baz\u0131 dezavantajlar\u0131 vard\u0131r:
\n* Bundle Boyutu:<\/strong> Derleyiciyi i\u00e7eren Vue versiyonlar\u0131, derleyici i\u00e7ermeyen versiyonlara g\u00f6re daha b\u00fcy\u00fckt\u00fcr. Bu, uygulaman\u0131n toplam boyutunu art\u0131r\u0131r ve y\u00fckleme s\u00fcrelerini uzatabilir.
\n* Performans Maliyeti:<\/strong> Her \u015fablonun taray\u0131c\u0131da derlenmesi, \u00e7al\u0131\u015fma zaman\u0131nda ek bir i\u015flem maliyeti yarat\u0131r.
\n* Hata Ay\u0131klama:<\/strong> Build time derlemedeki kadar kapsaml\u0131 hata ay\u0131klama deste\u011fi sunmayabilir.<\/p>\nv-runtime-template<\/code> bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in geli\u015ftirilmi\u015ftir.<\/p>\nDinamik \u015eablon \u0130htiyac\u0131: Neden \u00c7al\u0131\u015fma Zaman\u0131 Derleme Gerekli?<\/h3>\n
\n* Dinamik Form Olu\u015fturucular:<\/strong> Kullan\u0131c\u0131lar\u0131n veya y\u00f6neticilerin s\u00fcr\u00fckle-b\u0131rak aray\u00fczleri arac\u0131l\u0131\u011f\u0131yla kendi formlar\u0131n\u0131 tasarlamas\u0131na olanak tan\u0131yan uygulamalar. Bu formlar\u0131n yap\u0131s\u0131 ve i\u00e7erdi\u011fi alanlar, build time’da bilinemez.
\n* \u00d6zelle\u015ftirilebilir G\u00f6sterge Panolar\u0131 (Dashboards):<\/strong> Kullan\u0131c\u0131lar\u0131n kendi widget’lar\u0131n\u0131 ekleyebilece\u011fi, d\u00fczenleyebilece\u011fi ve konumland\u0131rabilece\u011fi g\u00f6sterge panolar\u0131. Her widget’\u0131n \u015fablonu, kullan\u0131c\u0131n\u0131n tercihine g\u00f6re dinamik olarak y\u00fcklenebilir.
\n* Plugin veya Mod\u00fcl Sistemleri:<\/strong> Bir uygulaman\u0131n temel yap\u0131s\u0131na sonradan eklenecek mod\u00fcllerin kendi Vue \u015fablonlar\u0131n\u0131 getirmesi ve bunlar\u0131 ana uygulama i\u00e7inde derlenmesi gerekebilir.
\n* A\/B Testleri ve Ki\u015fiselle\u015ftirilmi\u015f UI’lar:<\/strong> Farkl\u0131 kullan\u0131c\u0131 gruplar\u0131na farkl\u0131 UI varyasyonlar\u0131 sunmak gerekti\u011finde, bu varyasyonlar\u0131n \u015fablonlar\u0131 sunucudan dinamik olarak \u00e7ekilip derlenebilir.<\/p>\nMevcut Vue \u00c7\u00f6z\u00fcmleri ve S\u0131n\u0131rlamalar\u0131<\/h4>\n
v-html<\/code> Direktifi:<\/strong> HTML i\u00e7eri\u011fini do\u011frudan DOM’a ekler. Ancak, v-html<\/code> ile eklenen i\u00e7erik, Vue taraf\u0131ndan derlenmez. Bu, Vue direktiflerinin, bile\u015fenlerinin veya reaktif veri ba\u011flamalar\u0131n\u0131n bu i\u00e7erik i\u00e7inde \u00e7al\u0131\u015fmayaca\u011f\u0131 anlam\u0131na gelir. Ayr\u0131ca, kullan\u0131c\u0131dan gelen i\u00e7eri\u011fi v-html<\/code> ile do\u011frudan kullanmak ciddi XSS (Cross-Site Scripting) g\u00fcvenlik riskleri ta\u015f\u0131r.
\n* Dinamik Bile\u015fenler (
\n* Render Fonksiyonlar\u0131:<\/strong> Vue.js, \u015fablonlar\u0131 kullanmak yerine render fonksiyonlar\u0131n\u0131 do\u011frudan yazarak da bile\u015fenleri tan\u0131mlaman\u0131za olanak tan\u0131r. Bu, en d\u00fc\u015f\u00fck seviyeli ve en esnek yakla\u015f\u0131md\u0131r. Ancak, render fonksiyonlar\u0131 programatik oldu\u011fu i\u00e7in \u015fablon yaz\u0131m\u0131n\u0131n okunakl\u0131l\u0131\u011f\u0131n\u0131 ve kolayl\u0131\u011f\u0131n\u0131 yitirir. Karma\u015f\u0131k UI’lar i\u00e7in render fonksiyonlar\u0131n\u0131 elle yazmak olduk\u00e7a zahmetli ve hata yapmaya a\u00e7\u0131k olabilir.
\n* eval()<\/code> veya new Function()<\/code> Kullan\u0131m\u0131:<\/strong> JavaScript’in eval()<\/code> fonksiyonu veya new Function()<\/code> yap\u0131s\u0131, string halindeki kodu \u00e7al\u0131\u015fma zaman\u0131nda \u00e7al\u0131\u015ft\u0131rmaya olanak tan\u0131r. Teorik olarak, Vue \u015fablonlar\u0131n\u0131 JavaScript koduna \u00e7evirip bu y\u00f6ntemlerle \u00e7al\u0131\u015ft\u0131rmak m\u00fcmk\u00fcn olsa da, bu son derece tehlikelidir. G\u00fcvenlik a\u00e7\u0131klar\u0131, performans sorunlar\u0131 ve Vue’nun reaktif ba\u011flam\u0131 ile entegrasyon zorluklar\u0131 nedeniyle kesinlikle \u00f6nerilmez.<\/p>\nv-runtime-template<\/code>‘tir.<\/p>\nv-runtime-template Nedir?<\/h3>\n
v-runtime-template<\/code>, Vue.js i\u00e7in geli\u015ftirilmi\u015f, string halindeki Vue \u015fablonlar\u0131n\u0131 \u00e7al\u0131\u015fma zaman\u0131nda derleyip render etmeyi sa\u011flayan bir bile\u015fendir. Temelde, Vue’nun kendi \u015fablon derleyicisini kullanarak, kendisine verilen \u015fablon string’ini bir render fonksiyonuna \u00e7evirir ve bu fonksiyonu mevcut Vue ba\u011flam\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\nNas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
v-runtime-template<\/code>, Vue.js’in dahili \u015fablon derleyicisini (Vue 3 i\u00e7in @vue\/compiler-dom<\/code>) kullan\u0131r. Bir string \u015fablonu ald\u0131\u011f\u0131nda, bu derleyiciyi \u00e7a\u011f\u0131rarak onu bir render fonksiyonuna d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu render fonksiyonu daha sonra v-runtime-template<\/code> bile\u015feninin kendi render<\/code> metodunda \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Bu sayede, dinamik olarak sa\u011flanan \u015fablon i\u00e7eri\u011fi, Vue’nun tam reaktivite ve direktif deste\u011fiyle birlikte, uygulaman\u0131n geri kalan\u0131yla sorunsuz bir \u015fekilde entegre olur.<\/p>\nAvantajlar\u0131<\/h4>\n
v-runtime-template<\/code> ile derlenen \u015fablonlar, v-if<\/code>, v-for<\/code>, v-bind<\/code>, v-on<\/code> gibi t\u00fcm Vue direktiflerini, \u00f6zel bile\u015fenleri, slotlar\u0131 ve filtreleri destekler.
\n* G\u00fcvenli Entegrasyon:<\/strong> v-html<\/code>‘dan farkl\u0131 olarak, v-runtime-template<\/code> i\u00e7eri\u011fi Vue’nun g\u00fcvenlik mekanizmalar\u0131 i\u00e7inde i\u015fler. Do\u011frudan DOM manip\u00fclasyonu yerine, Vue’nun sanal DOM’u \u00fczerinden \u00e7al\u0131\u015f\u0131r. Yine de, kullan\u0131c\u0131dan gelen i\u00e7eri\u011fi i\u015flerken dikkatli olmak gerekir.
\n* Kolay Kullan\u0131m:<\/strong> Bir Vue bile\u015feni olarak tasarland\u0131\u011f\u0131 i\u00e7in, uygulaman\u0131za entegrasyonu ve kullan\u0131m\u0131 olduk\u00e7a basittir. Props’lar arac\u0131l\u0131\u011f\u0131yla dinamik \u015fablonu, veriyi ve hatta dinamik \u015fablon i\u00e7inde kullan\u0131lacak bile\u015fenleri aktarabilirsiniz.
\n* \u00c7al\u0131\u015fma Zaman\u0131 Esnekli\u011fi:<\/strong> Uygulaman\u0131z\u0131n build time’da bilinmeyen veya de\u011fi\u015febilen UI par\u00e7alar\u0131n\u0131 olu\u015fturmak i\u00e7in e\u015fsiz bir esneklik sunar.<\/p>\nDezavantajlar\u0131<\/h4>\n
\n* Bundle Boyutu:<\/strong> v-runtime-template<\/code>‘in d\u00fczg\u00fcn \u00e7al\u0131\u015fabilmesi i\u00e7in Vue’nun tam derleyicisini i\u00e7eren bir Vue versiyonuna ihtiyac\u0131n\u0131z vard\u0131r. Bu, uygulaman\u0131z\u0131n nihai bundle boyutunu art\u0131rabilir. Vue CLI veya Vite gibi ara\u00e7lar genellikle derleyici i\u00e7ermeyen Vue versiyonunu kulland\u0131\u011f\u0131 i\u00e7in, v-runtime-template<\/code>‘i kullan\u0131rken bu durumu \u00f6zel olarak yap\u0131land\u0131rmak gerekebilir (genellikle vue.config.js<\/code> veya vite.config.js<\/code> i\u00e7inde vue\/compiler-dom<\/code>‘u dahil etmek).
\n* Hata Ay\u0131klama:<\/strong> Dinamik olarak derlenen \u015fablonlarda hata ay\u0131klama, statik olarak derlenen \u015fablonlara g\u00f6re daha zor olabilir. Kaynak haritalar\u0131 (source maps) genellikle dinamik i\u00e7erik i\u00e7in mevcut de\u011fildir.<\/p>\nv-runtime-template Kurulumu ve Kullan\u0131m\u0131<\/h3>\n
v-runtime-template<\/code>‘i Vue.js projenize entegre etmek olduk\u00e7a basittir.<\/p>\nKurulum<\/h4>\n
npm install v-runtime-template\nveya<\/h2>\nyarn add v-runtime-template<\/code><\/pre>\n
Vue 3 Uygulamas\u0131nda Global Kay\u0131t<\/h4>\n
v-runtime-template<\/code>‘i uygulaman\u0131z\u0131n bir\u00e7ok yerinde kullanacaksan\u0131z, onu global olarak kaydetmek pratik olabilir. Genellikle main.js<\/code> veya app.js<\/code> dosyan\u0131zda bunu yapars\u0131n\u0131z:<\/p>\n\/\/ main.js\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport VRuntimeTemplate from 'v-runtime-template';\n\nconst app = createApp(App);\n\n\/\/ VRuntimeTemplate bile\u015fenini global olarak kaydet\napp.component('VRuntimeTemplate', VRuntimeTemplate);\n\n\/\/ Uygulamay\u0131 mount etmeden \u00f6nce Vue derleyicisinin mevcut oldu\u011fundan emin olun\n\/\/ Vue CLI veya Vite kullan\u0131yorsan\u0131z, vue\/compiler-dom<\/code>'u dahil etmeniz gerekebilir.\n\/\/ \u00d6rne\u011fin, vite.config.js'de:\n\/\/ import vue from '@vitejs\/plugin-vue'\n\/\/ export default defineConfig({\n\/\/ plugins: [vue({\n\/\/ template: {\n\/\/ compilerOptions: {\n\/\/ isCustomElement: (tag) => tag.startsWith('v-runtime-template') \/\/ Opsiyonel\n\/\/ }\n\/\/ }\n\/\/ })],\n\/\/ resolve: {\n\/\/ alias: {\n\/\/ 'vue': 'vue\/dist\/vue.esm-bundler.js' \/\/ Vue 3 i\u00e7in derleyici i\u00e7eren s\u00fcr\u00fcm\u00fc kullan\u0131n\n\/\/ }\n\/\/ }\n\/\/ })\n\n\napp.mount('#app');<\/code><\/pre>\nv-runtime-template<\/code>‘in \u00e7al\u0131\u015fabilmesi i\u00e7in Vue’nun derleyici i\u00e7eren (runtime + compiler) s\u00fcr\u00fcm\u00fcne ihtiyac\u0131 vard\u0131r. Bu nedenle, vite.config.js<\/code> veya vue.config.js<\/code> dosyan\u0131zda Vue’nun tam s\u00fcr\u00fcm\u00fcn\u00fc kullanmak i\u00e7in bir alias tan\u0131mlaman\u0131z gerekebilir. Yukar\u0131daki vite.config.js<\/code> \u00f6rne\u011fi bu durumu g\u00f6stermektedir.<\/p>\nYerel Kay\u0131t<\/h4>\n
v-runtime-template<\/code>‘i sadece belirli bir bile\u015fen i\u00e7inde kullanacaksan\u0131z, onu yerel olarak kaydedebilirsiniz:<\/p>\n\n\n Dinamik \u0130\u00e7erik<\/h3>\n